/* Core Telegram Aesthetic */
:root {
  --bg-color: #f0f2f5;
  --surface: #ffffff;
  --surface-hover: #f4f4f5;
  --text: #000000;
  --text-muted: #707579;
  --brand: #3390ec;
  --brand-hover: #2979c6;
  --border: #dfdfdf;
  --bubble-in: #ffffff;
  --bubble-out: #effdde;
  --bubble-text: #000000;
  --nav-height: 60px;
  --header-height: 56px;
  --shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.dark {
  --bg-color: #0f0f0f;
  --surface: #212121;
  --surface-hover: #2c2c2d;
  --text: #ffffff;
  --text-muted: #aaaaaa;
  --brand: #8774e1;
  --brand-hover: #735fd3;
  --border: #2c2c2d;
  --bubble-in: #212121;
  --bubble-out: #3d5642;
  --bubble-text: #ffffff;
}
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--surface); color: var(--text); overflow: hidden; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; }

#root {
  display: flex; flex-direction: column; height: 100dvh; max-width: 1200px; margin: 0 auto;
  position: relative; background: var(--bg-color); box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.main-content {
  flex: 1; display: flex; overflow: hidden; position: relative;
}

.master-pane {
  width: 100%; display: flex; flex-direction: column; background: var(--surface);
  z-index: 10;
}
.detail-pane {
  position: absolute; inset: 0; background: var(--bg-color);
  transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 20; display: flex; flex-direction: column;
}
.detail-pane.open { transform: translateX(0); }

@media (min-width: 768px) {
  .master-pane { width: 350px; flex-shrink: 0; border-right: 1px solid var(--border); }
  .detail-pane { position: relative; transform: none; z-index: 1; }
  .mobile-back-btn { display: none !important; }
}

/* Shared interaction polish and the explicit light theme. */
html.light {
  --bg-color: #f2f5f8;
  --surface: #ffffff;
  --surface-hover: #eef3f7;
  --text: #18222d;
  --text-muted: #6e7c89;
  --brand: #1689df;
  --brand-hover: #0f72bf;
  --border: #dfe6ec;
  --bubble-in: #ffffff;
  --bubble-out: #e2f2ff;
  --bubble-text: #18222d;
}
html.light, html.light body { background: #f2f5f8; color: var(--text); }
html.light #root, html.light .master-pane, html.light .detail-pane { background: var(--bg-color); }
html.light .master-header, html.light .conv-header, html.light .chat-topbar,
html.light .conv-composer, html.light .mobile-page-head, html.light .bottom-nav { background: #fff; border-color: var(--border); }
html.light .chat-filters, html.light .stories-list { background: #fff; border-color: var(--border); }
html.light .search-bar, html.light .conv-composer input, html.light .conv-composer textarea { background: #eef3f7; color: var(--text); }
html.light .chat-item:hover, html.light .chat-item.active { background: #e7f2fc; color: var(--text); }
html.light .chat-preview, html.light .chat-time, html.light .settings-row small { color: #738291; }
html.light .conv-body { background-color: #eaf1f6; background-image: radial-gradient(circle at 15px 15px, rgba(83,112,135,.09) 0 1px, transparent 1.5px); }
html.light .msg-bubble { background: #fff; color: var(--text); }
html.light .msg-bubble.mine { background: #d9efff; }
html.light .settings-profile-large, html.light .settings-section,
html.light .profile-card.profile-details, html.light .profile-tabs { background: #fff; }
html.light .settings-row, html.light .profile-actions button { color: var(--text); border-color: var(--border); }
html.light .profile-tabs button { color: #728394; }
html.light .profile-tabs button.active { color: #167cc4; background: #e2f1fc; }
html.light .profile-empty strong { color: var(--text); }

.auth-wrapper { background: radial-gradient(circle at 10% 0%, #d9ecff 0, transparent 38%), var(--bg-color); }
.auth-card { width: min(420px, calc(100% - 32px)); padding: 34px 28px 28px; border: 1px solid var(--border); border-radius: 24px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 18px 50px rgba(21, 53, 78, .12); }
.auth-logo { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 18px; background: linear-gradient(145deg, #3390ec, #6352c7); color: #fff; font-size: 15px; font-weight: 700; }
.auth-card h1 { margin: 0; text-align: center; font-size: 25px; }
.auth-subtitle { margin: 9px 0 24px; color: var(--text-muted); text-align: center; line-height: 1.4; }
.auth-card .input-group { margin-top: 15px; }
.auth-card label { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.auth-card input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--border); border-radius: 13px; outline: none; background: var(--surface-hover); color: var(--text); transition: border-color .18s, box-shadow .18s; }
.auth-card input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51,144,236,.15); }
.input-hint { display: block; margin-top: 6px; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 80px; }
.password-toggle { position: absolute; top: 0; right: 8px; height: 48px; color: var(--brand); font-size: 12px; font-weight: 600; }
.auth-remember { margin: 16px 0; color: var(--text-muted); font-size: 13px; }
.auth-remember input { width: 17px; min-height: 17px; accent-color: var(--brand); }
.auth-error { margin: 14px 0; padding: 10px 12px; border-radius: 11px; background: rgba(211,47,47,.1); color: #c53636; font-size: 13px; line-height: 1.35; }
.auth-card .btn-primary { width: 100%; min-height: 48px; margin-top: 10px; border-radius: 13px; }
.btn-primary:disabled { opacity: .65; cursor: wait; }
.action-sheet-modal .modal-content { border-radius: 24px 24px 0 0; }
.action-sheet-modal { align-items: flex-end; }
.action-sheet-modal .modal-card { width: min(100%, 520px); max-width: none; margin: 0; padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
.action-sheet-modal .modal-actions { justify-content: stretch; }
.action-sheet-modal .modal-actions .btn-confirm { width: 100%; }
.action-grid { display: grid; gap: 6px; }
.action-grid .menu-item { width: 100%; padding: 14px 15px; border-radius: 12px; background: var(--surface-hover); text-align: left; }
.action-grid .menu-item:hover { background: var(--brand); color: #fff; }
.conv-peer { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; text-align: left; }
.conv-peer .avatar { width: 42px; height: 42px; font-size: 14px; }
.conv-peer .conv-header-info { min-width: 0; display: flex; flex-direction: column; }
.member-row[data-member-id] { cursor: pointer; }
.member-row[data-member-id]:hover { background: var(--surface-hover); }
.user-profile-sheet { display: grid; gap: 14px; }
.user-profile-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.user-profile-hero .avatar { width: 88px; height: 88px; margin-bottom: 4px; }
.user-profile-hero strong { font-size: 21px; }
.user-profile-hero span { color: var(--text-muted); }
.user-profile-hero p { max-width: 300px; margin: 5px 0 0; color: var(--text-muted); line-height: 1.4; }
.profile-sheet-title { margin: 4px 0 0; }
.profile-sheet-publications { display: grid; gap: 8px; }
.profile-sheet-publication { padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; white-space: pre-wrap; line-height: 1.4; }
.profile-sheet-publication small { display: block; margin-top: 7px; color: var(--text-muted); font-size: 11px; }
.device-card, .profile-link-card { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-hover); }
.device-card span, .device-card small, .profile-link-card code { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.profile-qr-image { width: 220px; height: 220px; justify-self: center; border-radius: 12px; background: #fff; padding: 8px; }
.publication-media { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.danger-action { color: var(--danger, #d34c4c); }
.energy-saving *, .energy-saving *::before, .energy-saving *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

.master-header {
  height: var(--header-height); display: flex; align-items: center; padding: 0 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.search-bar {
  flex: 1; display: flex; align-items: center; background: var(--surface-hover);
  border-radius: 20px; padding: 0 12px; height: 36px; gap: 8px;
}
.search-bar svg { width: 18px; height: 18px; color: var(--text-muted); }
.search-bar input { flex: 1; border: none; background: transparent; outline: none; color: var(--text); }
.master-title { font-size: 18px; font-weight: 600; }
.master-body { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* Bottom Nav */
.bottom-nav {
  height: var(--nav-height); display: flex; background: var(--surface);
  border-top: 1px solid var(--border); flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--text-muted); transition: color 0.2s;
}
.nav-item.active { color: var(--brand); }
.nav-item svg { width: 24px; height: 24px; }
.nav-item span { font-size: 11px; font-weight: 500; }
.nav-item:active { transform: scale(.94); }

/* Lists & Items */
.chat-list { display: flex; flex-direction: column; }
.chat-item {
  display: flex; align-items: center; padding: 10px 16px; gap: 12px; cursor: pointer;
  transition: background 0.2s;
}
.chat-item:hover { background: var(--surface-hover); }
.chat-item.active { background: var(--brand); color: #fff; }
.chat-item.active .chat-preview, .chat-item.active .chat-time, .chat-item.active svg { color: rgba(255,255,255,0.8); }
.list-section-title { padding: 12px 16px 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(145deg, #6c7bf1, #8a54c7); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.chat-avatar-channel { background: linear-gradient(145deg, #159fba, #3473dc); }
.chat-avatar-group { background: linear-gradient(145deg, #7d59c7, #d26792); }
.chat-avatar-saved { background: linear-gradient(145deg, #eb9b42, #d65e6d); }
.chat-avatar-bot { background: linear-gradient(145deg, #2c8e9d, #4561b8); }
.chat-avatar-channel svg, .chat-avatar-group svg, .chat-avatar-saved svg, .chat-avatar-bot svg { width: 25px; height: 25px; stroke: currentColor; }
.avatar.small { width: 36px; height: 36px; font-size: 14px; }

.chat-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.chat-item-top { display: flex; justify-content: space-between; align-items: baseline; }
.chat-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.chat-item-bottom { display: flex; justify-content: space-between; align-items: center; }
.chat-preview { font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.badge { background: #e4e4e5; color: var(--text); border-radius: 12px; padding: 2px 6px; font-size: 12px; font-weight: 600; margin-left: 8px; flex-shrink: 0; }
.chat-item.active .badge { background: #fff; color: var(--brand); }

/* Conversation */
.conv-header {
  height: var(--header-height); background: var(--surface); display: flex; align-items: center;
  padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 12px;
}
.mobile-back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -10px; color: var(--brand); }
.conv-header-info { flex: 1; display: flex; flex-direction: column; }
.conv-title { font-weight: 600; font-size: 15px; }
.conv-status { font-size: 13px; color: var(--text-muted); }
.btn-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border-radius: 50%; transition: background 0.2s; }
.btn-icon:hover { background: var(--surface-hover); color: var(--brand); }
.btn-icon svg { width: 24px; height: 24px; }
.btn-action { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--brand); font-weight: 500; font-size: 15px; transition: background 0.2s; width: 100%; }
.btn-action:hover { background: var(--surface-hover); }

.conv-body {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.empty-detail { margin: auto; color: var(--text-muted); font-size: 14px; background: rgba(0,0,0,0.05); padding: 8px 16px; border-radius: 16px; }

.msg-bubble {
  max-width: 80%; padding: 8px 12px; border-radius: 16px; background: var(--bubble-in);
  color: var(--text); align-self: flex-start; box-shadow: var(--shadow); position: relative;
  border-bottom-left-radius: 4px; cursor: pointer; display: flex; flex-direction: column;
}
.msg-bubble.mine {
  align-self: flex-end; background: var(--bubble-out); color: var(--bubble-text);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 4px;
}
.msg-author { font-size: 13px; color: var(--brand); font-weight: 600; margin-bottom: 2px; }
.msg-text { font-size: 15px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.msg-meta { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 2px; align-self: flex-end; opacity: 0.8; margin-left: 12px; display: flex; gap: 4px; }

.conv-composer {
  position: relative; background: var(--surface); padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 8px; border-top: 1px solid var(--border);
}
.composer-actions { position: absolute; left: 12px; bottom: calc(100% - 1px); width: min(270px, calc(100vw - 24px)); padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
.composer-action { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--text); border-radius: 8px; text-align: left; font-size: 14px; }
.composer-action:hover { background: var(--surface-hover); }.composer-action span { flex: 1; }
.conv-composer input,
.conv-composer textarea {
  flex: 1; background: transparent; border: none; outline: none; padding: 12px 0;
  font: inherit; font-size: 15px; color: var(--text); min-height: 44px;
  max-height: 132px; resize: none; overflow-y: auto; line-height: 1.35;
}
.submit-btn { color: var(--brand); }

/* Stories */
.stories-list { display: flex; gap: 10px; padding: 6px 12px 9px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 60px; flex-shrink: 0; cursor: pointer; }
.story-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--brand); padding: 2px; background-clip: content-box; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-muted); }
.story-item.add .story-avatar { border-color: var(--border); background: var(--surface-hover); }
.story-item span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }

/* Modals & Toasts */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 1; transition: opacity 0.2s; }
.modal-overlay.hide { opacity: 0; }
.modal-card { background: var(--surface); border-radius: 16px; width: 90%; max-width: 360px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.modal-title { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.modal-input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-hover); color: var(--text); outline: none; }
.modal-input:focus { border-color: var(--brand); background: transparent; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.btn-cancel { padding: 8px 16px; color: var(--brand); font-weight: 500; }
.btn-confirm { padding: 8px 16px; background: var(--brand); color: #fff; font-weight: 600; border-radius: 8px; }
.quick-create-list { display: grid; gap: 7px; }
.quick-create-hint { margin: -3px 2px 5px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.quick-create-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 11px; width: 100%; padding: 10px 9px; border-radius: 14px; text-align: left; transition: background .18s ease, transform .18s ease; }
.quick-create-item:hover { background: var(--surface-hover); }
.quick-create-item:active { transform: scale(.98); }
.quick-create-item > span:nth-child(2) { min-width: 0; }
.quick-create-item strong, .quick-create-item small { display: block; }
.quick-create-item strong { font-size: 14px; }
.quick-create-item small { margin-top: 3px; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-create-item > b { color: var(--text-muted); font-size: 23px; font-weight: 400; text-align: right; }
.quick-create-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 20px; }
.quick-create-icon.blue { background: linear-gradient(145deg, #3390ec, #2475cb); }
.quick-create-icon.purple { background: linear-gradient(145deg, #8a6bea, #6e4cc3); }
.quick-create-icon.orange { background: linear-gradient(145deg, #f19a4e, #d8752e); }

.toast { position: fixed; top: 20px; left: 50%; transform: translate(-50%, -20px); background: #323232; color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 14px; opacity: 0; transition: all 0.3s; z-index: 200; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Settings */
.settings-profile { display: flex; align-items: center; gap: 16px; padding: 20px 16px; border-bottom: 8px solid var(--bg-color); }
.settings-profile .avatar { width: 72px; height: 72px; font-size: 24px; }
.profile-info { flex: 1; }
.profile-name { font-size: 20px; font-weight: 600; }
.profile-user { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.menu-item { width: 100%; text-align: left; padding: 16px; font-size: 16px; border-bottom: 1px solid var(--border); transition: background 0.2s; display: flex; align-items: center; gap: 16px; }
.menu-item:hover { background: var(--surface-hover); }
.menu-hint { display: block; padding: 4px 8px 9px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }

/* Auth */
.auth-wrapper { display: flex; align-items: center; justify-content: center; height: 100dvh; background: var(--bg-color); padding: 20px; }
.auth-card { background: var(--surface); padding: 32px; border-radius: 16px; width: 100%; max-width: 360px; text-align: center; box-shadow: var(--shadow); }
.auth-logo { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 18px; background: linear-gradient(145deg, #3390ec, #6352c7); color: #fff; font-size: 15px; font-weight: 700; }
.auth-card h1 { font-size: 24px; font-weight: 600; margin: 0 0 24px; }
.input-group { margin-bottom: 16px; text-align: left; }
.input-group label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.btn-primary { background: var(--brand); color: #fff; padding: 14px; border-radius: 8px; font-weight: 600; width: 100%; font-size: 16px; margin-top: 8px; }
.btn-link { color: var(--brand); margin-top: 16px; font-size: 14px; font-weight: 500; width: 100%; }

/* Story viewer */
.story-viewer { position: fixed; inset: 0; background: #000; z-index: 200; display: flex; flex-direction: column; color: #fff; }
.story-progress { height: 2px; background: rgba(255,255,255,0.3); margin: 16px; border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; background: #fff; animation: progress 5s linear forwards; }
@keyframes progress { from { width: 0; } to { width: 100%; } }
.story-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; font-size: 32px; color: #fff; display: flex; align-items: center; justify-content: center; text-shadow: 0 2px 4px rgba(0,0,0,0.5); z-index: 10; }
.story-content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 20px; }
.story-text { position: relative; z-index: 1; font-size: 24px; font-weight: 600; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.8); max-width: 80%; }
.story-author { position: absolute; top: 12px; left: 20px; right: 70px; font-size: 15px; font-weight: 600; }
.story-media { max-width: min(92vw, 720px); max-height: 68vh; object-fit: contain; border-radius: 12px; margin-bottom: 18px; }
.msg-file { display: block; color: var(--brand); text-decoration: underline; margin-bottom: 6px; overflow-wrap: anywhere; }

/* Extended messenger controls */
.chat-filters { display: flex; gap: 6px; padding: 10px 12px 2px; overflow-x: auto; scrollbar-width: none; }
.filter-btn { padding: 6px 11px; color: var(--text-muted); background: var(--surface-hover); border-radius: 16px; white-space: nowrap; font-size: 12px; }
.filter-btn.active { color: #fff; background: var(--brand); }
.empty-list { padding: 30px 20px; color: var(--text-muted); text-align: center; font-size: 14px; }
.contacts-actions { padding: 8px 0; border-bottom: 1px solid var(--border); }
.contacts-actions .btn-action { padding: 12px 16px; }
.contact-more { width: 32px; color: var(--text-muted); font-size: 20px; }
.message-search-row { display: flex; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.message-search-row input { flex: 1; border: 0; outline: 0; color: var(--text); background: var(--surface-hover); border-radius: 8px; padding: 8px 10px; }
.message-search-row button { width: 32px; color: var(--text-muted); font-size: 20px; }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--brand); background: var(--surface); border-top: 1px solid var(--border); border-left: 3px solid var(--brand); font-size: 12px; }
.reply-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.reply-bar button { color: var(--text-muted); font-size: 18px; }
.msg-bubble.is-pinned { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); }
.msg-forwarded { color: var(--brand); font-size: 12px; }.msg-quote { padding: 4px 7px; color: var(--text-muted); background: var(--surface-hover); border-left: 2px solid var(--brand); border-radius: 4px; font-size: 12px; }
.reaction-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }.reaction-chip { padding: 3px 6px; color: var(--text); background: var(--surface-hover); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; cursor: pointer; }
.action-grid { display: flex; flex-direction: column; gap: 3px; }.action-grid .menu-item { padding: 11px 8px; border-radius: 7px; border: 0; }.action-grid .menu-item:hover { background: var(--surface-hover); }
.menu-item.danger, .danger-text { color: #e53935 !important; }.brand-text { color: var(--brand) !important; }
.reaction-picker { display: flex; justify-content: space-between; gap: 4px; }.reaction-picker button { width: 42px; height: 42px; border-radius: 10px; font-size: 22px; }.reaction-picker button:hover { background: var(--surface-hover); }
.member-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }.member-row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px; border-bottom: 1px solid var(--border); }.member-row > span:first-of-type, .member-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }.member-row small { color: var(--text-muted); font-size: 12px; }.member-row button { color: var(--brand); font-size: 12px; }
.community-modal { max-width: 480px; }.community-summary { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }.community-summary small { color: var(--text-muted); font-size: 12px; }.community-actions { display: flex; gap: 8px; margin-bottom: 12px; }.community-actions .btn-action { flex: 1; padding: 9px 8px; font-size: 12px; }.member-actions { flex: 0 0 auto !important; flex-direction: row !important; gap: 8px !important; }.member-actions button { white-space: nowrap; }.member-search-row { display: flex; gap: 8px; margin-bottom: 12px; }.member-search-row .modal-input { flex: 1; }.member-search-row .btn-action { flex: 0 0 auto; padding: 0 12px; }.community-modal .modal-input + .modal-input { margin-top: 10px; }
.folder-list { display: flex; flex-direction: column; margin-bottom: 12px; }.folder-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }.folder-row span { display: flex; flex-direction: column; gap: 2px; }.folder-row small { color: var(--text-muted); font-size: 12px; }.folder-row button { color: #e53935; font-size: 12px; }
.profile-page { padding: 0 16px 30px; }.profile-hero { display: flex; flex-direction: column; align-items: center; padding: 28px 0 22px; }.profile-hero .avatar { width: 92px; height: 92px; font-size: 32px; }.profile-hero h1 { margin: 12px 0 3px; font-size: 23px; }.profile-username { color: var(--text-muted); }.profile-online { margin-top: 8px; color: #2eaa78; font-size: 12px; }
.profile-card { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--surface); border-radius: 12px; }.profile-card div { flex: 1; display: flex; flex-direction: column; gap: 5px; }.profile-card span { color: var(--text-muted); font-size: 12px; }.profile-card strong { font-size: 14px; font-weight: 500; }.profile-card button, .publication-actions button { color: var(--brand); font-size: 12px; }
.profile-section-title { margin: 22px 4px 8px; color: var(--text-muted); font-size: 13px; font-weight: 600; }.publication-list { display: flex; flex-direction: column; gap: 8px; }.publication-card { padding: 14px; background: var(--surface); border-radius: 12px; }.publication-card > div:first-child { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }.publication-card > small { display: block; margin-top: 9px; color: var(--text-muted); font-size: 11px; }.publication-actions { display: flex; gap: 14px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); }
.profile-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }.profile-media-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface-hover); border-radius: 10px; }.profile-media-tile img, .profile-media-tile video { width: 100%; height: 100%; display: block; object-fit: cover; }.profile-media-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: rgba(0,0,0,.55); border-radius: 50%; }
.upload-progress { display: flex; align-items: center; gap: 9px; padding: 7px 12px; color: var(--text-muted); background: var(--surface); border-top: 1px solid var(--border); font-size: 11px; }.upload-progress span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.upload-progress strong { flex: 0 0 auto; color: var(--brand); font-size: 11px; }.upload-progress > div { flex: 1; height: 4px; overflow: hidden; background: var(--surface-hover); border-radius: 4px; }.upload-progress i { display: block; width: 0; height: 100%; background: var(--brand); transition: width .15s ease; }
.modal-upload-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-muted); font-size: 11px; }.modal-upload-progress span { min-width: 0; }.modal-upload-progress strong { color: var(--brand); }.modal-upload-progress > div { flex: 1; height: 4px; overflow: hidden; background: var(--surface-hover); border-radius: 4px; }.modal-upload-progress i { display: block; width: 0; height: 100%; background: var(--brand); transition: width .15s ease; }
.settings-profile { width: 100%; padding: 20px 16px; color: inherit; background: var(--surface); border: 0; border-bottom: 8px solid var(--bg-color); text-align: left; }.settings-profile .profile-info { gap: 4px; }.settings-profile .profile-name { font-size: 18px; }.settings-profile .profile-user { font-size: 13px; }.settings-profile > span:last-child { color: var(--text-muted); font-size: 24px; }
.check-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.btn-icon.recording { color: #e53935; background: color-mix(in srgb, #e53935 14%, transparent); }
.poll-card { margin-top: 8px; min-width: 220px; max-width: 320px; }.poll-question { display: block; margin-bottom: 8px; }.poll-options { display: grid; gap: 5px; }.poll-option { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; padding: 7px; border-radius: 7px; background: color-mix(in srgb, var(--surface-hover) 70%, transparent); cursor: pointer; }.poll-option-text { overflow-wrap: anywhere; }.poll-percent { color: var(--text-muted); font-size: 11px; }.poll-vote-submit, .poll-close { margin-top: 8px; color: var(--brand); font-size: 12px; }.poll-close { float: right; color: var(--danger, #e53935); }.poll-closed { display: block; margin-top: 8px; color: var(--text-muted); }

/* Admin workspace */
.admin-back-button { margin-right: 8px; }
.admin-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 9px 0 4px;
  color: var(--brand);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.admin-menu-button svg { width: 18px; height: 18px; }
.admin-menu-button:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.admin-menu-button:active { transform: scale(.97); }
.admin-menu-hero {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 13px 5px;
  padding: 14px;
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, var(--surface)), color-mix(in srgb, #1ab7a5 14%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--brand) 17%, var(--border));
  border-radius: 17px;
}
.admin-menu-hero-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #20b9a5);
  border-radius: 11px;
}
.admin-menu-hero-icon svg { width: 19px; height: 19px; }
.admin-menu-hero strong,
.admin-menu-hero small { display: block; }
.admin-menu-hero strong { font-size: 13px; }
.admin-menu-hero small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.admin-menu { padding: 8px; }
.admin-menu .menu-item { border: 0; border-radius: 10px; padding: 13px 12px; gap: 12px; color: var(--text); }
.admin-menu .menu-item.active { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); font-weight: 600; }
.admin-menu-icon { width: 24px; color: var(--text-muted); font-size: 19px; line-height: 1; text-align: center; }
.admin-menu .menu-item.active .admin-menu-icon { color: var(--brand); }
.admin-search { flex: 0 1 300px; margin-left: auto; }
.admin-search input::placeholder { color: var(--text-muted); }
.admin-body { padding: 18px; gap: 18px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.admin-stat-card { min-height: 98px; display: flex; flex-direction: column; justify-content: center; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.admin-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.admin-stat-card.alert { border-color: color-mix(in srgb, #e53935 35%, var(--border)); }
.admin-stat-card.neutral .admin-stat-value { color: var(--text); }
.admin-stat-value { color: var(--brand); font-size: 27px; font-weight: 700; letter-spacing: -.5px; }
.admin-stat-card.alert .admin-stat-value { color: #e53935; }
.admin-stat-label { margin-top: 5px; color: var(--text-muted); font-size: 12px; }
.admin-section-title { margin: 4px 0 0; font-size: 17px; }
.admin-action-list { padding: 0 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.admin-action-row { padding: 13px 15px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.admin-action-row:last-child { border-bottom: 0; }
.admin-action-date, .admin-secondary-text { color: var(--text-muted); font-size: 12px; }
.admin-action-date { margin-bottom: 3px; }
.admin-action-details { margin-top: 4px; color: var(--brand); font-size: 12px; overflow-wrap: anywhere; }
.admin-table-wrap { padding: 0; display: block; overflow: auto; }
.admin-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13px; }
.admin-table th { position: sticky; top: 0; z-index: 1; padding: 12px 15px; color: var(--text-muted); background: var(--surface-hover); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.admin-table td { padding: 13px 15px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tbody tr { transition: background .18s ease; }
.admin-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-align-right { text-align: right !important; }
.admin-action-buttons { white-space: nowrap; }
.admin-primary-text { font-weight: 600; }
.admin-badge { display: inline-flex; align-items: center; min-height: 23px; margin: 2px 4px 2px 0; padding: 3px 8px; color: var(--text); background: var(--surface-hover); border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.admin-badge.purple { color: #6f5ad8; background: color-mix(in srgb, #8774e1 16%, transparent); border-color: color-mix(in srgb, #8774e1 30%, transparent); }
.admin-badge.gold { color: #a06c00; background: color-mix(in srgb, #ffb300 18%, transparent); border-color: color-mix(in srgb, #ffb300 35%, transparent); }
.admin-badge.red { color: #d32f2f; background: color-mix(in srgb, #e53935 14%, transparent); border-color: color-mix(in srgb, #e53935 30%, transparent); }
.admin-badge.orange { color: #b26800; background: color-mix(in srgb, #ff9800 16%, transparent); border-color: color-mix(in srgb, #ff9800 30%, transparent); }
.admin-badge.green { color: #218353; background: color-mix(in srgb, #2eaa78 16%, transparent); border-color: color-mix(in srgb, #2eaa78 30%, transparent); }
.admin-badge.gray { color: var(--text-muted); }
.admin-table-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px; color: var(--brand); border-radius: 8px; font-size: 12px; font-weight: 600; transition: background .18s ease, color .18s ease; }
.admin-table-button:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.admin-table-button.danger-text:hover { background: color-mix(in srgb, #e53935 12%, transparent); }
.admin-message-cell, .admin-reason-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
.admin-attachment-link { color: var(--brand); font-size: 12px; }
.admin-date-cell, .admin-details-cell { max-width: 240px; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.admin-empty-cell { padding: 42px 20px !important; color: var(--text-muted); text-align: center; }
.admin-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; color: var(--text-muted); font-size: 13px; }
.admin-page-button { min-width: 82px; padding: 8px 13px; color: var(--brand); background: var(--surface-hover); border-radius: 9px; font-size: 13px; font-weight: 600; transition: opacity .18s ease, background .18s ease; }
.admin-page-button:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 13%, transparent); }
.admin-page-button:disabled { cursor: default; opacity: .4; }
.admin-filter { max-width: 180px; padding: 8px 10px; color: var(--text); background: var(--surface-hover); border: 1px solid var(--border); border-radius: 9px; outline: none; }
.admin-filter:focus { border-color: var(--brand); }
.admin-form-label { display: block; margin: 13px 0 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.admin-form-label:first-child { margin-top: 0; }
.admin-form-control { display: block; margin-bottom: 4px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.admin-form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.admin-check-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; color: var(--text); font-size: 13px; cursor: pointer; }
.admin-check-row input { width: 16px; height: 16px; accent-color: var(--brand); }
.admin-review-actions { margin-top: 14px; padding: 10px 12px; background: var(--surface-hover); border-radius: 10px; }
.admin-modal-warning { margin: 0; color: #d32f2f; line-height: 1.5; }
.admin-report-summary { margin: 6px 0 0; line-height: 1.45; }
.admin-loading { display: inline-flex; align-items: center; gap: 9px; }
.admin-spinner { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); border-radius: 50%; animation: admin-spin .7s linear infinite; }
.admin-error { color: #d32f2f; background: color-mix(in srgb, #e53935 10%, transparent); }
@keyframes admin-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  .admin-search { flex: 1; max-width: none; margin-left: 0; }
  .admin-body { padding: 12px; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-stat-card { min-height: 82px; padding: 12px; }
  .admin-stat-value { font-size: 23px; }
  .admin-table { min-width: 660px; }
  .admin-pagination { padding: 13px 8px; }
}

/* Mobile Telegram layout. The product is intentionally phone-first: no
   desktop split pane or sidebar is used at any viewport width. */
:root {
  --bg-color: #0e1621;
  --surface: #17212b;
  --surface-hover: #202f3d;
  --text: #f2f5f7;
  --text-muted: #8796a5;
  --brand: #3390ec;
  --brand-hover: #4aa3f5;
  --border: #263746;
  --bubble-in: #182632;
  --bubble-out: #2b6bb2;
  --bubble-text: #fff;
  --line: #253543;
  --nav-height: 66px;
  --header-height: 64px;
}

html, body { background: #0e1621; color: var(--text); }
body { min-width: 320px; overflow: hidden; }
#root { width: min(100%, 480px); max-width: 480px; height: 100dvh; margin: 0 auto; background: var(--bg-color); box-shadow: none; }
.main-content { min-height: 0; }
.master-pane { width: 100%; min-width: 0; background: var(--bg-color); }
.detail-pane { position: absolute; inset: 0; z-index: 20; transform: translateX(100%); background: var(--bg-color); }
.detail-pane.open { transform: translateX(0); }
.bottom-nav { height: var(--nav-height); padding: 5px 9px calc(5px + env(safe-area-inset-bottom)); background: rgba(25, 38, 50, .98); border-top: 1px solid #263746; gap: 4px; }
.nav-item { min-width: 0; gap: 2px; border-radius: 22px; color: #eef4f8; }
.nav-item.active { color: #fff; background: #213c56; }
.nav-item svg { width: 25px; height: 25px; }
.nav-item span { font-size: 12px; }
.nav-item.active::after { content: ''; position: absolute; }

.master-header, .conv-header { height: 62px; padding: 0 14px; background: #17212b; border-bottom: 1px solid #22313e; }
.master-header { gap: 9px; }
.master-title, .mobile-page-head h1 { font-size: 25px; font-weight: 700; letter-spacing: -.4px; }
.chat-topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 8px 13px 4px; background: #17212b; }
.chat-brand { display: flex; align-items: center; gap: 10px; font-size: 21px; letter-spacing: -.2px; }
.chat-brand .avatar { width: 42px; height: 42px; font-size: 13px; }
.chat-top-actions { display: flex; align-items: center; gap: 2px; }
.chat-top-actions .btn-icon { width: 38px; height: 38px; font-size: 25px; }
.chat-search-header { height: 51px; padding: 3px 13px 6px; border-bottom: 0; }
.search-bar { height: 43px; padding: 0 13px; background: #253342; border-radius: 22px; }
.search-bar input { color: var(--text); font-size: 16px; }
.search-bar input::placeholder { color: #82909e; }
.btn-icon { width: 42px; height: 42px; color: #eff4f8; }
.btn-icon svg { width: 25px; height: 25px; }
.master-body { scrollbar-color: #314758 transparent; }

.chat-filters { padding: 8px 13px 7px; background: #17212b; border-bottom: 1px solid #20303d; }
.filter-btn { padding: 8px 16px; color: #aab8c5; background: #223343; border-radius: 20px; font-size: 14px; }
.filter-btn.active { color: #fff; background: #2c4b69; }
.stories-list { padding: 9px 13px 11px; background: #17212b; border-bottom: 1px solid #22313e; }
.story-item { width: 60px; }
.story-avatar { width: 52px; height: 52px; border-color: #42a5f5; background-color: #263b4d; }
.story-item span { color: #d9e1e8; }

.chat-list { padding: 4px 0 10px; }
.chat-item { min-height: 76px; padding: 8px 13px; gap: 13px; border-bottom: 1px solid rgba(38, 55, 70, .46); }
.chat-item:hover, .chat-item.active { background: #1d2c39; color: var(--text); }
.chat-item.active .chat-preview, .chat-item.active .chat-time, .chat-item.active svg { color: var(--text-muted); }
.avatar { width: 57px; height: 57px; border-radius: 50%; background: linear-gradient(145deg, #3d80b8, #7851a8); font-size: 19px; }
.avatar.small { width: 44px; height: 44px; font-size: 15px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.chat-item-info { gap: 4px; }
.chat-title { font-size: 16px; font-weight: 600; }
.chat-time { font-size: 12px; color: #8ca0b2; }
.chat-preview { font-size: 14px; color: #8d9ba8; }
.badge { min-width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; background: #4b88bd; color: #fff; border-radius: 12px; }
.floating-new-chat { position: absolute; right: 17px; bottom: 20px; z-index: 5; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #168de2; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; animation: fab-in .35s cubic-bezier(.2,.8,.2,1) both; }
.floating-new-chat svg { width: 28px; height: 28px; }.floating-new-chat span { display: none; }
.floating-new-chat:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(22,141,226,.32); }
.floating-new-chat:active { transform: scale(.9); }

@keyframes pane-in { from { opacity: .45; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fab-in { from { opacity: 0; transform: translateY(12px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes list-item-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  .screen-enter { animation: pane-in .28s cubic-bezier(.2,.8,.2,1) both; }
  .chat-item { animation: list-item-in .3s both; animation-delay: calc(var(--item-index, 0) * 24ms); }
  .modal-card { animation: modal-in .22s cubic-bezier(.2,.8,.2,1) both; }
  .action-sheet-modal .modal-card { animation-name: sheet-in; }
  .quick-create-item { animation: list-item-in .25s both; }
  .quick-create-item:nth-child(2) { animation-delay: 35ms; }
  .quick-create-item:nth-child(3) { animation-delay: 70ms; }
  .quick-create-item:nth-child(4) { animation-delay: 105ms; }
}

.conv-header { height: 64px; gap: 9px; }
.conv-header-info { gap: 2px; }
.conv-title { font-size: 16px; font-weight: 700; }
.conv-status { font-size: 13px; color: #5da4e4; }
.mobile-back-btn { width: 39px; color: #f2f5f7; }
.message-search-row { padding: 7px 12px; background: #17212b; border-bottom: 1px solid #2b3b49; }
.message-search-row input { background: #253342; color: #fff; }
.conv-body { gap: 5px; padding: 12px 8px 13px; background-color: #0f1b26; background-image: radial-gradient(circle at 15px 15px, rgba(132,159,179,.08) 0 1px, transparent 1.5px), radial-gradient(circle at 45px 38px, rgba(132,159,179,.06) 0 1px, transparent 1.5px); background-size: 60px 54px; }
.empty-detail { background: #223343; color: #b7c3cd; }
.msg-bubble { max-width: 86%; padding: 7px 10px; border-radius: 14px 14px 14px 4px; background: #263746; box-shadow: 0 1px 1px rgba(0,0,0,.14); }
.msg-bubble.mine { background: #2b78c5; border-radius: 14px 14px 4px 14px; }
.msg-author { color: #69b7f5; }
.msg-text { font-size: 16px; line-height: 1.28; }
.msg-meta { color: rgba(255,255,255,.62); }
.conv-composer { min-height: 59px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); gap: 5px; background: #17212b; border-top: 1px solid #263746; }
.conv-composer input,
.conv-composer textarea { min-height: 43px; padding: 11px 9px; color: #fff; background: #233342; border-radius: 22px; }
.conv-composer input::placeholder,
.conv-composer textarea::placeholder { color: #82909e; }
.submit-btn { width: 44px; height: 44px; color: #55aef1; }
.composer-actions { left: 8px; bottom: calc(100% - 1px); width: calc(100% - 16px); background: #223343; border-color: #314757; }
.reply-bar { padding: 8px 12px; background: #17212b; }

.mobile-page-head { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 8px 17px 0; background: var(--bg-color); }
.mobile-page-head h1 { margin: 0; }
.mobile-page-head .btn-icon { color: #eaf1f5; }
.contacts-head { height: 70px; padding-top: 10px; }.contacts-search { height: 54px; padding: 3px 13px 8px; border: 0; }
.contacts-actions { margin: 8px 13px 6px; padding: 0; overflow: hidden; border: 1px solid #263746; border-radius: 18px; background: #17212b; }
.contacts-actions .btn-action { padding: 15px; border-bottom: 1px solid #263746; color: #fff; }
.contacts-actions .btn-action:last-child { border-bottom: 0; }
.quick-action-icon { width: 34px; height: 34px; display: inline-grid; place-items: center; margin-right: 10px; border-radius: 10px; color: #fff; font-size: 20px; }.quick-action-icon.blue { background: #2a9be7; }.quick-action-icon.green { background: #4bc665; }.quick-action-icon.orange { background: #eea122; }.quick-action-icon.purple { background: #8b6be0; }
.quick-action-icon svg { width: 19px; height: 19px; }
.list-section-title { padding: 15px 18px 7px; color: #64b6f5; text-transform: none; font-size: 15px; }

.settings-scroll { padding-bottom: 18px; }
.settings-profile-large { margin: 7px 13px 13px; width: calc(100% - 26px); padding: 17px; border: 0; border-radius: 18px; background: #1b2936; color: #fff; }
.settings-profile-large .avatar { width: 68px; height: 68px; }
.settings-profile-large .profile-name { font-size: 21px; }
.settings-profile-large .profile-user { margin-top: 4px; color: #8da0af; font-size: 15px; }
.settings-chevron { color: #9eabb6; font-size: 28px; }
.settings-section { margin: 0 13px 13px; overflow: hidden; border-radius: 18px; background: #1b2936; }
.settings-row { width: 100%; min-height: 67px; display: flex; align-items: center; gap: 13px; padding: 9px 15px; text-align: left; color: #f1f4f7; border-bottom: 1px solid #263746; }
.settings-row:last-child { border-bottom: 0; }
.settings-row span { flex: 1; min-width: 0; }
.settings-row strong, .settings-row small { display: block; }
.settings-row strong { font-size: 16px; font-weight: 500; }
.settings-row small { margin-top: 3px; color: #8698a7; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-row i { color: #7d8d9a; font-size: 28px; font-style: normal; }
.settings-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; color: #fff; font-size: 18px; }
.settings-icon svg { width: 19px; height: 19px; }
.settings-icon.accounts, .settings-icon.account { background: #2699e8; }
.settings-icon.chats { background: #f2a31a; }.settings-icon.privacy { background: #48c25d; }
.settings-icon.notices { background: #e85a66; }.settings-icon.data { background: #4b83df; }
.settings-icon.folders { background: #22a5df; }.settings-icon.devices { background: #22a9b8; }
.settings-icon.power { background: #ef761d; }.settings-icon.admin { background: #8568d8; }
.settings-icon.logout { background: #b34b63; }.danger-row { color: #f47a8b; }

.profile-page-head { height: 60px; }
.profile-hero { padding: 17px 0 22px; }
.profile-hero .avatar { width: 108px; height: 108px; font-size: 34px; }
.profile-hero h1 { margin: 13px 0 3px; font-size: 24px; }
.profile-username { color: #8b9ba8; font-size: 14px; }
.profile-online { color: #5eabe5; }
.profile-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 13px 14px; }
.profile-actions button { min-height: 61px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 17px; background: #263746; color: #fff; font-size: 22px; }
.profile-actions small { font-size: 12px; }
.profile-card.profile-details { margin: 0 13px; padding: 13px 17px; display: grid; gap: 14px; border-radius: 18px; background: #1b2936; }
.profile-details strong, .profile-details span { display: block; }
.profile-details strong { font-size: 17px; font-weight: 400; }
.profile-details span { margin-top: 4px; color: #8293a2; font-size: 13px; }
.profile-tabs { display: flex; margin: 17px 15px; padding: 4px; border-radius: 19px; background: #1b2936; }
.profile-tabs button { flex: 1; padding: 9px 7px; color: #8796a5; border-radius: 15px; font-size: 14px; }
.profile-tabs button.active { color: #78c0f3; background: #263f56; }
.profile-empty { min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 20px; text-align: center; color: #8d9ba8; }
.profile-empty strong { color: #fff; font-size: 20px; }.profile-empty span { max-width: 290px; font-size: 15px; line-height: 1.35; }
.profile-empty button { margin-top: 18px; padding: 11px 22px; border-radius: 22px; background: #2699e8; color: #fff; font-weight: 600; }

/* Profile polish */
.profile-page-head { padding: 8px 13px 0; }
.profile-page-kicker { color: #f1f5f8; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.profile-head-actions { display: flex; gap: 2px; }
.profile-head-actions .btn-icon { color: #afbfcc; }
.profile-hero { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 222px; margin: 0 13px 12px; padding: 0 16px 19px; overflow: hidden; border: 1px solid rgba(117, 164, 197, .14); border-radius: 24px; background: linear-gradient(155deg, #203b52 0%, #182d3e 54%, #17212b 100%); box-shadow: 0 12px 28px rgba(0, 0, 0, .13); }
.profile-cover { position: absolute; inset: 0 0 auto; height: 92px; background: radial-gradient(circle at 18% 18%, rgba(76, 183, 245, .42), transparent 36%), radial-gradient(circle at 86% 0%, rgba(126, 97, 229, .38), transparent 40%), linear-gradient(135deg, #276f9f, #4f3d91); opacity: .92; }
.profile-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, rgba(23, 33, 43, .85)); }
.profile-avatar-wrap { position: relative; z-index: 1; margin-top: 42px; }
.profile-avatar-wrap .avatar { width: 96px; height: 96px; border: 4px solid #20384b; box-shadow: 0 7px 18px rgba(0, 0, 0, .25); font-size: 30px; }
.profile-online-dot { position: absolute; right: 3px; bottom: 4px; width: 19px; height: 19px; border: 3px solid #20384b; border-radius: 50%; background: #55cf87; }
.profile-identity { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.profile-identity h1 { margin: 9px 0 2px; font-size: 22px; }
.profile-identity .profile-username { font-size: 13px; }
.profile-identity .profile-online { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 12px; }
.profile-online i { width: 6px; height: 6px; border-radius: 50%; background: #55cf87; }
.profile-actions { grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 13px 15px; }
.profile-actions button { min-height: 67px; border: 1px solid #2b4559; background: #1b2c3b; box-shadow: 0 5px 14px rgba(0, 0, 0, .08); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.profile-actions button:hover { border-color: #3c7398; background: #223b50; }
.profile-actions button:active { transform: scale(.96); }
.profile-action-icon { display: grid; place-items: center; width: 27px; height: 27px; color: #6ebcf0; font-size: 20px; }
.profile-action-icon svg { width: 22px; height: 22px; }
.contact-write svg, .contact-more svg { width: 19px; height: 19px; }
.contact-write { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--brand); }
.contact-more { display: inline-grid; place-items: center; }
.admin-menu-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--brand); }
.admin-menu-icon svg { width: 20px; height: 20px; }
.profile-actions small { color: #dce6ed; font-size: 11px; font-weight: 600; }
.profile-card.profile-details { margin: 0 13px; padding: 4px 15px; gap: 0; border: 1px solid #263d4f; background: #1b2936; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.profile-detail-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 13px 0; border-bottom: 1px solid rgba(83, 111, 132, .28); }
.profile-detail-row:last-child { border-bottom: 0; }
.profile-detail-row > div { min-width: 0; }
.profile-detail-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 31px; border-radius: 10px; background: #263f53; color: #74bff0; font-size: 15px; font-weight: 700; }
.profile-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.profile-details span { margin-top: 3px; font-size: 11px; }
.profile-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 17px 8px; }
.profile-section-head strong { font-size: 17px; }
.profile-section-head span { color: #7f92a1; font-size: 11px; }
.profile-tabs { margin: 0 13px 12px; padding: 3px; border: 1px solid #263d4f; background: #1b2936; }
.profile-tabs button { padding: 10px 7px; font-size: 12px; font-weight: 600; transition: color .18s ease, background .18s ease; }
.profile-tabs button.active { color: #e7f5ff; background: #2c5877; box-shadow: 0 3px 9px rgba(0, 0, 0, .12); }
.publication-list { gap: 10px; padding: 0 13px; }
.publication-card { border: 1px solid #263d4f; border-radius: 17px; background: #1b2936; box-shadow: 0 5px 15px rgba(0, 0, 0, .07); }
.publication-card > div:first-child { font-size: 14px; }
.publication-actions { gap: 7px; }
.publication-actions button { padding: 6px 9px; border-radius: 9px; background: #223b4e; transition: background .18s ease, transform .18s ease; }
.publication-actions button:hover { background: #2b5876; }
.publication-actions button:active { transform: scale(.96); }
.profile-empty { min-height: 230px; padding: 24px 14px; border: 1px dashed #365269; border-radius: 17px; background: rgba(27, 41, 54, .48); }
.profile-empty strong { font-size: 18px; }
.profile-upload-field { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; padding: 10px; border: 1px solid #2d4659; border-radius: 15px; background: #1a2b3a; cursor: pointer; }
.profile-upload-preview { width: 52px; height: 52px; overflow: hidden; flex: 0 0 52px; border-radius: 50%; }
.profile-upload-preview .avatar { width: 52px; height: 52px; font-size: 18px; }
.profile-upload-field > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-upload-field strong { font-size: 13px; }
.profile-upload-field small { color: #8498a8; font-size: 11px; }
.profile-upload-field input { max-width: 100%; color: #82bfea; font-size: 11px; }
html.light .profile-upload-field { border-color: #d6e5ed; background: #f5fbfe; }
html.light .profile-upload-field small { color: var(--text-muted); }

html.light .profile-page-kicker { color: var(--text); }
html.light .profile-head-actions .btn-icon { color: var(--text-muted); }
html.light .profile-hero { border-color: #d7e3eb; background: linear-gradient(155deg, #e8f5fd, #fff 68%); box-shadow: 0 12px 28px rgba(49, 91, 120, .1); }
html.light .profile-cover { opacity: .86; }
html.light .profile-avatar-wrap .avatar { border-color: #e7f4fb; }
html.light .profile-online-dot { border-color: #e7f4fb; }
html.light .profile-actions button { border-color: #dbe7ee; background: #fff; box-shadow: 0 5px 14px rgba(49, 91, 120, .08); }
html.light .profile-actions button:hover { border-color: #aad3ed; background: #f3faff; }
html.light .profile-actions small { color: var(--text); }
html.light .profile-card.profile-details, html.light .profile-tabs, html.light .publication-card { border-color: #dbe7ee; background: #fff; }
html.light .profile-detail-row { border-color: #e8eff4; }
html.light .profile-detail-icon { background: #e8f5fd; color: #2586c3; }
html.light .profile-section-head span { color: var(--text-muted); }
html.light .profile-tabs button.active { color: #167cc4; background: #e2f1fc; }
html.light .publication-actions button { background: #eef7fc; }
html.light .profile-empty { border-color: #c9dfea; background: #f8fcff; }
html.light .profile-empty strong { color: var(--text); }

@media (min-width: 768px) {
  #root { width: min(100%, 480px); }
  .master-pane { width: 100%; border-right: 0; }
  .detail-pane { position: absolute; inset: 0; transform: translateX(100%); z-index: 20; }
  .detail-pane.open { transform: translateX(0); }
}

/* Voice messages and Telegram-style round video notes */
.record-direct { width: 40px; height: 40px; flex: 0 0 40px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: #2b78c5; font-size: 18px; transition: transform .18s ease, background .18s ease; }
.record-direct:hover { transform: translateY(-1px); background: #3d91dc; }
.record-direct.recording { background: #e55666; animation: record-pulse 1.15s ease-in-out infinite; }
.submit-btn[hidden], .record-direct[hidden] { display: none; }
@keyframes record-pulse { 50% { box-shadow: 0 0 0 7px rgba(229,86,102,.17); } }
.voice-message { display: flex; align-items: center; gap: 8px; min-width: 210px; max-width: min(280px, 72vw); padding: 5px 8px; border-radius: 18px; background: rgba(11, 25, 38, .22); }
.voice-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #59a8e4; font-size: 15px; }
.msg-audio { width: 176px; height: 34px; }
.video-note { position: relative; width: min(214px, 62vw); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #132232; border: 3px solid rgba(86,174,241,.5); box-shadow: 0 3px 12px rgba(0,0,0,.24); }
.video-note video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-note-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(25, 121, 194, .9); color: #fff; font-size: 19px; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.video-note-play:hover { background: #2395e8; }
.msg-bubble.mine .video-note { border-color: rgba(255,255,255,.55); }

/* Final visual system: calmer surfaces, clearer touch targets, and consistent
   depth across every mobile screen. */
:root {
  --app-radius: 18px;
  --app-ease: cubic-bezier(.2, .8, .2, 1);
  --app-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  --app-shadow-soft: 0 5px 18px rgba(0, 0, 0, .08);
}

button, input, textarea, select { -webkit-appearance: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(84, 177, 241, .3);
  outline-offset: 2px;
}
::selection { color: #fff; background: #338fd5; }
* { scrollbar-width: thin; scrollbar-color: #38546a transparent; }

.auth-wrapper {
  position: relative;
  isolation: isolate;
  overflow: auto;
  min-height: 100%;
  padding: 20px 0;
  background:
    radial-gradient(circle at 8% 8%, rgba(43, 139, 213, .26), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(117, 82, 204, .23), transparent 30%),
    #0e1621;
}
.auth-wrapper::before, .auth-wrapper::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(120, 187, 226, .1);
  border-radius: 50%;
  pointer-events: none;
}
.auth-wrapper::before { top: 8%; right: -105px; box-shadow: 0 0 0 30px rgba(91, 168, 219, .025), 0 0 0 60px rgba(91, 168, 219, .02); }
.auth-wrapper::after { bottom: -115px; left: -100px; box-shadow: 0 0 0 30px rgba(132, 101, 213, .025), 0 0 0 60px rgba(132, 101, 213, .02); }
.auth-card {
  position: relative;
  overflow: hidden;
  width: min(420px, calc(100% - 32px));
  margin: auto;
  padding: 31px 24px 25px;
  border: 1px solid rgba(139, 186, 218, .18);
  border-radius: 26px;
  background: rgba(23, 33, 43, .93);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
  backdrop-filter: blur(18px);
  animation: auth-card-in .48s var(--app-ease) both;
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #3390ec, #7562d8, #49bdcf);
}
.auth-logo {
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border: 4px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: linear-gradient(145deg, #3390ec, #6352c7 80%);
  box-shadow: 0 9px 22px rgba(51, 144, 236, .26);
  letter-spacing: -.5px;
}
.auth-card h1 { letter-spacing: -.5px; }
.auth-subtitle { max-width: 280px; margin-left: auto; margin-right: auto; }
.auth-card .input-group { margin-top: 17px; }
.auth-card label { letter-spacing: .1px; }
.auth-card input {
  min-height: 51px;
  border-color: rgba(110, 145, 169, .28);
  border-radius: 15px;
  background: rgba(35, 51, 66, .86);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.auth-card input:hover { background: #25394a; }
.auth-card input:focus { background: #263e52; transform: translateY(-1px); }
.auth-card .btn-primary {
  min-height: 51px;
  margin-top: 14px;
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(42, 145, 226, .23);
  transition: transform .18s var(--app-ease), box-shadow .18s ease, filter .18s ease;
}
.auth-card .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 11px 24px rgba(42, 145, 226, .29); }
.auth-card .btn-primary:active { transform: scale(.98); }
.auth-card .btn-link { margin-top: 17px; color: #69baf0; font-weight: 600; }
.auth-remember { display: flex; align-items: center; gap: 8px; }
.auth-remember input { accent-color: #3390ec; }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.bottom-nav {
  position: relative;
  z-index: 30;
  border-top-color: rgba(109, 148, 175, .18);
  background: rgba(25, 38, 50, .88);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .12);
  backdrop-filter: blur(18px);
}
.nav-item { position: relative; min-height: 52px; transition: color .2s ease, background .2s ease, transform .2s var(--app-ease); }
.nav-item:active { transform: scale(.94); }
.nav-item.active { background: rgba(57, 115, 157, .3); }
.nav-item.active::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: #76c8f7; }

.chat-topbar, .master-header, .mobile-page-head { border-bottom-color: rgba(109, 148, 175, .14); }
.chat-topbar { background: linear-gradient(180deg, #182631, #17212b); }
.chat-brand strong { letter-spacing: -.5px; }
.chat-brand .avatar { box-shadow: 0 5px 14px rgba(51, 144, 236, .17); }
.search-bar { border: 1px solid transparent; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.search-bar:focus-within { border-color: rgba(76, 166, 221, .5); background: #293d4e; box-shadow: 0 0 0 3px rgba(66, 159, 218, .1); }
.filter-btn { border: 1px solid transparent; transition: transform .18s var(--app-ease), background .18s ease, color .18s ease; }
.filter-btn:active { transform: scale(.95); }
.filter-btn.active { border-color: rgba(114, 194, 237, .2); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); }
.chat-list { padding-top: 7px; }
.chat-item { border-bottom-color: rgba(92, 126, 149, .15); transition: background .2s ease, transform .2s var(--app-ease); }
.chat-item:hover { transform: translateX(2px); }
.chat-item .avatar { box-shadow: 0 4px 12px rgba(0, 0, 0, .14); }
.chat-title { letter-spacing: -.1px; }
.badge { background: #3498df; box-shadow: 0 3px 9px rgba(52, 152, 223, .22); }
.floating-new-chat { right: 16px; bottom: 18px; width: 58px; height: 58px; background: linear-gradient(145deg, #35a5ee, #227bcc); box-shadow: 0 9px 23px rgba(21, 125, 202, .34); }
.floating-new-chat:hover { box-shadow: 0 13px 28px rgba(21, 125, 202, .42); }

.contacts-actions, .settings-section, .profile-card.profile-details { box-shadow: var(--app-shadow-soft); }
.contacts-actions .btn-action { min-height: 65px; transition: background .2s ease, padding-left .2s var(--app-ease); }
.contacts-actions .btn-action:hover { padding-left: 19px; background: #1d3344; }
.quick-action-icon { box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.settings-profile-large { border: 1px solid rgba(112, 155, 181, .16); box-shadow: var(--app-shadow-soft); transition: transform .2s var(--app-ease), background .2s ease; }
.settings-profile-large:hover { transform: translateY(-1px); background: #203341; }
.settings-section { border: 1px solid rgba(112, 155, 181, .12); }
.settings-row { min-height: 70px; transition: background .2s ease, padding-left .2s var(--app-ease); }
.settings-row:hover { padding-left: 19px; background: #203341; }
.settings-icon { box-shadow: 0 4px 10px rgba(0, 0, 0, .13); }
.settings-row i { transition: transform .2s var(--app-ease); }
.settings-row:hover i { transform: translateX(3px); }

.conv-header { box-shadow: 0 4px 15px rgba(0, 0, 0, .1); }
.conv-composer { box-shadow: 0 -5px 16px rgba(0, 0, 0, .09); }
.conv-composer input,
.conv-composer textarea { border: 1px solid transparent; transition: border-color .2s ease, background .2s ease; }
.conv-composer input:focus,
.conv-composer textarea:focus { border-color: rgba(76, 166, 221, .5); background: #293d4e; outline: none; }
.submit-btn { border-radius: 50%; transition: background .2s ease, transform .18s var(--app-ease); }
.submit-btn:hover { background: rgba(84, 177, 241, .12); }
.submit-btn:active { transform: scale(.88); }
.msg-bubble { box-shadow: 0 3px 8px rgba(0, 0, 0, .1); }

.modal-overlay { backdrop-filter: blur(4px); }
.modal-card { border: 1px solid rgba(119, 163, 190, .18); box-shadow: 0 25px 70px rgba(0, 0, 0, .3); }
.modal-actions .btn-confirm, .modal-actions .btn-action { border-radius: 13px; transition: transform .18s var(--app-ease), filter .18s ease; }
.modal-actions .btn-confirm:hover, .modal-actions .btn-action:hover { filter: brightness(1.08); }
.modal-actions .btn-confirm:active, .modal-actions .btn-action:active { transform: scale(.98); }
.action-sheet-modal .modal-card { box-shadow: 0 -16px 60px rgba(0, 0, 0, .3); }
.quick-create-item { border: 1px solid transparent; transition: background .2s ease, border-color .2s ease, transform .2s var(--app-ease); }
.quick-create-item:hover { border-color: rgba(104, 177, 221, .25); background: #223a4d; transform: translateX(2px); }

html.light .auth-wrapper { background: radial-gradient(circle at 8% 8%, #d8efff, transparent 35%), radial-gradient(circle at 94% 20%, #e9e1ff, transparent 31%), #f2f5f8; }
html.light .auth-card { border-color: #dce8ef; background: rgba(255, 255, 255, .9); box-shadow: 0 24px 70px rgba(44, 84, 111, .13); }
html.light .auth-card input { border-color: #dbe7ee; background: #f0f6fa; }
html.light .auth-card input:hover, html.light .auth-card input:focus { background: #f8fcff; }
html.light .bottom-nav { background: rgba(255, 255, 255, .88); box-shadow: 0 -10px 28px rgba(38, 83, 111, .08); }
html.light .nav-item.active { background: #e4f2fc; }
html.light .chat-topbar { background: linear-gradient(180deg, #fff, #fbfdff); }
html.light .search-bar:focus-within { background: #f8fcff; }
html.light .contacts-actions .btn-action:hover, html.light .settings-row:hover { background: #f2f8fc; }
html.light .settings-profile-large:hover { background: #f7fbfd; }

@media (max-width: 380px) {
  .auth-card { width: calc(100% - 24px); padding-left: 19px; padding-right: 19px; }
  .profile-section-head span { display: none; }
  .settings-row strong { font-size: 15px; }
}

/* Ovinta visual direction: warm surfaces, ink-blue depth and a vivid indigo signal. */
:root {
  --bg-color: #eef3fb;
  --surface: #fffdfb;
  --surface-hover: #f1f4ff;
  --text: #172238;
  --text-muted: #718096;
  --brand: #5146d9;
  --brand-hover: #4338b9;
  --border: #e1e6f1;
  --bubble-in: #fffdfb;
  --bubble-out: #e7f1ff;
  --bubble-text: #172238;
  --app-shadow-soft: 0 16px 36px rgba(39, 57, 103, .10);
}

.dark {
  --bg-color: #101827;
  --surface: #172237;
  --surface-hover: #202d46;
  --text: #f2f5ff;
  --text-muted: #9baac4;
  --brand: #8b7cf6;
  --brand-hover: #a096ff;
  --border: #2a3853;
  --bubble-in: #172237;
  --bubble-out: #263e64;
  --bubble-text: #f2f5ff;
  --app-shadow-soft: 0 18px 42px rgba(0, 0, 0, .24);
}

html.light {
  --bg-color: #eef3fb;
  --surface: #fffdfb;
  --surface-hover: #f1f4ff;
  --text: #172238;
  --text-muted: #718096;
  --brand: #5146d9;
  --brand-hover: #4338b9;
  --border: #e1e6f1;
  --bubble-in: #fffdfb;
  --bubble-out: #e7f1ff;
  --bubble-text: #172238;
}

body { background: var(--bg-color); }
#root { box-shadow: 0 0 60px rgba(43, 61, 108, .12); }
.chat-topbar, .mobile-page-head {
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 78%, var(--brand) 22%));
}
.chat-topbar { border-bottom-color: color-mix(in srgb, var(--brand) 18%, var(--border)); }
.chat-brand strong { letter-spacing: -.02em; }
.search-bar { border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border)); }
.search-bar:focus-within { border-color: color-mix(in srgb, var(--brand) 52%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 11%, transparent); }
.chat-item.active { background: linear-gradient(115deg, var(--brand), color-mix(in srgb, var(--brand) 72%, #1cc8b2)); box-shadow: inset 4px 0 0 rgba(255,255,255,.48); }
.floating-new-chat { background: linear-gradient(145deg, #6257ed, #26b9aa); box-shadow: 0 14px 28px rgba(61, 87, 202, .28); }
.floating-new-chat:hover { box-shadow: 0 18px 34px rgba(61, 87, 202, .36); }
.bottom-nav { background: color-mix(in srgb, var(--surface) 93%, var(--brand) 7%); border-top-color: color-mix(in srgb, var(--brand) 20%, var(--border)); }
.nav-item.active { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.settings-profile-large { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #11233d), color-mix(in srgb, var(--brand) 56%, #1dc4ae)); border: 0; box-shadow: 0 18px 34px color-mix(in srgb, var(--brand) 22%, transparent); }
.settings-section, .profile-card.profile-details { border-color: color-mix(in srgb, var(--brand) 13%, var(--border)); }
.settings-row:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.settings-icon.security { background: linear-gradient(135deg, #5146d9, #2bb9a7); color: #fff; }
.profile-hero { position: relative; overflow: hidden; border-radius: 0 0 28px 28px; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 90%, #12213b), color-mix(in srgb, var(--brand) 46%, #20b8a7)); color: #fff; }
.profile-hero .profile-username, .profile-hero .profile-online { color: rgba(255,255,255,.78); }
.profile-hero .profile-avatar-wrap { filter: drop-shadow(0 10px 18px rgba(17, 33, 65, .28)); }
.profile-actions button { border-color: color-mix(in srgb, var(--brand) 14%, var(--border)); background: var(--surface); box-shadow: 0 8px 18px rgba(39, 57, 103, .08); }
.profile-actions button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); color: var(--brand); }
.profile-tabs { background: color-mix(in srgb, var(--surface) 85%, var(--brand) 15%); border-radius: 14px; padding: 4px; }
.profile-tabs button.active { background: var(--surface); color: var(--brand); box-shadow: 0 5px 14px rgba(39, 57, 103, .10); }
.profile-media-tile { border: 0; padding: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.profile-media-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(39, 57, 103, .16); }
.publication-viewer { text-align: center; }
.publication-viewer-media { display: block; max-width: 100%; max-height: min(62dvh, 560px); margin: 0 auto; border-radius: 16px; object-fit: contain; background: #111827; }
.publication-viewer p { margin: 14px 0 4px; text-align: left; white-space: pre-wrap; }
.publication-viewer small { color: var(--text-muted); }
.media-viewer-modal .modal-card { width: min(680px, calc(100% - 24px)); }
.community-summary { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 13%, var(--surface)), color-mix(in srgb, #25b8a6 10%, var(--surface))); }
.member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.member-actions button { border-radius: 9px; padding: 6px 8px; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--brand); }
.member-actions button:hover { background: color-mix(in srgb, var(--brand) 17%, var(--surface)); }
.danger-action { color: #c0395b; }
.auth-wrapper { background: radial-gradient(circle at 8% 9%, rgba(81,70,217,.24), transparent 32%), radial-gradient(circle at 92% 88%, rgba(32,184,167,.19), transparent 35%), var(--bg-color); }
.auth-card { color: #f3f7ff; }
.auth-card h1 { color: #f3f7ff; }
.auth-card label, .auth-card .auth-subtitle, .auth-card .input-hint, .auth-card .check-row { color: #b9c8df; }
.auth-card input { color: #f3f7ff; }
.auth-card input::placeholder { color: #8293ad; }
.auth-remember input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  appearance: none;
  border: 1px solid #58708d;
  border-radius: 6px;
  background: #1d3043;
  position: relative;
}
.auth-remember input:checked { background: linear-gradient(135deg, #5146d9, #26b9aa); border-color: transparent; }
.auth-remember input:checked::after { content: '✓'; position: absolute; inset: -1px 0 0; color: #fff; font-size: 13px; line-height: 18px; text-align: center; font-weight: 700; }
.auth-logo { background: linear-gradient(135deg, #5146d9, #26b9aa); color: #fff; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth-card .btn-primary { background: linear-gradient(110deg, #5146d9, #26b9aa); box-shadow: 0 13px 26px rgba(81, 70, 217, .25); }
.toast { border-color: color-mix(in srgb, var(--brand) 24%, var(--border)); }

@media (max-width: 767px) {
  .profile-hero { margin: 0 -16px; border-radius: 0 0 26px 26px; padding-top: 26px; }
  .bottom-nav { backdrop-filter: blur(18px); }
  .member-actions { max-width: 145px; }
}

/* Theme alignment: every mobile surface follows the same token set.
   Earlier screen-specific styles intentionally remain above this block for
   component sizing, while this block owns their final colors. */
body, #root, .master-pane, .detail-pane {
  background: var(--bg-color);
  color: var(--text);
}
.mobile-page-head,
.master-header,
.chat-topbar,
.chat-search-header,
.contacts-search,
.bottom-nav {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.mobile-page-head .btn-icon,
.chat-top-actions .btn-icon { color: var(--text); }
.search-bar {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}
.search-bar input { color: var(--text); }
.search-bar input::placeholder { color: var(--text-muted); }

.chat-filters,
.stories-list {
  background: var(--surface);
  border-color: var(--border);
}
.filter-btn {
  color: var(--text-muted);
  background: var(--surface-hover);
}
.filter-btn.active {
  color: #fff;
  background: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
}
.chat-item {
  background: var(--surface);
  color: var(--text);
  border-bottom-color: var(--border);
}
.chat-item:hover { background: var(--surface-hover); }
.chat-item.active {
  background: linear-gradient(115deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #1cb8a9));
  color: #fff;
}
.chat-item.active .chat-preview,
.chat-item.active .chat-time,
.chat-item.active svg { color: rgba(255,255,255,.82); }

.contacts-actions,
.settings-section,
.profile-card.profile-details,
.publication-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.contacts-actions .btn-action {
  color: var(--text);
  border-bottom-color: var(--border);
}
.settings-row {
  color: var(--text);
  background: var(--surface);
  border-bottom-color: var(--border);
}
.settings-row small,
.settings-row i,
.settings-profile-large .profile-user,
.settings-chevron { color: var(--text-muted); }
.settings-row:hover { background: var(--surface-hover); }

.profile-actions button {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.profile-actions button:hover {
  background: var(--surface-hover);
  color: var(--brand);
}
.profile-action-icon { color: var(--brand); }
.profile-actions small { color: var(--text-muted); }
.profile-details {
  color: var(--text);
  border-color: var(--border);
}
.profile-detail-row { border-bottom-color: var(--border); }
.profile-detail-icon {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-hover));
  color: var(--brand);
}
.profile-section-head span,
.profile-tabs button { color: var(--text-muted); }
.profile-tabs {
  background: var(--surface-hover);
  border-color: var(--border);
}
.profile-tabs button.active {
  color: var(--brand);
  background: var(--surface);
}

.master-body > .empty-list,
.chat-list > .empty-list,
.contacts-actions + .empty-list {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--surface-hover);
}
.empty-list { color: var(--text-muted); }

html.light .chat-filters,
html.light .stories-list,
html.light .contacts-actions,
html.light .settings-section,
html.light .profile-card.profile-details,
html.light .publication-card,
html.light .search-bar,
html.light .chat-item,
html.light .settings-row,
html.light .profile-actions button,
html.light .profile-tabs {
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
  .chat-item:hover, .settings-row:hover, .contacts-actions .btn-action:hover { transform: none; padding-left: 15px; }
}

/* Screen-by-screen finish: conversation controls, content states, sheets,
   and the less frequently visited settings/admin surfaces use the same
   spacing and depth as the main chat list. */
.master-body, .conv-body, .settings-scroll { overscroll-behavior: contain; }
.master-body > .empty-list, .chat-list > .empty-list, .contacts-actions + .empty-list {
  margin: 20px 13px;
  padding: 34px 20px;
  border: 1px dashed rgba(108, 155, 184, .25);
  border-radius: 18px;
  background: rgba(28, 46, 60, .42);
  line-height: 1.45;
}
.stories-list:empty { display: none; }
.story-item { transition: transform .2s var(--app-ease); }
.story-item:hover { transform: translateY(-2px); }
.story-avatar { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.story-item.add .story-avatar { box-shadow: none; }

.conv-body {
  scroll-padding-bottom: 18px;
  gap: 7px;
}
.msg-bubble {
  border: 1px solid rgba(115, 151, 174, .1);
  transition: transform .16s var(--app-ease), box-shadow .16s ease;
}
.msg-bubble:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(0, 0, 0, .14); }
.msg-bubble.mine { border-color: rgba(128, 206, 246, .12); }
.msg-meta { font-variant-numeric: tabular-nums; }
.msg-quote { margin: 2px 0 5px; padding: 6px 8px; }
.msg-file {
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(60, 138, 193, .12);
  text-decoration: none;
  transition: background .18s ease;
}
.msg-file:hover { background: rgba(60, 138, 193, .22); }
.reaction-list { margin-top: 7px; }
.reaction-chip { transition: transform .16s var(--app-ease), background .18s ease; }
.reaction-chip:hover { transform: translateY(-1px); background: #294a61; }
.poll-card { padding: 2px 0; }
.poll-option { border: 1px solid transparent; transition: border-color .18s ease, background .18s ease; }
.poll-option:hover { border-color: rgba(89, 175, 222, .28); background: rgba(71, 145, 188, .16); }
.poll-vote-submit, .poll-close { min-height: 30px; padding: 4px 9px; border-radius: 8px; background: rgba(63, 146, 200, .14); }
.poll-vote-submit:hover { background: rgba(63, 146, 200, .25); }
.video-note { box-shadow: 0 7px 19px rgba(0, 0, 0, .2); }
.msg-image, .msg-video { box-shadow: 0 5px 15px rgba(0, 0, 0, .12); }
.reply-bar { box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }
.composer-actions { border-radius: 16px; box-shadow: 0 14px 30px rgba(0, 0, 0, .24); }
.composer-action { min-height: 43px; transition: background .18s ease, transform .18s var(--app-ease); }
.composer-action:hover { transform: translateX(2px); }
.modal-card {
  width: min(420px, calc(100% - 28px));
  max-height: min(84dvh, 720px);
  overflow: auto;
}
.modal-body { line-height: 1.4; }
.modal-body > label:not(.check-row):not(.profile-upload-field) {
  display: block;
  margin: 12px 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.modal-body > label:first-child:not(.check-row):not(.profile-upload-field) { margin-top: 0; }
.modal-body > .modal-input + .modal-input { margin-top: 10px; }
.modal-input {
  min-height: 45px;
  border-color: rgba(111, 149, 174, .24);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.modal-input:focus { box-shadow: 0 0 0 3px rgba(62, 158, 215, .13); }
textarea.modal-input { min-height: 90px; padding: 11px 12px; resize: vertical; }
.check-row { cursor: pointer; color: var(--text-muted); font-size: 13px; line-height: 1.35; }
.check-row input { width: 17px; height: 17px; accent-color: var(--brand); }
.modal-actions { align-items: center; }
.btn-cancel, .btn-confirm { min-height: 40px; }
.btn-cancel { border-radius: 11px; transition: background .18s ease; }
.btn-cancel:hover { background: var(--surface-hover); }
.action-sheet-modal .modal-card { padding-top: 17px; }
.action-sheet-modal .modal-title { padding-right: 30px; }
.action-sheet-modal .modal-actions { position: sticky; bottom: -20px; margin: 18px -16px -20px; padding: 12px 16px calc(4px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--surface) 32%); }
.action-sheet-modal .btn-confirm { min-height: 44px; }

.toast {
  top: auto;
  bottom: calc(var(--nav-height) + 18px + env(safe-area-inset-bottom));
  max-width: min(90vw, 360px);
  padding: 11px 16px;
  border: 1px solid rgba(141, 184, 211, .17);
  background: rgba(27, 42, 55, .94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
}
.toast.show { transform: translate(-50%, 0); }

.admin-menu .menu-item, .admin-action-list, .admin-stat-card { border-radius: 16px; }
.admin-stat-card { box-shadow: var(--app-shadow-soft); }
.admin-action-list, .admin-table-wrap { box-shadow: var(--app-shadow-soft); }
.admin-table-wrap { border: 1px solid var(--border); border-radius: 16px; overflow: auto; }
.admin-table { border: 0; }
.admin-table th:first-child { border-top-left-radius: 15px; }
.admin-table th:last-child { border-top-right-radius: 15px; }

html.light .master-body > .empty-list, html.light .chat-list > .empty-list, html.light .contacts-actions + .empty-list {
  border-color: #cbdfe9;
  background: #f7fbfd;
}
html.light .msg-bubble { border-color: #e1ebf1; box-shadow: 0 3px 9px rgba(49, 91, 120, .08); }
html.light .msg-file { background: #eef7fc; }
html.light .msg-file:hover { background: #e1f1fa; }
html.light .reaction-chip, html.light .poll-option { border-color: #dce8ee; }
html.light .reaction-chip:hover, html.light .poll-option:hover { background: #edf7fc; }
html.light .composer-actions { box-shadow: 0 14px 30px rgba(42, 89, 119, .16); }
html.light .modal-input { border-color: #d6e5ed; }
html.light .modal-actions { background: linear-gradient(transparent, #fff 32%); }
html.light .toast { border-color: #d4e4ec; background: rgba(255, 255, 255, .95); color: var(--text); box-shadow: 0 10px 26px rgba(43, 89, 118, .15); }

/* Runtime theme contract. Keep this block last so legacy mobile defaults
   cannot make controls disappear after a live theme switch. */
html[data-theme="dark"] {
  --bg-color: #101827;
  --surface: #172237;
  --surface-hover: #202d46;
  --text: #f2f5ff;
  --text-muted: #9baac4;
  --brand: #8b7cf6;
  --brand-hover: #a096ff;
  --border: #2a3853;
  --bubble-in: #172237;
  --bubble-out: #263e64;
  --bubble-text: #f2f5ff;
}
html[data-theme="light"] {
  --bg-color: #eef3fb;
  --surface: #fffdfb;
  --surface-hover: #f1f4ff;
  --text: #172238;
  --text-muted: #718096;
  --brand: #5146d9;
  --brand-hover: #4338b9;
  --border: #e1e6f1;
  --bubble-in: #fffdfb;
  --bubble-out: #e7f1ff;
  --bubble-text: #172238;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #root,
html[data-theme="dark"] .master-pane,
html[data-theme="dark"] .detail-pane,
html[data-theme="light"] body,
html[data-theme="light"] #root,
html[data-theme="light"] .master-pane,
html[data-theme="light"] .detail-pane {
  background: var(--bg-color);
  color: var(--text);
}
html[data-theme] .mobile-page-head,
html[data-theme] .master-header,
html[data-theme] .conv-header,
html[data-theme] .chat-topbar,
html[data-theme] .chat-search-header,
html[data-theme] .contacts-search,
html[data-theme] .chat-filters,
html[data-theme] .stories-list,
html[data-theme] .bottom-nav,
html[data-theme] .conv-composer,
html[data-theme] .message-search-row,
html[data-theme] .reply-bar {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme] .chat-topbar {
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 78%, var(--brand) 22%));
}
html[data-theme] .btn-icon,
html[data-theme] .mobile-page-head .btn-icon,
html[data-theme] .profile-head-actions .btn-icon,
html[data-theme] .chat-top-actions .btn-icon {
  color: var(--text);
}
html[data-theme] .btn-icon:hover {
  background: var(--surface-hover);
  color: var(--brand);
}
html[data-theme] .search-bar,
html[data-theme] .filter-btn,
html[data-theme] .composer-actions {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme] .search-bar input,
html[data-theme] .message-search-row input,
html[data-theme] .conv-composer input,
html[data-theme] .conv-composer textarea {
  color: var(--text);
  background: transparent;
}
html[data-theme] .search-bar input::placeholder,
html[data-theme] .message-search-row input::placeholder {
  color: var(--text-muted);
}
html[data-theme] .filter-btn.active {
  color: #fff;
  background: var(--brand);
}
html[data-theme] .nav-item {
  color: var(--text-muted);
}
html[data-theme] .nav-item.active {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
html[data-theme] .contacts-actions,
html[data-theme] .settings-section,
html[data-theme] .profile-card.profile-details,
html[data-theme] .publication-card,
html[data-theme] .profile-actions button,
html[data-theme] .profile-tabs,
html[data-theme] .settings-row {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme] .contacts-actions .btn-action,
html[data-theme] .settings-row,
html[data-theme] .settings-row strong,
html[data-theme] .profile-actions button {
  color: var(--text);
}
html[data-theme] .contacts-actions .btn-action {
  border-bottom-color: var(--border);
}
html[data-theme] .settings-row small,
html[data-theme] .settings-row i,
html[data-theme] .settings-chevron,
html[data-theme] .contact-more,
html[data-theme] .profile-actions small,
html[data-theme] .profile-section-head span,
html[data-theme] .profile-tabs button {
  color: var(--text-muted);
}
html[data-theme] .settings-row:hover,
html[data-theme] .contacts-actions .btn-action:hover,
html[data-theme] .profile-actions button:hover {
  background: var(--surface-hover);
}
html[data-theme] .settings-profile-large {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 86%, var(--surface)), color-mix(in srgb, var(--brand) 50%, #25b8a6));
  color: #fff;
}
html[data-theme] .settings-profile-large .profile-user,
html[data-theme] .settings-profile-large .settings-chevron {
  color: rgba(255, 255, 255, .78);
}
html[data-theme] .profile-action-icon,
html[data-theme] .profile-detail-icon {
  color: var(--brand);
}
html[data-theme] .profile-detail-icon {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-hover));
}
html[data-theme] .profile-tabs button.active {
  color: var(--brand);
  background: var(--surface);
}
html[data-theme] .master-body > .empty-list,
html[data-theme] .chat-list > .empty-list,
html[data-theme] .contacts-actions + .empty-list {
  color: var(--text-muted);
  background: var(--surface-hover);
  border-color: var(--border);
}
html[data-theme] .ui-state {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 18px 13px;
  padding: 28px 22px;
  border: 1px dashed color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-hover) 76%, transparent);
  color: var(--text-muted);
  text-align: center;
}
html[data-theme] .ui-state-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 3px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand);
}
html[data-theme] .ui-state-icon svg {
  width: 23px;
  height: 23px;
}
html[data-theme] .ui-state-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
html[data-theme] .ui-state-message {
  max-width: 270px;
  font-size: 13px;
  line-height: 1.4;
}
html[data-theme] .ui-state.error {
  border-color: color-mix(in srgb, #e56b78 42%, var(--border));
}
html[data-theme] .ui-state.error .ui-state-icon {
  background: color-mix(in srgb, #e56b78 14%, var(--surface));
  color: #e56b78;
}
html[data-theme] .state-spinner {
  width: 23px;
  height: 23px;
  border: 2px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: modal-spinner .7s linear infinite;
}
html[data-theme] .state-action {
  min-height: 38px;
  margin-top: 7px;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: 11px;
  background: var(--surface);
  color: var(--brand);
  font-size: 13px;
  font-weight: 650;
  transition: background .18s ease, transform .18s ease;
}
html[data-theme] .state-action:hover {
  background: var(--surface-hover);
}
html[data-theme] .state-action:active {
  transform: scale(.97);
}
html[data-theme] .ui-state.loading .ui-state-title {
  color: var(--brand);
}

/* Ten selectable visual presets. */
html[data-theme="ocean"] {
  --bg-color: #edf7fc; --surface: #ffffff; --surface-hover: #eaf4fa;
  --text: #183247; --text-muted: #6b8292; --brand: #1689df; --brand-hover: #0f72bf;
  --border: #d8e7ef; --bubble-in: #ffffff; --bubble-out: #dff2ff; --bubble-text: #183247;
  --app-accent-2: #23b8aa; --app-hero-a: #167fd6; --app-hero-b: #23b8aa;
}
html[data-theme="lavender"] {
  --bg-color: #f5f1ff; --surface: #fffefe; --surface-hover: #f0ebff;
  --text: #30264b; --text-muted: #7d7198; --brand: #8066df; --brand-hover: #684dcc;
  --border: #e5dcf6; --bubble-in: #fffefe; --bubble-out: #eee7ff; --bubble-text: #30264b;
  --app-accent-2: #c16be7; --app-hero-a: #7258d8; --app-hero-b: #c16be7;
}
html[data-theme="mint"] {
  --bg-color: #edf9f4; --surface: #ffffff; --surface-hover: #e6f5ef;
  --text: #183b35; --text-muted: #6b8b82; --brand: #16a889; --brand-hover: #0b8c71;
  --border: #d5ebe2; --bubble-in: #ffffff; --bubble-out: #daf5ea; --bubble-text: #183b35;
  --app-accent-2: #70c96f; --app-hero-a: #109b83; --app-hero-b: #72c86e;
}
html[data-theme="sunset"] {
  --bg-color: #fff4ec; --surface: #fffdfb; --surface-hover: #fff0e5;
  --text: #4a2b2a; --text-muted: #9a756d; --brand: #ec765d; --brand-hover: #d95d47;
  --border: #f3ddd1; --bubble-in: #fffdfb; --bubble-out: #ffe5d8; --bubble-text: #4a2b2a;
  --app-accent-2: #f0b24c; --app-hero-a: #e76856; --app-hero-b: #f0b24c;
}
html[data-theme="graphite"] {
  --bg-color: #101827; --surface: #172237; --surface-hover: #202d46;
  --text: #f2f5ff; --text-muted: #9baac4; --brand: #8b7cf6; --brand-hover: #a096ff;
  --border: #2a3853; --bubble-in: #172237; --bubble-out: #263e64; --bubble-text: #f2f5ff;
  --app-accent-2: #35b9af; --app-hero-a: #5146d9; --app-hero-b: #2bb9a7;
}
html[data-theme="coral"] {
  --bg-color: #fff0f1; --surface: #fffdfd; --surface-hover: #ffeaed;
  --text: #4b2630; --text-muted: #9e727e; --brand: #e94f72; --brand-hover: #cf385c;
  --border: #f3d7df; --bubble-in: #fffdfd; --bubble-out: #ffe0e7; --bubble-text: #4b2630;
  --app-accent-2: #f28b64; --app-hero-a: #db3f68; --app-hero-b: #f28b64;
}
html[data-theme="forest"] {
  --bg-color: #eaf4ee; --surface: #fcfffd; --surface-hover: #e0eee6;
  --text: #18362c; --text-muted: #688275; --brand: #287f5a; --brand-hover: #1b6747;
  --border: #cfe2d6; --bubble-in: #fcfffd; --bubble-out: #d6efdf; --bubble-text: #18362c;
  --app-accent-2: #8aa64b; --app-hero-a: #226d4e; --app-hero-b: #88a84e;
}
html[data-theme="royal"] {
  --bg-color: #f0efff; --surface: #fffefe; --surface-hover: #e9e7ff;
  --text: #26234b; --text-muted: #777396; --brand: #5146d9; --brand-hover: #3e35b9;
  --border: #dcd9f4; --bubble-in: #fffefe; --bubble-out: #e3e1ff; --bubble-text: #26234b;
  --app-accent-2: #d4a84f; --app-hero-a: #4036b9; --app-hero-b: #d4a84f;
}
html[data-theme="sand"] {
  --bg-color: #faf4e8; --surface: #fffdf8; --surface-hover: #f5ecd9;
  --text: #443727; --text-muted: #927d61; --brand: #b97a3c; --brand-hover: #9e6129;
  --border: #eadcc3; --bubble-in: #fffdf8; --bubble-out: #f6e5c6; --bubble-text: #443727;
  --app-accent-2: #7fa06a; --app-hero-a: #ae6d37; --app-hero-b: #7fa06a;
}
html[data-theme="berry"] {
  --bg-color: #f9eef7; --surface: #fffdfd; --surface-hover: #f4e3f0;
  --text: #43263f; --text-muted: #92708b; --brand: #a64794; --brand-hover: #89357a;
  --border: #ead6e6; --bubble-in: #fffdfd; --bubble-out: #f2dced; --bubble-text: #43263f;
  --app-accent-2: #e27a86; --app-hero-a: #913d86; --app-hero-b: #e27a86;
}
html[data-theme] .settings-profile-large,
html[data-theme] .profile-hero {
  background: linear-gradient(135deg, var(--app-hero-a), var(--app-hero-b));
}
html[data-theme] .floating-new-chat {
  background: linear-gradient(145deg, var(--brand), var(--app-accent-2));
}
html[data-theme] .chat-item.active {
  background: linear-gradient(115deg, var(--brand), var(--app-accent-2));
}

/* Settings theme picker and its self-contained preview. */
.theme-picker-hint { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-choice {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 8px;
  width: 100%; padding: 7px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.theme-choice:hover { transform: translateY(-1px); background: var(--surface-hover); }
.theme-choice.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 16%, transparent); }
.theme-choice-check { color: transparent; font-size: 14px; font-weight: 800; }
.theme-choice.selected .theme-choice-check { color: var(--brand); }
.theme-choice-copy { min-width: 0; }
.theme-choice-copy strong, .theme-choice-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-choice-copy strong { font-size: 12px; }
.theme-choice-copy small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.theme-choice-swatch { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 38px; height: 38px; overflow: hidden; border-radius: 11px; background: var(--swatch-a); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.theme-choice-swatch b { grid-row: 1 / 3; display: grid; place-items: center; background: var(--swatch-a); font-size: 17px; }
.theme-choice-swatch i { background: var(--swatch-b); }.theme-choice-swatch i::after { content: ''; display: block; width: 100%; height: 100%; background: var(--swatch-c); opacity: .55; }
.theme-ocean { --swatch-a: #1689df; --swatch-b: #23b8aa; --swatch-c: #eaf4fa; }
.theme-lavender { --swatch-a: #8066df; --swatch-b: #c16be7; --swatch-c: #f0ebff; }
.theme-mint { --swatch-a: #16a889; --swatch-b: #70c96f; --swatch-c: #e6f5ef; }
.theme-sunset { --swatch-a: #ec765d; --swatch-b: #f0b24c; --swatch-c: #fff0e5; }
.theme-graphite { --swatch-a: #5146d9; --swatch-b: #35b9af; --swatch-c: #202d46; }
.theme-coral { --swatch-a: #e94f72; --swatch-b: #f28b64; --swatch-c: #ffeaed; }
.theme-forest { --swatch-a: #287f5a; --swatch-b: #8aa64b; --swatch-c: #e0eee6; }
.theme-royal { --swatch-a: #5146d9; --swatch-b: #d4a84f; --swatch-c: #e9e7ff; }
.theme-sand { --swatch-a: #b97a3c; --swatch-b: #7fa06a; --swatch-c: #f5ecd9; }
.theme-berry { --swatch-a: #a64794; --swatch-b: #e27a86; --swatch-c: #f4e3f0; }
.theme-preview { --preview-bg: #edf7fc; --preview-surface: #fff; --preview-brand: #1689df; --preview-accent: #23b8aa; --preview-bubble: #dff2ff; margin: 12px 0 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--preview-bg); box-shadow: 0 8px 20px rgba(30, 57, 82, .1); }
.theme-preview[data-theme-preview="lavender"] { --preview-bg: #f5f1ff; --preview-surface: #fffefe; --preview-brand: #8066df; --preview-accent: #c16be7; --preview-bubble: #eee7ff; }
.theme-preview[data-theme-preview="mint"] { --preview-bg: #edf9f4; --preview-surface: #fff; --preview-brand: #16a889; --preview-accent: #70c96f; --preview-bubble: #daf5ea; }
.theme-preview[data-theme-preview="sunset"] { --preview-bg: #fff4ec; --preview-surface: #fffdfb; --preview-brand: #ec765d; --preview-accent: #f0b24c; --preview-bubble: #ffe5d8; }
.theme-preview[data-theme-preview="graphite"] { --preview-bg: #101827; --preview-surface: #172237; --preview-brand: #8b7cf6; --preview-accent: #35b9af; --preview-bubble: #263e64; }
.theme-preview[data-theme-preview="coral"] { --preview-bg: #fff0f1; --preview-surface: #fffdfd; --preview-brand: #e94f72; --preview-accent: #f28b64; --preview-bubble: #ffe0e7; }
.theme-preview[data-theme-preview="forest"] { --preview-bg: #eaf4ee; --preview-surface: #fcfffd; --preview-brand: #287f5a; --preview-accent: #8aa64b; --preview-bubble: #d6efdf; }
.theme-preview[data-theme-preview="royal"] { --preview-bg: #f0efff; --preview-surface: #fffefe; --preview-brand: #5146d9; --preview-accent: #d4a84f; --preview-bubble: #e3e1ff; }
.theme-preview[data-theme-preview="sand"] { --preview-bg: #faf4e8; --preview-surface: #fffdf8; --preview-brand: #b97a3c; --preview-accent: #7fa06a; --preview-bubble: #f6e5c6; }
.theme-preview[data-theme-preview="berry"] { --preview-bg: #f9eef7; --preview-surface: #fffdfd; --preview-brand: #a64794; --preview-accent: #e27a86; --preview-bubble: #f2dced; }
.theme-preview-top, .theme-preview-compose { display: flex; align-items: center; gap: 7px; padding: 9px 11px; background: var(--preview-surface); color: var(--preview-brand); font-size: 11px; }
.theme-preview-top strong { flex: 1; color: var(--text); }.theme-preview-top > span:last-child { letter-spacing: 2px; }
.theme-preview-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--preview-brand), var(--preview-accent)); }
.theme-preview-body { display: grid; gap: 6px; padding: 12px; background: var(--preview-bg); }
.theme-preview-message { width: fit-content; max-width: 86%; padding: 7px 9px; border-radius: 11px; color: var(--text); font-size: 10px; }
.theme-preview-message.incoming { background: var(--preview-surface); }.theme-preview-message.outgoing { justify-self: end; background: var(--preview-bubble); }
.theme-preview-compose { color: var(--text-muted); border-top: 1px solid color-mix(in srgb, var(--preview-brand) 15%, transparent); }.theme-preview-compose span { flex: 1; }.theme-preview-compose b { color: var(--preview-brand); }

html[data-animations="off"] *, html[data-animations="off"] *::before, html[data-animations="off"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Shared modal finish: one consistent surface for forms, confirmations,
   profile sheets, previews, and community actions. */
html[data-theme] .modal-overlay {
  padding: 18px;
  background: color-mix(in srgb, var(--bg-color) 30%, rgba(8, 18, 30, .72));
  backdrop-filter: blur(12px);
}
html[data-theme] .modal-card {
  width: min(440px, 100%);
  max-height: min(86dvh, 760px);
  overflow: hidden;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(20, 38, 65, .24);
}
html[data-theme] .modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
html[data-theme] .modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.02em;
}
html[data-theme] .modal-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: -5px -5px 0 0;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 25px;
  line-height: 1;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
html[data-theme] .modal-close:hover {
  background: var(--surface-hover);
  color: var(--text);
  transform: rotate(6deg);
}
html[data-theme] .modal-close:focus-visible,
html[data-theme] .btn-cancel:focus-visible,
html[data-theme] .btn-confirm:focus-visible,
html[data-theme] .modal-input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset: 2px;
}
html[data-theme] .modal-body {
  overflow-y: auto;
  max-height: calc(min(86dvh, 760px) - 150px);
  padding: 1px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 40%, var(--border)) transparent;
}
html[data-theme] .modal-body > p:not(.theme-picker-hint) {
  color: var(--text-muted);
  line-height: 1.5;
}
html[data-theme] .modal-body > label:not(.check-row):not(.profile-upload-field) {
  color: var(--text-muted);
}
html[data-theme] .modal-input {
  min-height: 46px;
  border-color: var(--border);
  background: var(--surface-hover);
  color: var(--text);
}
html[data-theme] .modal-input:focus {
  border-color: var(--brand);
  background: var(--surface);
}
html[data-theme] .modal-actions {
  gap: 8px;
  margin: 16px -2px -2px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
html[data-theme] .modal-actions .btn-cancel,
html[data-theme] .modal-actions .btn-confirm {
  min-height: 42px;
  border-radius: 12px;
  padding: 10px 15px;
}
html[data-theme] .modal-actions .btn-cancel {
  color: var(--text-muted);
}
html[data-theme] .modal-actions .btn-confirm {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 22%, transparent);
}
html[data-theme] .modal-actions .btn-confirm:hover {
  background: var(--brand-hover);
}
html[data-theme] .modal-card.is-busy .modal-body {
  pointer-events: none;
  opacity: .72;
}
html[data-theme] .modal-card.is-busy .btn-confirm {
  cursor: wait;
  filter: saturate(.78);
}
html[data-theme] .modal-card.is-busy .btn-confirm::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: modal-spinner .7s linear infinite;
}
@keyframes modal-spinner {
  to { transform: rotate(360deg); }
}
html[data-theme] .modal-close:disabled,
html[data-theme] .modal-actions button:disabled {
  cursor: wait;
  opacity: .55;
}
html[data-theme] .action-sheet-modal {
  align-items: flex-end;
  padding: 0;
}
html[data-theme] .action-sheet-modal .modal-card {
  width: min(100%, 540px);
  border-radius: 26px 26px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
html[data-theme] .action-sheet-modal .modal-card::before {
  content: '';
  display: block;
  width: 38px;
  height: 4px;
  margin: -4px auto 14px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text-muted) 40%, transparent);
}
html[data-theme] .action-sheet-modal .modal-body {
  max-height: min(68dvh, 560px);
}
html[data-theme] .action-sheet-modal .modal-actions {
  margin: 14px -16px -16px;
  padding: 12px 16px calc(4px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--surface) 30%);
}

@media (max-width: 767px) {
  html[data-theme] .modal-overlay:not(.action-sheet-modal) {
    align-items: flex-end;
    padding: 0;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
    width: 100%;
    max-height: 90dvh;
    border-radius: 26px 26px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    margin: -6px auto 14px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-body {
    max-height: calc(90dvh - 145px);
  }
}

/* Notification center */
.nav-notifications {
  position: relative;
}
.nav-notifications > svg {
  position: relative;
  z-index: 1;
}
.nav-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 5px);
  z-index: 2;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #e3485d;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
}
.notification-center {
  display: grid;
  gap: 10px;
}
.notification-center-hint {
  margin: 0 2px 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.notification-list {
  display: grid;
  gap: 6px;
  max-height: min(52dvh, 440px);
  overflow-y: auto;
  padding: 2px;
}
.notification-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-hover);
  text-align: left;
}
.notification-item:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-hover));
  transform: translateX(2px);
}
.notification-avatar .avatar {
  width: 42px;
  height: 42px;
  font-size: 13px;
}
.notification-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.notification-copy strong,
.notification-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-copy strong {
  color: var(--text);
  font-size: 13px;
}
.notification-copy small {
  color: var(--text-muted);
  font-size: 11px;
}
.notification-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.notification-meta b {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  text-align: center;
}
.notification-meta time {
  color: var(--text-muted);
  font-size: 9px;
}
.notification-read-all {
  justify-content: center;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  font-size: 12px;
}
.notification-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 14px 22px;
  text-align: center;
}
.notification-empty-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-hover));
  color: var(--brand);
}
.notification-empty-icon svg {
  width: 23px;
  height: 23px;
}
.notification-empty strong {
  font-size: 15px;
}
.notification-empty small {
  max-width: 240px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

/* Settings now intentionally reuse the support/referral menu treatment. */
.settings-scroll > .support-section-title {
  margin: 18px 16px 8px;
  padding: 0;
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settings-scroll > .support-section-title::after {
  display: none;
}
.settings-scroll > .support-actions {
  display: grid;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.settings-scroll > .support-actions .settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--app-line-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 5%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease);
}
.settings-scroll > .support-actions .settings-row:hover,
.settings-scroll > .support-actions .settings-row:focus-visible {
  padding-left: 12px;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: var(--surface-hover);
  transform: translateX(2px);
}
.settings-scroll > .support-actions .settings-row > span:not(.settings-icon) {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}
.settings-scroll > .support-actions .settings-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-scroll > .support-actions .settings-row small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-scroll > .support-actions .settings-row > i {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
}
.settings-scroll > .support-actions .settings-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  box-shadow: none;
}
.settings-scroll > .support-actions .settings-icon svg {
  width: 17px;
  height: 17px;
}
.settings-scroll > .support-actions .danger-row {
  border-color: color-mix(in srgb, #e53935 24%, var(--border));
}
@media (max-width: 767px) {
  .settings-scroll > .support-section-title {
    margin-left: 15px;
    margin-right: 15px;
  }
  .settings-scroll > .support-actions {
    margin-left: 13px;
    margin-right: 13px;
  }
  .settings-scroll > .support-actions .settings-row:hover,
  .settings-scroll > .support-actions .settings-row:focus-visible {
    transform: none;
  }
}

/* Legacy modal override retained for compatibility; the final contract below
   intentionally stays last in the file
   so the older mobile bottom-sheet rules cannot override regular dialogs. */
html[data-theme] .modal-overlay:not(.action-sheet-modal) {
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center;
  min-height: 100dvh;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
  box-sizing: border-box;
  min-height: 0;
  width: min(500px, 100%);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-actions {
  z-index: 1;
  flex: 0 0 auto;
  padding-bottom: max(15px, calc(15px + env(safe-area-inset-bottom)));
}
html[data-theme] .action-sheet-modal {
  box-sizing: border-box;
  min-height: 100dvh;
  overflow-y: auto;
  padding: env(safe-area-inset-top) 0 0 !important;
}
html[data-theme] .action-sheet-modal .modal-card {
  box-sizing: border-box;
  min-height: 0;
  max-height: calc(100dvh - env(safe-area-inset-top)) !important;
}
html[data-theme] .action-sheet-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
}
html[data-theme] .action-sheet-modal .modal-actions {
  position: relative;
  bottom: auto;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 18px max(15px, calc(15px + env(safe-area-inset-bottom)));
}

/* Legacy button contrast contract retained for compatibility. Surface buttons
   use the theme text color;
   primary and active buttons keep their intentionally white/brand treatment. */
html[data-theme] .modal-body .btn-action,
html[data-theme] .modal-body .menu-item,
html[data-theme] .action-sheet-modal .menu-item,
html[data-theme] .quick-create-item,
html[data-theme] .admin-menu .menu-item:not(.active),
html[data-theme] .settings-row,
html[data-theme] .contacts-actions .btn-action,
html[data-theme] .profile-actions button,
html[data-theme] .filter-btn:not(.active),
html[data-theme] .utility-filter-btn:not(.active),
html[data-theme] .profile-tabs button:not(.active) {
  color: var(--text);
}
html[data-theme] .modal-body .btn-action,
html[data-theme] .modal-body .menu-item {
  background: var(--surface-hover);
  border-color: var(--border);
}
html[data-theme] .modal-body .btn-action:hover,
html[data-theme] .modal-body .menu-item:hover,
html[data-theme] .action-sheet-modal .menu-item:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
}
html[data-theme] .filter-btn:not(.active),
html[data-theme] .utility-filter-btn:not(.active) {
  border-color: var(--border);
  background: var(--surface);
}
html[data-theme] .filter-btn:not(.active):hover,
html[data-theme] .utility-filter-btn:not(.active):hover,
html[data-theme] .profile-tabs button:not(.active):hover {
  background: var(--surface-hover);
  color: var(--brand);
}

/* Desktop navigation is a left rail, never a bottom bar. This is the last
   responsive block so it wins over the legacy mobile-first visual layers. */
@media (min-width: 768px) {
  #root {
    flex-direction: row;
    width: min(100%, 1440px);
    max-width: 1440px;
  }

  .main-content {
    order: 2;
    min-width: 0;
  }

  .bottom-nav {
    order: 1;
    width: 224px;
    height: 100%;
    min-height: 0;
    flex: 0 0 224px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 22px 14px;
    border-top: 0;
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 26px color-mix(in srgb, var(--brand) 7%, transparent);
    backdrop-filter: none;
  }

  .nav-item {
    flex: 0 0 auto;
    min-height: 54px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 16px;
    border-radius: 14px;
    text-align: left;
  }

  .nav-item svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .nav-item span {
    font-size: 14px;
    font-weight: 650;
  }

  .nav-item.active::after {
    display: none;
  }

  .nav-item:hover {
    transform: translateX(2px);
  }
}

/* Final desktop navigation contract. This must remain after the later
   visual/theme layers so desktop never falls back to a bottom bar. */
@media (min-width: 768px) {
  #root {
    flex-direction: row;
    width: min(100%, 1440px);
    max-width: 1440px;
  }

  .main-content {
    order: 2;
    min-width: 0;
  }

  .bottom-nav {
    order: 1;
    width: 224px;
    height: 100%;
    min-height: 0;
    flex: 0 0 224px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 22px 14px;
    border-top: 0;
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 26px color-mix(in srgb, var(--brand) 7%, transparent);
    backdrop-filter: none;
  }

  .nav-item {
    flex: 0 0 auto;
    min-height: 54px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 16px;
    border-radius: 14px;
    text-align: left;
  }

  .nav-item svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .nav-item span {
    font-size: 14px;
    font-weight: 650;
  }

  .nav-item.active::after {
    display: none;
  }

  .nav-item:hover {
    transform: translateX(2px);
  }
}

/* Authentication final visual pass: keep login, registration and QR entry
   on one clear surface without changing validation or session behavior. */
html[data-theme] .auth-wrapper {
  box-sizing: border-box;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 34%),
    radial-gradient(circle at 92% 90%, color-mix(in srgb, var(--app-accent-2, #26b9aa) 10%, transparent), transparent 34%),
    var(--bg-color);
}
html[data-theme] .auth-card {
  box-sizing: border-box;
  width: min(432px, 100%);
  max-width: 432px;
  padding: 31px 27px 24px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: 25px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 68px color-mix(in srgb, #17334d 15%, transparent);
}
html[data-theme] .auth-card::before {
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--app-accent-2, #26b9aa));
}
html[data-theme] .auth-logo {
  gap: 9px;
  margin-bottom: 18px;
}
html[data-theme] .auth-logo-glyph {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), var(--app-accent-2, #26b9aa));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 24%, transparent);
  font-size: 18px;
}
html[data-theme] .auth-logo-word {
  color: var(--text);
  font-size: 18px;
}
html[data-theme] .auth-card h1 {
  color: var(--text);
  font-size: clamp(23px, 5.8vw, 27px);
  letter-spacing: -.04em;
}
html[data-theme] .auth-subtitle {
  max-width: 305px;
  margin: 9px auto 21px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
html[data-theme] .auth-caption {
  margin: -7px 0 17px;
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .auth-caption-dot {
  width: 6px;
  height: 6px;
  background: var(--app-accent-2, #26b9aa);
}
html[data-theme] .auth-card .input-group {
  margin-top: 15px;
}
html[data-theme] .auth-card label {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
}
html[data-theme] .auth-card input:not([type="checkbox"]) {
  min-height: 49px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: none;
}
html[data-theme] .auth-card input:not([type="checkbox"])::placeholder {
  color: var(--text-muted);
  opacity: .85;
}
html[data-theme] .auth-card input:not([type="checkbox"]):hover {
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  background: var(--surface);
}
html[data-theme] .auth-card input:not([type="checkbox"]):focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--app-focus-ring);
  transform: none;
}
html[data-theme] .auth-card .input-hint {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .password-wrap input {
  padding-right: 76px;
}
html[data-theme] .password-toggle {
  right: 8px;
  height: 49px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
}
html[data-theme] .password-toggle:hover,
html[data-theme] .password-toggle:focus-visible {
  color: color-mix(in srgb, var(--brand) 78%, var(--text));
}
html[data-theme] .auth-remember {
  margin: 15px 0 12px;
  color: var(--text-muted);
  font-size: 11px;
}
html[data-theme] .auth-remember input {
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  border-color: var(--border);
  background: var(--surface-hover);
  accent-color: var(--brand);
}
html[data-theme] .auth-error {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #d93431 25%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, #d93431 9%, var(--surface));
  color: #c52f2c;
  font-size: 11px;
}
html[data-theme] .auth-card .btn-primary {
  min-height: 49px;
  margin-top: 8px;
  border-radius: 13px;
  background: var(--brand);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 22%, transparent);
  font-size: 13px;
  font-weight: 800;
}
html[data-theme] .auth-card .btn-primary:hover {
  background: color-mix(in srgb, var(--brand) 88%, #0c698c);
  box-shadow: 0 12px 25px color-mix(in srgb, var(--brand) 28%, transparent);
}
html[data-theme] .auth-card .btn-primary:active {
  transform: scale(.985);
}
html[data-theme] .auth-card .btn-secondary {
  width: 100%;
  min-height: 42px;
  margin-top: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
html[data-theme] .auth-card .btn-secondary:hover,
html[data-theme] .auth-card .btn-secondary:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand);
}
html[data-theme] .auth-card .btn-link {
  min-height: 38px;
  margin-top: 9px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
}
html[data-theme] .auth-card .btn-link:hover,
html[data-theme] .auth-card .btn-link:focus-visible {
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
}
html[data-theme] .auth-legal-links {
  margin-top: 13px;
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .auth-legal-links button:hover,
html[data-theme] .auth-legal-links button:focus-visible {
  color: var(--brand);
}
html[data-theme] .qr-login-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 4px 0 2px;
  text-align: center;
}
html[data-theme] .qr-login-card .modal-muted {
  max-width: 290px;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
html[data-theme] .qr-login-card .profile-qr-image {
  width: 220px;
  height: 220px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
html[data-theme] .qr-login-card strong {
  color: var(--text);
  font-size: 13px;
}
html[data-theme] .qr-login-card small {
  color: var(--text-muted);
  font-size: 10px;
}
@media (max-width: 480px) {
  html[data-theme] .auth-wrapper {
    align-items: flex-start;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  }
  html[data-theme] .auth-card {
    width: 100%;
    padding: 27px 19px 21px;
    border-radius: 22px;
  }
  html[data-theme] .auth-logo {
    margin-bottom: 16px;
  }
  html[data-theme] .auth-card h1 {
    font-size: 23px;
  }
}

/* Profile final visual pass: identity first, then actions, details and
   publications. Keep the reward style as an intentional exception. */
html[data-theme] .profile-page-head {
  min-height: 78px;
  padding: 14px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
html[data-theme] .profile-page-head strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.035em;
}
html[data-theme] .profile-page-head small {
  color: var(--text-muted);
}
html[data-theme] .profile-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
html[data-theme] .profile-head-actions .btn-icon {
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--surface-hover);
}
html[data-theme] .profile-head-actions .btn-icon:hover,
html[data-theme] .profile-head-actions .btn-icon:focus-visible {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
}
html[data-theme] .profile-page {
  padding: 14px 0 calc(34px + env(safe-area-inset-bottom));
  background: var(--bg-color);
}
html[data-theme] .profile-hero {
  min-height: 0;
  margin: 0 16px 14px;
  padding: 0 0 17px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 7%, transparent);
}
html[data-theme] .profile-hero:not(.profile-reward-style) .profile-cover {
  height: 112px;
  background:
    radial-gradient(circle at 8% 15%, color-mix(in srgb, #8edaf0 42%, transparent), transparent 34%),
    radial-gradient(circle at 89% 0%, color-mix(in srgb, #a99bec 35%, transparent), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 84%, #193a5e), color-mix(in srgb, var(--brand) 48%, #1eb6a7));
}
html[data-theme] .profile-hero:not(.profile-reward-style) .profile-cover::after {
  background: linear-gradient(to bottom, transparent 12%, color-mix(in srgb, var(--surface) 84%, transparent) 100%);
}
html[data-theme] .profile-cover-caption {
  right: 13px;
  bottom: 11px;
  padding: 4px 7px;
  border-color: rgba(255, 255, 255, .25);
  background: rgba(8, 26, 42, .2);
  color: rgba(255, 255, 255, .86);
  font-size: 9px;
}
html[data-theme] .profile-hero-content {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  padding: 0 15px 0;
}
html[data-theme] .profile-hero-content .profile-avatar-wrap {
  margin-top: -34px;
}
html[data-theme] .profile-hero-content .profile-avatar-wrap .avatar {
  width: 82px;
  height: 82px;
  border: 4px solid var(--surface);
  box-shadow: 0 7px 17px color-mix(in srgb, #0b223f 22%, transparent);
  font-size: 27px;
}
html[data-theme] .profile-hero-content .profile-online-dot {
  right: 0;
  bottom: 2px;
  width: 17px;
  height: 17px;
  border: 3px solid var(--surface);
}
html[data-theme] .profile-hero-content .profile-identity {
  padding-top: 11px;
}
html[data-theme] .profile-hero-content .profile-identity h1 {
  color: var(--text);
  font-size: clamp(18px, 4.6vw, 22px);
}
html[data-theme] .profile-hero-content .profile-username {
  color: var(--text-muted);
}
html[data-theme] .profile-hero-content .profile-hero-bio {
  color: var(--text-muted);
  text-align: left;
}
html[data-theme] .profile-online {
  color: #238e68;
  background: color-mix(in srgb, #2eaa78 11%, var(--surface));
}
html[data-theme] .profile-status-row .profile-reward-label {
  margin-top: 0;
}
html[data-theme] .profile-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 16px;
  padding: 0 0 14px;
}
html[data-theme] .profile-actions button {
  min-width: 0;
  min-height: 64px;
  gap: 5px;
  padding: 8px 5px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 5%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease), box-shadow .18s ease;
}
html[data-theme] .profile-actions button:hover,
html[data-theme] .profile-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: var(--surface-hover);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 9%, transparent);
  transform: translateY(-1px);
}
html[data-theme] .profile-actions button:active {
  transform: translateY(0) scale(.98);
}
html[data-theme] .profile-actions .profile-action-main {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #fff !important;
}
html[data-theme] .profile-actions .profile-action-main:hover,
html[data-theme] .profile-actions .profile-action-main:focus-visible {
  background: color-mix(in srgb, var(--brand) 88%, #0c698c) !important;
}
html[data-theme] .profile-action-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  color: var(--brand);
}
html[data-theme] .profile-actions .profile-action-main .profile-action-icon {
  background: rgba(255, 255, 255, .16);
  color: #fff !important;
}
html[data-theme] .profile-actions small {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .profile-actions .profile-action-main small {
  color: rgba(255, 255, 255, .9);
}
html[data-theme] .profile-card.profile-details {
  display: grid;
  gap: 0;
  margin: 0 16px;
  padding: 3px 14px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 5%, transparent);
}
html[data-theme] .profile-detail-row {
  min-height: 58px;
  padding: 10px 0;
  border-bottom-color: var(--border);
}
html[data-theme] .profile-detail-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-hover));
  color: var(--brand);
}
html[data-theme] .profile-detail-row strong {
  color: var(--text);
  font-size: 12px;
}
html[data-theme] .profile-detail-row span {
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .profile-section-head {
  margin: 22px 16px 9px;
  padding: 0;
}
html[data-theme] .profile-section-head strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
}
html[data-theme] .profile-section-head span {
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .profile-add-top {
  min-height: 31px;
  padding: 0 9px;
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand);
}
html[data-theme] .profile-add-top:hover,
html[data-theme] .profile-add-top:focus-visible {
  background: var(--brand);
  color: #fff;
}
html[data-theme] .profile-tabs {
  display: flex;
  gap: 3px;
  margin: 0 16px 13px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 5%, transparent);
}
html[data-theme] .profile-tabs button {
  min-height: 34px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
}
html[data-theme] .profile-tabs button.active {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
}
html[data-theme] .publication-list {
  min-height: 150px;
  padding: 0 16px;
}
html[data-theme] .publication-card {
  margin: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 6px 17px color-mix(in srgb, var(--brand) 5%, transparent);
}
html[data-theme] .publication-card > div:first-child {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
html[data-theme] .publication-card > small {
  color: var(--text-muted);
}
html[data-theme] .publication-actions {
  border-top-color: var(--border);
}
html[data-theme] .profile-empty {
  min-height: 190px;
  margin: 0;
  padding: 24px 16px;
  border: 1px dashed color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-hover) 78%, transparent);
  color: var(--text-muted);
}
html[data-theme] .profile-empty-icon {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
}
html[data-theme] .profile-empty strong {
  color: var(--text);
  font-size: 15px;
}
html[data-theme] .profile-empty span {
  max-width: 270px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}
html[data-theme] .profile-empty button {
  min-height: 35px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
}
html[data-theme] .profile-media-grid {
  gap: 5px;
}
html[data-theme] .profile-media-tile {
  border-radius: 11px;
}
@media (max-width: 767px) {
  html[data-theme] .profile-page-head {
    min-height: 74px;
    padding: 12px 13px 10px;
  }
  html[data-theme] .profile-page {
    padding-top: 12px;
  }
  html[data-theme] .profile-hero {
    margin-left: 13px;
    margin-right: 13px;
  }
  html[data-theme] .profile-actions {
    margin-left: 13px;
    margin-right: 13px;
  }
  html[data-theme] .profile-card.profile-details,
  html[data-theme] .profile-section-head,
  html[data-theme] .profile-tabs,
  html[data-theme] .publication-list {
    margin-left: 13px;
    margin-right: 13px;
  }
  html[data-theme] .publication-list {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Settings final visual pass: one quiet surface language for account,
   support and about sections, with the profile card as the only accent. */
html[data-theme] .settings-page-head {
  min-height: 78px;
  padding: 14px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
html[data-theme] .settings-page-head strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.035em;
}
html[data-theme] .settings-page-head small {
  color: var(--text-muted);
}
html[data-theme] .settings-page-head .btn-icon {
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--surface-hover);
}
html[data-theme] .settings-page-head .btn-icon:hover,
html[data-theme] .settings-page-head .btn-icon:focus-visible {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
}
html[data-theme] .settings-scroll {
  padding: 0 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--bg-color);
}
html[data-theme] .settings-profile-large {
  min-height: 86px;
  margin: 15px 16px 17px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 8%, transparent);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s var(--app-ease);
}
html[data-theme] .settings-profile-large:hover,
html[data-theme] .settings-profile-large:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
  background: var(--surface-hover);
  box-shadow: 0 11px 26px color-mix(in srgb, var(--brand) 12%, transparent);
  transform: translateY(-1px);
}
html[data-theme] .settings-profile-large > .avatar {
  width: 56px;
  height: 56px;
  border: 2px solid color-mix(in srgb, var(--brand) 25%, var(--surface));
  box-shadow: 0 6px 15px color-mix(in srgb, var(--brand) 14%, transparent);
}
html[data-theme] .settings-profile-large .profile-name {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}
html[data-theme] .settings-profile-large .profile-user {
  color: var(--text-muted);
  font-size: 11px;
}
html[data-theme] .settings-profile-hint {
  color: var(--brand);
  font-size: 10px;
  font-weight: 750;
}
html[data-theme] .settings-profile-large .settings-chevron {
  color: var(--text-muted);
}
html[data-theme] .settings-scroll > .support-section-title {
  margin: 18px 16px 8px;
  padding: 0;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .settings-scroll > .support-actions {
  display: grid;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme] .settings-scroll > .support-actions .settings-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 5%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease), box-shadow .18s ease;
}
html[data-theme] .settings-scroll > .support-actions .settings-row:hover,
html[data-theme] .settings-scroll > .support-actions .settings-row:focus-visible {
  padding-left: 12px;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: var(--surface-hover);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 9%, transparent);
  transform: translateX(2px);
}
html[data-theme] .settings-scroll > .support-actions .settings-row > span:not(.settings-icon) {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}
html[data-theme] .settings-scroll > .support-actions .settings-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .settings-scroll > .support-actions .settings-row small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .settings-scroll > .support-actions .settings-row > i {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid color-mix(in srgb, currentColor 13%, transparent);
  border-radius: 9px;
  color: var(--brand);
  box-shadow: none;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon svg {
  width: 17px;
  height: 17px;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.accounts,
html[data-theme] .settings-scroll > .support-actions .settings-icon.account,
html[data-theme] .settings-scroll > .support-actions .settings-icon.chats,
html[data-theme] .settings-scroll > .support-actions .settings-icon.about {
  background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand);
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.security,
html[data-theme] .settings-scroll > .support-actions .settings-icon.privacy {
  background: color-mix(in srgb, #6879d9 14%, var(--surface));
  color: #5969c4;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.chats {
  background: color-mix(in srgb, #2d9eab 14%, var(--surface));
  color: #228694;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.notices,
html[data-theme] .settings-scroll > .support-actions .settings-icon.power {
  background: color-mix(in srgb, #e39a2b 15%, var(--surface));
  color: #b97514;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.data,
html[data-theme] .settings-scroll > .support-actions .settings-icon.folders {
  background: color-mix(in srgb, #31a879 14%, var(--surface));
  color: #238c65;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.devices {
  background: color-mix(in srgb, #3d91d5 14%, var(--surface));
  color: #2d81c3;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.support {
  background: color-mix(in srgb, #3d91d5 14%, var(--surface));
  color: #2d81c3;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.referrals {
  background: color-mix(in srgb, #9866d5 14%, var(--surface));
  color: #8051bd;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.admin {
  background: color-mix(in srgb, #d47b54 14%, var(--surface));
  color: #b55f3a;
}
html[data-theme] .settings-scroll > .support-actions .settings-icon.logout {
  background: color-mix(in srgb, #e53935 12%, var(--surface));
  color: #d93431;
}
html[data-theme] .settings-scroll > .support-actions .settings-row.danger-row {
  border-color: color-mix(in srgb, #e53935 24%, var(--border));
  background: color-mix(in srgb, #e53935 3%, var(--surface));
}
html[data-theme] .settings-scroll > .support-actions .settings-row.danger-row strong {
  color: #d93431;
}
@media (max-width: 767px) {
  html[data-theme] .settings-page-head {
    min-height: 74px;
    padding: 12px 13px 10px;
  }
  html[data-theme] .settings-profile-large {
    margin: 13px 13px 16px;
  }
  html[data-theme] .settings-scroll > .support-section-title {
    margin-left: 15px;
    margin-right: 15px;
  }
  html[data-theme] .settings-scroll > .support-actions {
    margin-left: 13px;
    margin-right: 13px;
  }
  html[data-theme] .settings-scroll > .support-actions .settings-row:hover,
  html[data-theme] .settings-scroll > .support-actions .settings-row:focus-visible {
    transform: none;
  }
}

/* Contacts final visual pass: keep discovery calm and make every action
   readable without changing the search or community behavior. */
html[data-theme] .contacts-head {
  min-height: 78px;
  padding: 14px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
html[data-theme] .contacts-head strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.035em;
}
html[data-theme] .contacts-head small {
  color: var(--text-muted);
}
html[data-theme] .contacts-head .btn-icon {
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--surface-hover);
}
html[data-theme] .contacts-head .btn-icon:hover,
html[data-theme] .contacts-head .btn-icon:focus-visible {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
}
html[data-theme] .contacts-search {
  padding: 14px 16px 13px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
html[data-theme] .contacts-search-caption strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}
html[data-theme] .contacts-search-caption span {
  color: var(--text-muted);
}
html[data-theme] .contacts-search .search-bar {
  background: var(--surface-hover);
  border-color: var(--border);
  box-shadow: none;
}
html[data-theme] .contacts-search .search-bar:focus-within {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
  box-shadow: 0 0 0 4px var(--app-focus-ring);
}
html[data-theme] .contacts-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 16px 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme] .contacts-actions .btn-action {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 76px;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--brand) 5%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease), box-shadow .18s ease;
}
html[data-theme] .contacts-actions .btn-action:hover,
html[data-theme] .contacts-actions .btn-action:focus-visible {
  padding-left: 11px;
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  background: var(--surface-hover);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--brand) 9%, transparent);
  transform: translateY(-1px);
}
html[data-theme] .contacts-actions .btn-action:active {
  transform: translateY(0) scale(.985);
}
html[data-theme] .contact-action-copy {
  min-width: 0;
  gap: 3px;
}
html[data-theme] .contact-action-copy strong,
html[data-theme] .contact-action-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .contact-action-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
html[data-theme] .contact-action-copy small {
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .quick-action-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: none;
}
html[data-theme] .quick-action-icon.blue {
  background: color-mix(in srgb, #3d91d5 16%, var(--surface));
  color: #2d81c3;
}
html[data-theme] .quick-action-icon.green {
  background: color-mix(in srgb, #31b781 16%, var(--surface));
  color: #25996d;
}
html[data-theme] .quick-action-icon.orange {
  background: color-mix(in srgb, #e89b2b 17%, var(--surface));
  color: #bd7413;
}
html[data-theme] .quick-action-icon.purple {
  background: color-mix(in srgb, #8b6be0 16%, var(--surface));
  color: #7353c9;
}
html[data-theme] .contacts-list-heading {
  padding: 10px 17px 5px;
}
html[data-theme] .contacts-list-heading span {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html[data-theme] .contacts-list-heading small,
html[data-theme] .contacts-list .list-section-title small {
  color: var(--text-muted);
}
html[data-theme] .contacts-list .list-section-title {
  padding: 14px 17px 7px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html[data-theme] .contacts-list .list-section-title::after {
  display: block;
  background: var(--app-line-soft);
}
html[data-theme] .contact-result-item {
  min-height: 70px;
  padding: 9px 13px;
  border-bottom-color: var(--border);
  background: var(--surface);
}
html[data-theme] .contact-result-item:hover {
  background: var(--surface-hover);
  transform: translateX(2px);
}
html[data-theme] .contact-result-avatar .avatar {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 12%, transparent);
}
html[data-theme] .contact-type-mark,
html[data-theme] .contact-status-mark {
  border-color: var(--surface);
}
html[data-theme] .contact-result-action {
  color: var(--brand);
  font-size: 10px;
  font-weight: 750;
}
html[data-theme] .contact-result-item .chat-preview,
html[data-theme] .contact-result-item .chat-item-context {
  color: var(--text-muted);
}
html[data-theme] .contact-write,
html[data-theme] .contact-more {
  color: var(--text-muted);
}
html[data-theme] .contact-write:hover,
html[data-theme] .contact-write:focus-visible,
html[data-theme] .contact-more:hover,
html[data-theme] .contact-more:focus-visible {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
html[data-theme] .contacts-list > .ui-state {
  margin: 12px 13px 18px;
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  background: color-mix(in srgb, var(--surface-hover) 80%, transparent);
}
@media (max-width: 767px) {
  html[data-theme] .contacts-head {
    min-height: 74px;
    padding: 12px 13px 10px;
  }
  html[data-theme] .contacts-search {
    padding: 13px 13px 11px;
  }
  html[data-theme] .contacts-actions {
    gap: 8px;
    margin: 13px 13px 11px;
  }
  html[data-theme] .contacts-actions .btn-action {
    min-height: 72px;
    padding: 10px 9px;
  }
  html[data-theme] .contacts-actions .btn-action:hover,
  html[data-theme] .contacts-actions .btn-action:focus-visible {
    padding-left: 9px;
    transform: none;
  }
  html[data-theme] .contacts-list-heading {
    padding-left: 15px;
    padding-right: 15px;
  }
  html[data-theme] .contact-result-item:hover {
    transform: none;
  }
}

/* Conversation refresh: calm surfaces, one accent, and clearer reading rhythm. */
html[data-theme="ocean"] {
  --bg-color: #f3f7fa;
  --surface: #ffffff;
  --surface-hover: #eef5f8;
  --text: #17324a;
  --text-muted: #718496;
  --brand: #246bc4;
  --brand-hover: #1858a8;
  --border: #d9e6ee;
  --bubble-in: #ffffff;
  --bubble-out: #dff1f5;
  --bubble-text: #17324a;
  --app-accent-2: #2eb5a3;
}
html[data-theme="graphite"] {
  --bg-color: #0e1825;
  --surface: #152538;
  --surface-hover: #1c3046;
  --text: #edf5fb;
  --text-muted: #99abba;
  --brand: #82a8f4;
  --brand-hover: #a0bdf8;
  --border: #2b4054;
  --bubble-in: #152538;
  --bubble-out: #24475c;
  --bubble-text: #edf5fb;
  --app-accent-2: #4ac8b5;
}
html[data-theme] .chat-topbar {
  min-height: 70px;
  padding: 10px 15px 9px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
html[data-theme] .chat-brand {
  gap: 10px;
}
html[data-theme] .chat-brand .avatar {
  width: 40px;
  height: 40px;
  border: 0;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 18%, transparent);
}
html[data-theme] .chat-brand-copy strong {
  font-size: 19px;
  letter-spacing: -.035em;
}
html[data-theme] .chat-brand-copy small {
  color: var(--text-muted);
  font-size: 11px;
}
html[data-theme] .chat-new-top {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  color: var(--brand);
  font-size: 12px;
}
html[data-theme] .chat-new-top:hover {
  background: var(--brand);
  color: #fff;
}
html[data-theme] .chat-search-header {
  gap: 10px;
  padding: 14px 15px 12px;
  background: var(--surface);
}
html[data-theme] .chat-search-caption strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}
html[data-theme] .chat-search-caption span {
  font-size: 11px;
}
html[data-theme] .chat-search-header .search-bar {
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-hover);
  box-shadow: none;
}
html[data-theme] .chat-search-header .search-bar:focus-within {
  border-color: color-mix(in srgb, var(--brand) 65%, var(--border));
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
html[data-theme] .chat-filters {
  gap: 7px;
  padding: 10px 15px 4px;
  background: var(--surface);
}
html[data-theme] .filter-btn {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
html[data-theme] .filter-btn.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 20%, transparent);
}
html[data-theme] .chat-utility-filters {
  gap: 7px;
  padding: 7px 15px 5px;
  background: var(--surface);
}
html[data-theme] .utility-filter-btn {
  min-height: 30px;
  padding: 5px 10px;
  border-color: var(--border);
  border-radius: 10px;
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: 11px;
}
html[data-theme] .utility-filter-btn:hover,
html[data-theme] .utility-filter-btn.active {
  border-color: color-mix(in srgb, var(--brand) 44%, var(--border));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
}
html[data-theme] .stories-list {
  padding: 10px 15px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
html[data-theme] .chat-list-heading {
  padding: 15px 17px 7px;
}
html[data-theme] .chat-list-heading span {
  font-size: 12px;
  letter-spacing: .01em;
}
html[data-theme] .chat-list-heading small {
  font-size: 10px;
}
html[data-theme] .chat-list {
  padding: 2px 9px 24px;
}
html[data-theme] .chat-item {
  min-height: 76px;
  margin: 3px 0;
  padding: 10px 9px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-theme] .chat-item:hover {
  border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
  background: var(--surface-hover);
  transform: none;
}
html[data-theme] .chat-item.active {
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  box-shadow: inset 3px 0 0 var(--brand);
}
html[data-theme] .chat-item.active .chat-preview,
html[data-theme] .chat-item.active .chat-time {
  color: var(--text-muted);
}
html[data-theme] .chat-item .avatar {
  width: 48px;
  height: 48px;
  border: 0;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--brand) 14%, transparent);
}
html[data-theme] .chat-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}
html[data-theme] .chat-preview {
  color: var(--text-muted);
  font-size: 12px;
}
html[data-theme] .chat-time {
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .chat-item-context {
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .badge {
  min-width: 21px;
  height: 21px;
  padding: 2px 6px;
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}
html[data-theme] .chat-unread-dot {
  border-color: var(--surface);
  background: var(--app-accent-2);
}
html[data-theme] .floating-new-chat {
  width: 55px;
  height: 55px;
  border: 2px solid var(--surface);
  background: linear-gradient(145deg, var(--brand), var(--app-accent-2));
  box-shadow: 0 12px 25px color-mix(in srgb, var(--brand) 25%, transparent);
}
html[data-theme] .conv-header {
  min-height: 70px;
  height: auto;
  padding: 9px 15px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
html[data-theme] .conv-peer .avatar {
  width: 42px;
  height: 42px;
  border: 0;
}
html[data-theme] .conv-title {
  font-size: 15px;
  font-weight: 750;
}
html[data-theme] .conv-status {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
html[data-theme] .conv-body {
  gap: 6px;
  padding: 18px clamp(12px, 4vw, 48px);
  background: var(--bg-color);
  background-image:
    radial-gradient(circle at 18px 18px, color-mix(in srgb, var(--brand) 7%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50px 43px, color-mix(in srgb, var(--app-accent-2) 5%, transparent) 0 1px, transparent 1.5px);
  background-size: 68px 68px, 94px 94px;
}
html[data-theme] .msg-bubble {
  max-width: min(660px, 82%);
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 17px 17px 17px 6px;
  background: var(--bubble-in);
  box-shadow: 0 4px 12px color-mix(in srgb, #102b43 8%, transparent);
}
html[data-theme] .msg-bubble.mine {
  border-color: color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 17px 17px 6px 17px;
  background: var(--bubble-out);
}
html[data-theme] .msg-author {
  color: var(--brand);
  font-size: 12px;
}
html[data-theme] .msg-text {
  font-size: 14px;
  line-height: 1.45;
}
html[data-theme] .msg-meta {
  color: var(--text-muted);
  font-size: 10px;
}
html[data-theme] .conv-composer {
  margin: 10px clamp(10px, 4vw, 48px) 15px;
  padding: 7px 8px;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 22px color-mix(in srgb, #102b43 9%, transparent);
}
html[data-theme] .conv-composer textarea,
html[data-theme] .conv-composer input {
  min-height: 40px;
  padding: 10px 11px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-hover);
}
html[data-theme] .conv-composer textarea:focus,
html[data-theme] .conv-composer input:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 58%, transparent);
}
html[data-theme] .conv-composer .btn-icon,
html[data-theme] .conv-composer .record-direct {
  width: 36px;
  height: 36px;
}
html[data-theme] .conv-composer .submit-btn {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
html[data-theme] .conv-composer .submit-btn:hover {
  background: var(--brand);
  color: #fff;
}
html[data-theme] .channel-readonly-bar {
  margin: 10px clamp(10px, 4vw, 48px) 15px;
  border-color: color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  box-shadow: none;
}
html[data-theme] :is(.chat-item, .filter-btn, .utility-filter-btn, .btn-icon, .chat-new-top):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  html[data-theme] .chat-topbar {
    min-height: 66px;
    padding: 9px 13px 8px;
  }
  html[data-theme] .chat-brand-copy strong {
    font-size: 18px;
  }
  html[data-theme] .chat-search-header {
    padding: 11px 13px 10px;
  }
  html[data-theme] .chat-filters,
  html[data-theme] .chat-utility-filters {
    padding-left: 13px;
    padding-right: 13px;
  }
  html[data-theme] .conv-header {
    min-height: 64px;
    padding: 8px 10px;
  }
  html[data-theme] .conv-body {
    padding: 15px 11px;
  }
  html[data-theme] .msg-bubble {
    max-width: 90%;
  }
  html[data-theme] .conv-composer {
    margin: 8px 8px 10px;
  }
}

/* Toasts must remain readable above overlays in both themes. */
html[data-theme] .toast {
  z-index: 1200;
}
html[data-theme="ocean"] .toast {
  border-color: #c8dceb;
  background: #fff;
  color: #172238;
  box-shadow: 0 12px 30px rgba(38, 72, 100, .2);
}
html[data-theme="graphite"] .toast {
  border-color: #425476;
  background: #202d46;
  color: #f2f5ff;
  box-shadow: 0 12px 30px rgba(4, 9, 18, .38);
}
html[data-theme] .toast.toast-error {
  border-color: #ef8b99;
  background: #c9344b;
  color: #fff;
  box-shadow: 0 12px 30px rgba(170, 32, 57, .3);
  font-weight: 700;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card::before {
  display: none !important;
  content: none !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-head {
  padding-top: 17px;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .profile-upload-field {
  min-width: 0;
  margin-bottom: 10px;
  padding: 11px;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .profile-upload-field > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .profile-upload-field input {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) #profile-bio {
  margin-top: 10px;
}

/* Terminal modal layout override. Keep regular dialogs centered and let only
   their body scroll; explicit action sheets remain bottom-docked. */
html[data-theme] .modal-overlay:not(.action-sheet-modal) {
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center;
  min-height: 100dvh;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
  box-sizing: border-box;
  min-height: 0;
  width: min(500px, 100%);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  padding: 0;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-actions {
  z-index: 1;
  flex: 0 0 auto;
  padding-bottom: max(15px, calc(15px + env(safe-area-inset-bottom)));
}
html[data-theme] .action-sheet-modal {
  box-sizing: border-box;
  min-height: 100dvh;
  overflow-y: auto;
  padding: env(safe-area-inset-top) 0 0 !important;
}
html[data-theme] .action-sheet-modal .modal-card {
  box-sizing: border-box;
  min-height: 0;
  max-height: calc(100dvh - env(safe-area-inset-top)) !important;
}
html[data-theme] .action-sheet-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
}
html[data-theme] .action-sheet-modal .modal-actions {
  position: relative;
  bottom: auto;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 18px max(15px, calc(15px + env(safe-area-inset-bottom)));
}

/* Final viewport-fit pass: dialogs keep their footer visible on short mobile screens. */
html[data-theme] .modal-overlay {
  box-sizing: border-box;
  min-height: 100dvh;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
html[data-theme] .modal-card {
  min-height: 0;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
}
html[data-theme] .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme] .modal-actions {
  z-index: 1;
  flex: 0 0 auto;
  padding-bottom: max(15px, calc(15px + env(safe-area-inset-bottom)));
}
html[data-theme] .action-sheet-modal {
  padding: env(safe-area-inset-top) 0 0;
}
html[data-theme] .action-sheet-modal .modal-card {
  max-height: calc(100dvh - env(safe-area-inset-top));
}
html[data-theme] .action-sheet-modal .modal-body {
  max-height: none;
}
html[data-theme] .action-sheet-modal .modal-actions {
  position: relative;
  bottom: auto;
  margin: 0;
  padding: 11px 18px max(15px, calc(15px + env(safe-area-inset-bottom)));
}
@media (max-width: 767px) {
  html[data-theme] .modal-overlay:not(.action-sheet-modal) {
    align-items: center;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
    width: min(440px, 100%);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  }
}

/* Messenger-wide interaction polish. Keep the existing AJAX markup and actions,
   but give every primary surface the same rhythm, contrast and motion. */
:root {
  --motion-fast: 160ms;
  --motion-base: 220ms;
  --motion-smooth: cubic-bezier(.2, .75, .25, 1);
}
button,
a,
input,
textarea,
select,
.chat-item,
.settings-row,
.topic-list-item,
.msg-bubble,
.contacts-actions .btn-action {
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-base) var(--motion-smooth),
    opacity var(--motion-fast) ease;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset: 2px;
}

/* Chat list */
.chat-topbar {
  min-height: 72px;
  padding: 14px 16px 10px;
}
.chat-brand-copy {
  gap: 2px;
}
.chat-brand-copy strong {
  font-size: 20px;
  letter-spacing: -.025em;
}
.chat-brand-copy small {
  color: var(--text-muted);
  font-size: 11px;
}
.chat-new-top {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
}
.chat-new-top:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-1px);
}
.chat-new-top svg {
  width: 15px;
  height: 15px;
}
.chat-search-header {
  padding: 8px 16px 10px;
}
.chat-search-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.chat-search-caption strong {
  color: var(--text);
  font-size: 14px;
}
.chat-search-caption span {
  color: var(--text-muted);
  font-size: 10px;
}
.search-bar {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-hover);
}
.search-bar:focus-within {
  border-color: color-mix(in srgb, var(--brand) 46%, var(--border));
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.chat-filters {
  gap: 7px;
  padding: 12px 16px 4px;
}
.filter-btn {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.filter-btn:hover {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  color: var(--brand);
}
.filter-btn.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 5px 13px color-mix(in srgb, var(--brand) 20%, transparent);
}
.chat-utility-filters {
  gap: 7px;
  padding: 8px 16px 10px;
}
.utility-filter-btn {
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-hover) 78%, var(--brand) 22%);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}
.utility-filter-btn:hover,
.utility-filter-btn.active {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  color: var(--brand);
  transform: translateY(-1px);
}
.chat-list-heading {
  padding: 11px 16px 6px;
}
.chat-list-heading span {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}
.chat-list-heading small {
  color: var(--text-muted);
  font-size: 10px;
}
.chat-list {
  gap: 3px;
  padding: 3px 9px 28px;
}
.chat-item {
  min-height: 72px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 17px;
}
.chat-item:hover {
  border-color: color-mix(in srgb, var(--brand) 15%, var(--border));
  background: var(--surface-hover);
  transform: translateX(2px);
}
.chat-item.active {
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  box-shadow: inset 3px 0 0 var(--brand);
  color: var(--text);
  transform: none;
}
.chat-item.active .chat-title,
.chat-item.active .chat-preview,
.chat-item.active .chat-time,
.chat-item.active .chat-item-context {
  color: inherit;
}
.chat-item.active .chat-preview,
.chat-item.active .chat-time,
.chat-item.active .chat-item-context {
  opacity: .68;
}
.chat-item-info {
  gap: 5px;
}
.chat-title {
  font-size: 14px;
  font-weight: 750;
}
.chat-preview {
  font-size: 12px;
}
.chat-item-context {
  color: var(--text-muted);
  font-size: 10px;
}
.chat-unread-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.chat-item .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.floating-new-chat {
  width: 54px;
  height: 54px;
  right: 17px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 18px;
  background: var(--brand);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 28%, transparent);
}
.floating-new-chat:hover {
  transform: translateY(-3px) scale(1.02);
}

/* Conversation, messages and composer */
.conv-header {
  min-height: 68px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--brand) 8%);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--brand) 6%, transparent);
}
.conv-peer:hover {
  opacity: .78;
}
.conv-title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-status {
  overflow: hidden;
  margin-top: 3px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-body {
  padding: 18px 13px 20px;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 35%),
    var(--bg-color);
}
.msg-bubble {
  max-width: min(78%, 430px);
  margin: 5px 0;
  padding: 9px 11px 7px;
  border: 1px solid var(--border);
  border-radius: 17px 17px 17px 6px;
  background: var(--surface);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 5%, transparent);
}
.msg-bubble:hover {
  border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
  transform: translateY(-1px);
}
.msg-bubble.mine {
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 17px 17px 6px 17px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.msg-text {
  font-size: 14px;
  line-height: 1.5;
}
.msg-meta {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10px;
}
.msg-author {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
}
.reaction-chip {
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 11px;
}
.reaction-chip:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  transform: translateY(-1px);
}
.message-search-row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.message-search-row input {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-hover);
}
.message-search-row input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.reply-bar {
  min-height: 44px;
  border-top: 1px solid var(--border);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}
.conv-composer {
  min-height: 58px;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -8px 22px color-mix(in srgb, var(--brand) 6%, transparent);
}
.conv-composer textarea,
.conv-composer input {
  min-height: 40px;
  max-height: 132px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-hover);
  font-size: 14px;
}
.conv-composer textarea:focus,
.conv-composer input:focus {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--border));
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 9%, transparent);
}
.conv-composer .btn-icon,
.conv-composer .record-direct {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  color: var(--text-muted);
}
.conv-composer .btn-icon:hover,
.conv-composer .record-direct:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
}
.conv-composer .submit-btn {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 15px color-mix(in srgb, var(--brand) 22%, transparent);
}
.conv-composer .submit-btn:hover {
  background: color-mix(in srgb, var(--brand) 84%, #000);
  color: #fff;
  transform: translateY(-1px);
}
.composer-actions {
  width: min(290px, calc(100vw - 24px));
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 14px 30px color-mix(in srgb, #0d2238 22%, transparent);
}
.composer-action {
  min-height: 42px;
  border-radius: 11px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.composer-action:hover {
  background: color-mix(in srgb, var(--brand) 9%, var(--surface-hover));
  color: var(--brand);
  transform: translateX(2px);
}
.upload-progress {
  min-height: 38px;
  padding: 7px 13px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

/* Channels, topics and community surfaces */
.channel-post,
.topic-list-item,
.community-summary {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 5%, transparent);
}
.channel-post {
  margin: 8px 0;
  padding: 13px;
}
.channel-post:hover,
.topic-list-item:hover {
  border-color: color-mix(in srgb, var(--brand) 27%, var(--border));
  transform: translateY(-1px);
}
.channel-post-footer {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.channel-discussion-button,
.channel-react-button {
  min-height: 30px;
  border-radius: 9px;
  color: var(--text-muted);
}
.channel-discussion-button:hover,
.channel-react-button:hover {
  background: color-mix(in srgb, var(--brand) 9%, var(--surface-hover));
  color: var(--brand);
}
.topic-list {
  gap: 8px;
  padding: 13px;
}
.topic-list-item {
  min-height: 66px;
  padding: 11px;
}
.topic-list-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 11%, var(--surface-hover));
  color: var(--brand);
}

/* Contacts, notifications and settings */
.contacts-search {
  padding: 10px 16px 12px;
}
.contacts-search-caption,
.contacts-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.contacts-search-caption strong {
  font-size: 14px;
}
.contacts-search-caption span,
.contacts-list-heading small {
  color: var(--text-muted);
  font-size: 10px;
}
.contacts-actions {
  display: grid;
  gap: 7px;
  padding: 10px 13px;
  border-bottom: 0;
}
.contacts-actions .btn-action {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  text-align: left;
}
.contacts-actions .btn-action:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  background: var(--surface-hover);
  transform: translateX(2px);
}
.contacts-list-heading {
  margin: 7px 16px 5px;
}
.settings-row {
  min-height: 64px;
  border-radius: 15px;
}
.settings-row:hover,
.settings-row:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 27%, var(--border));
  background: var(--surface-hover);
  transform: translateX(2px);
}
.settings-row .settings-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.settings-row strong {
  font-size: 13px;
  font-weight: 750;
}
.settings-row small {
  font-size: 11px;
}

@media (max-width: 767px) {
  .chat-list {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .conv-body {
    padding-bottom: 14px;
  }
  .msg-bubble {
    max-width: 84%;
  }
  .contacts-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contacts-actions .btn-action {
    min-height: 70px;
  }
}

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

/* Final profile layout overrides: keep the identity card compact and readable. */
.profile-hero {
  min-height: 0;
  padding: 0;
  border-radius: 23px;
  overflow: hidden;
}
.profile-cover {
  position: relative;
  inset: auto;
  height: 104px;
}
.profile-cover-caption {
  right: 14px;
  bottom: 11px;
}
.profile-hero-content {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 13px;
  padding: 0 16px 16px;
}
.profile-hero-content .profile-avatar-wrap {
  margin-top: -30px;
}
.profile-hero-content .profile-avatar-wrap .avatar {
  width: 78px;
  height: 78px;
  font-size: 27px;
}
.profile-hero-content .profile-online-dot {
  right: 0;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border-width: 3px;
}
.profile-hero-content .profile-identity {
  padding-top: 12px;
}
.profile-hero-content .profile-identity h1 {
  font-size: clamp(18px, 4.5vw, 22px);
}
.profile-hero-content .profile-hero-bio {
  max-width: 100%;
  margin-top: 7px;
  text-align: left;
}
.profile-actions {
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 8px;
  padding: 0 13px 14px;
}
.profile-actions button {
  min-height: 56px;
  gap: 5px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 7%, transparent);
}
.profile-actions button:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
  background: var(--surface-hover);
}
.profile-actions .profile-action-icon {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 11%, var(--surface-hover));
  color: var(--brand);
}
.profile-actions .profile-action-icon svg {
  width: 17px;
  height: 17px;
}
.profile-actions small {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.profile-actions .profile-action-main {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #fff !important;
}
.profile-actions .profile-action-main .profile-action-icon {
  background: rgb(255 255 255 / 18%);
  color: #fff;
}
.profile-actions .profile-action-main small {
  color: #fff !important;
}
.profile-card.profile-details {
  border-radius: 18px;
}
.profile-section-head > div {
  flex: 1 1 auto;
  min-width: 0;
}
.profile-section-head span {
  display: block;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.profile-detail-row {
  align-items: center;
  min-height: 58px;
  padding: 9px 0;
}
.profile-detail-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.profile-detail-row strong {
  line-height: 1.25;
}
.profile-detail-row span {
  line-height: 1.2;
}
.profile-section-head {
  align-items: center;
}
.profile-section-head > div {
  min-width: 0;
}
.profile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 3px;
}
.profile-tabs button {
  min-width: 0;
  overflow: hidden;
  padding: 9px 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.profile-empty {
  min-height: 148px;
  gap: 7px;
  padding: 22px 14px;
}
.profile-empty-icon {
  display: none;
}
.profile-empty strong {
  font-size: 16px;
}
.profile-empty span {
  max-width: 250px;
  font-size: 12px;
  line-height: 1.35;
}
.profile-empty button {
  margin-top: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 12px;
}

.referral-rewards {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.referral-reward-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 2px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--border));
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 13%, var(--surface)), var(--surface));
}
.referral-reward-highlight.is-locked {
  border-color: var(--app-line-soft);
  background: var(--surface-hover);
}
.referral-reward-highlight > span:not(.referral-reward-icon) {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}
.referral-reward-highlight small {
  color: var(--brand);
  font-size: 10px;
  font-weight: 750;
}
.referral-reward-highlight strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-reward-highlight em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}
.referral-reward-highlight > b {
  color: var(--brand);
  font-size: 15px;
}
.referral-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--app-line-soft);
  border-radius: 14px;
  background: var(--surface);
}
.referral-reward.is-unlocked {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}
.referral-reward.is-locked {
  opacity: .72;
}
.referral-reward-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 13%, var(--surface-hover));
  color: var(--brand);
}
.referral-reward-icon svg {
  width: 18px;
  height: 18px;
}
.referral-reward-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}
.referral-reward-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-reward-copy small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-reward-copy em {
  color: var(--brand);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
.referral-reward.is-locked .referral-reward-copy em {
  color: var(--text-muted);
}
.referral-reward > b {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.admin-referral-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}
.admin-referral-toolbar > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.admin-referral-toolbar strong {
  font-size: 13px;
}
.admin-referral-toolbar small {
  color: var(--text-muted);
  font-size: 11px;
}
.admin-referral-toolbar .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0 13px;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}
.admin-referral-toolbar .btn-action svg {
  width: 17px;
  height: 17px;
}
.admin-referral-toolbar .btn-action:hover {
  background: var(--brand-hover);
}
@media (max-width: 767px) {
  .admin-referral-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-referral-toolbar .btn-action {
    width: 100%;
  }
}

/* Modal behavior: all dialogs appear as centered cards. The previous mobile
   sheet rules were too aggressive for Support, Referrals and settings forms. */
.modal-overlay,
.action-sheet-modal {
  align-items: center !important;
  justify-content: center;
  padding: 18px !important;
}
.modal-overlay .modal-card,
.action-sheet-modal .modal-card {
  width: min(520px, calc(100% - 4px));
  max-height: min(86dvh, 760px);
  margin: 0;
  padding: 0;
  border-radius: 24px;
  transform: none;
  animation: ovinta-modal-appear .22s cubic-bezier(.2, .8, .2, 1) both;
}
.modal-overlay.hide .modal-card {
  animation: ovinta-modal-disappear .16s ease-in both;
}
.action-sheet-modal .modal-card::before {
  display: none;
}
.action-sheet-modal .modal-head {
  min-height: 68px;
  padding: 17px 18px 13px;
}
.action-sheet-modal .modal-head::before {
  display: block;
}
.action-sheet-modal .modal-body {
  max-height: calc(min(86dvh, 760px) - 150px);
  padding: 18px;
}
.action-sheet-modal .modal-actions {
  margin: 0;
  padding: 12px 18px calc(15px + env(safe-area-inset-bottom));
}
.action-sheet-modal .modal-actions .btn-confirm {
  width: auto;
}
@keyframes ovinta-modal-appear {
  from {
    opacity: 0;
    transform: scale(.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ovinta-modal-disappear {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(.97);
  }
}
@media (max-width: 767px) {
  .modal-overlay .modal-card,
  .action-sheet-modal .modal-card {
    width: min(520px, 100%);
    max-height: 88dvh;
    border-radius: 22px;
  }
  .modal-overlay .modal-body,
  .action-sheet-modal .modal-body {
    max-height: calc(88dvh - 150px);
  }
}

/* Settings and profile redesign: keep the dense utility surfaces readable
   while giving identity and publishing their own visual hierarchy. */
.settings-page-head,
.profile-page-head {
  min-height: 82px;
  padding: 14px 16px 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 43%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--brand) 12%));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
}
.settings-page-head > div:first-child,
.profile-page-head > div:first-child {
  display: grid;
  gap: 3px;
}
.settings-page-head strong,
.profile-page-head strong {
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.settings-page-head small,
.profile-page-head small {
  color: var(--text-muted);
  font-size: 11px;
}
.settings-page-head .btn-icon,
.profile-page-head .btn-icon {
  width: 36px;
  height: 36px;
}
.settings-scroll {
  padding: 0 0 28px;
}
.settings-profile-large {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  margin: 15px 16px 14px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--brand) 19%, transparent), transparent 37%),
    var(--app-surface-raised);
}
.settings-profile-large:hover {
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--brand) 23%, transparent), transparent 37%),
    var(--app-surface-soft);
}
.settings-profile-large > .avatar {
  width: 55px;
  height: 55px;
  border: 3px solid color-mix(in srgb, var(--surface) 84%, var(--brand) 16%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 16%, transparent);
}
.settings-profile-large .profile-info {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.settings-profile-large .profile-name {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-profile-large .profile-user {
  font-size: 12px;
}
.settings-profile-hint {
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
}
.settings-profile-large .settings-chevron {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 25px;
  line-height: 1;
}
.settings-section-label {
  padding: 7px 18px 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.settings-section {
  margin: 0 16px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  border-radius: 18px;
  background: var(--app-surface-raised);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 6%, transparent);
}
.settings-row {
  min-height: 67px;
  padding: 10px 13px;
  gap: 11px;
  border-bottom: 1px solid var(--app-line-soft);
}
.settings-row:last-child {
  border-bottom: 0;
}
.settings-row:hover {
  padding-left: 17px;
}
.settings-row > span:not(.settings-icon) {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.settings-row strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-row small {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-row i {
  flex: 0 0 auto;
  font-size: 21px;
}
.settings-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
}
.settings-icon svg {
  width: 17px;
  height: 17px;
}
.settings-row.danger-row {
  color: #e53935;
}
.settings-row.danger-row .settings-icon {
  background: color-mix(in srgb, #e53935 12%, var(--surface));
}

.profile-page-head {
  min-height: 76px;
}
.profile-page {
  padding: 10px 0 32px;
}
.profile-hero {
  margin-bottom: 13px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.profile-hero.profile-reward-style,
.user-profile-hero.profile-reward-style {
  border-color: color-mix(in srgb, #b98522 42%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, #f3c969 16%, var(--surface)), var(--surface));
}
.profile-reward-style .profile-cover {
  background: linear-gradient(120deg, #8c5a16, #e2ad45 48%, #fff0ae);
}
.profile-reward-style .profile-identity {
  position: relative;
}
.profile-reward-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 7px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, #b98522 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #f3c969 18%, var(--surface));
  color: #9a691d;
  font-size: 10px;
  font-weight: 750;
}
.profile-cover-caption {
  position: absolute;
  right: 15px;
  bottom: 13px;
  z-index: 1;
  padding: 5px 8px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: rgb(15 31 47 / 20%);
  color: rgb(255 255 255 / 84%);
  font-size: 10px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}
.profile-hero-content {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  padding: 0 18px 18px;
}
.profile-hero-content .profile-avatar-wrap {
  margin-top: -37px;
}
.profile-hero-content .profile-avatar-wrap .avatar {
  width: 90px;
  height: 90px;
  border: 4px solid var(--surface);
  box-shadow: 0 8px 20px rgb(18 37 55 / 22%);
}
.profile-hero-content .profile-online-dot {
  right: 1px;
  bottom: 3px;
  width: 17px;
  height: 17px;
  border: 3px solid var(--surface);
}
.profile-hero-content .profile-identity {
  min-width: 0;
  align-items: flex-start;
  padding-top: 14px;
  text-align: left;
}
.profile-hero-content .profile-identity h1 {
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 3px;
  overflow: hidden;
  font-size: clamp(19px, 4.8vw, 23px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.profile-status-row .profile-online {
  margin-top: 0;
}
.profile-status-row .profile-reward-label {
  margin-top: 0;
  padding: 3px 7px;
  font-size: 9px;
}
.profile-hero-content .profile-hero-bio {
  display: -webkit-box;
  margin: 9px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.profile-action-main {
  color: #fff !important;
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}
.profile-action-main .profile-action-icon {
  color: #fff !important;
}
.ambassador-badge {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 2px;
  border: 2px solid #fff1b8;
  border-radius: 50%;
  background: linear-gradient(145deg, #f4c75b, #a86d1d);
  box-shadow: 0 1px 4px rgb(135 87 15 / 28%);
  color: #fff8d6;
  font-size: 10px;
  line-height: 1;
  vertical-align: 2px;
}
.profile-cover {
  overflow: hidden;
}
.profile-identity h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 23px;
}
.profile-identity h1 .verified-badge {
  width: 16px;
  height: 16px;
}
.profile-username {
  font-size: 12px;
}
.profile-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #2eaa78 10%, transparent);
  font-size: 10px;
  font-weight: 700;
}
.profile-online i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2eaa78;
}
.profile-actions {
  padding: 0 13px 15px;
}
.profile-actions button {
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background: var(--surface);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 6%, transparent);
}
.profile-actions button:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  background: var(--app-surface-soft);
}
.profile-card.profile-details {
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 6%, transparent);
}
.profile-detail-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
}
.profile-section-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.profile-section-head span {
  color: var(--text-muted);
  font-size: 11px;
}
.profile-add-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
}
.profile-add-top:hover {
  background: var(--brand);
  color: #fff;
}
.profile-add-top svg {
  width: 15px;
  height: 15px;
}
.profile-tabs {
  margin-left: 13px;
  margin-right: 13px;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background: var(--surface);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 5%, transparent);
}
.profile-tabs button {
  font-size: 11px;
  font-weight: 750;
}
.publication-list {
  min-height: 160px;
}
.publication-card {
  margin: 0 13px;
  border: 1px solid color-mix(in srgb, var(--brand) 11%, var(--border));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 5%, transparent);
}

@media (min-width: 768px) {
  .settings-page-head,
  .profile-page-head {
    padding-left: 20px;
    padding-right: 20px;
  }
  .settings-profile-large {
    margin-left: 20px;
    margin-right: 20px;
  }
  .settings-section-label {
    padding-left: 22px;
    padding-right: 22px;
  }
  .settings-section {
    margin-left: 20px;
    margin-right: 20px;
  }
  .profile-page {
    padding-left: 7px;
    padding-right: 7px;
  }
}

@media (max-width: 767px) {
  .settings-page-head,
  .profile-page-head {
    min-height: 76px;
    padding: 12px 13px 10px;
  }
  .settings-profile-large {
    margin: 13px 13px 12px;
  }
  .settings-section-label {
    padding-left: 15px;
    padding-right: 15px;
  }
  .settings-section {
    margin-left: 13px;
    margin-right: 13px;
  }
  .settings-row:hover {
    padding-left: 13px;
  }
  .profile-page {
    padding-top: 8px;
  }
  .profile-section-head {
    padding-left: 13px;
    padding-right: 13px;
  }
  .profile-section-head strong {
    font-size: 17px;
  }
  .profile-add-top span {
    display: none;
  }
  .profile-add-top {
    width: 32px;
    justify-content: center;
    padding: 0;
  }
}

.support-intro,
.referral-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-hover) 78%, var(--brand) 22%);
}
.support-intro-icon,
.referral-hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--app-accent-2, var(--brand)));
}
.support-intro-icon svg,
.referral-hero-icon svg {
  width: 20px;
  height: 20px;
}
.support-intro strong,
.support-intro small,
.referral-hero strong,
.referral-hero small {
  display: block;
}
.support-intro strong,
.referral-hero strong {
  color: var(--text);
  font-size: 14px;
}
.support-intro small,
.referral-hero small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.support-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.support-action,
.support-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--app-line-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease);
}
.support-action:hover,
.support-list-item:hover {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: var(--surface-hover);
  transform: translateX(2px);
}
.support-action > svg,
.support-list-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.support-action span,
.support-list-item > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.support-action strong,
.support-action small,
.support-list-item strong,
.support-list-item small,
.support-list-item em {
  display: block;
}
.support-action strong,
.support-list-item strong {
  font-size: 13px;
}
.support-action small,
.support-list-item small,
.support-list-item em {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}
.support-action > b,
.support-list-item > b {
  color: var(--text-muted);
  font-size: 22px;
  font-weight: 400;
}
.support-section-title {
  margin: 18px 0 8px;
  color: var(--brand);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.support-list {
  display: grid;
  gap: 7px;
}
.support-list-item {
  padding: 10px;
}
.support-list-item-static {
  cursor: default;
}
.support-list-item-static:hover {
  transform: none;
}
.support-list-icon-bug {
  color: #e4a13a;
  background: color-mix(in srgb, #e4a13a 13%, transparent);
}
.support-empty,
.support-closed {
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.support-ticket-meta {
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 650;
}
.support-thread {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px;
}
.support-message {
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--surface-hover);
}
.support-message.staff {
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.support-message strong,
.support-message small {
  color: var(--text-muted);
  font-size: 11px;
}
.support-message p {
  margin: 5px 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.referral-hero {
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.referral-stats div {
  padding: 11px 6px;
  border: 1px solid var(--app-line-soft);
  border-radius: 13px;
  background: var(--surface-hover);
  text-align: center;
}
.referral-stats strong,
.referral-stats small {
  display: block;
}
.referral-stats strong {
  color: var(--brand);
  font-size: 19px;
}
.referral-stats small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 10px;
}
.referral-level-note {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.referral-events {
  display: grid;
  gap: 7px;
}
.referral-events > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-hover);
  font-size: 12px;
}
.referral-events strong {
  color: var(--brand);
}
.referral-events strong.is-negative { color: #d87373; }
.referral-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: -2px 0 14px;
  padding: 4px;
  border-radius: 13px;
  background: var(--surface-hover);
}
.referral-switcher button {
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
}
.referral-switcher button.is-active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 2px 8px rgb(25 32 52 / 8%);
}
.referral-shop-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}
.referral-shop-heading > div { display: grid; gap: 4px; }
.referral-shop-heading strong { font-size: 14px; }
.referral-shop-heading small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.referral-shop-heading > b {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
  font-size: 12px;
}
.referral-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.referral-shop-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--app-line-soft);
  border-radius: 17px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--shop-accent, var(--brand)) 12%, var(--surface)), var(--surface));
}
.referral-shop-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--shop-accent, var(--brand)) 74%, #fff), color-mix(in srgb, var(--shop-accent, var(--brand)) 32%, #fff));
}
.referral-shop-art::before, .referral-shop-art::after, .referral-shop-art i, .referral-shop-art b {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #fff;
  content: '';
  opacity: .36;
}
.referral-shop-art::before { width: 52px; height: 52px; top: -18px; right: -8px; }
.referral-shop-art::after { width: 18px; height: 18px; bottom: 12px; left: 12px; }
.referral-shop-art i { width: 7px; height: 7px; top: 20px; left: 20px; }
.referral-shop-art b { width: 11px; height: 11px; right: 25px; bottom: 20px; }
.referral-shop-art > span {
  position: relative;
  z-index: 1;
  font-size: 43px;
  filter: drop-shadow(0 7px 7px rgb(40 30 80 / 17%));
}
.referral-shop-copy { display: grid; min-width: 0; gap: 3px; }
.referral-shop-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-shop-copy small {
  min-height: 29px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}
.referral-shop-copy em {
  color: var(--brand);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.referral-buy-button {
  width: 100%;
  min-height: 31px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.referral-buy-button:disabled {
  background: var(--surface-hover);
  color: var(--text-muted);
  cursor: default;
}
.referral-shop-closed {
  padding: 26px 16px;
  border: 1px dashed var(--border);
  border-radius: 15px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.accent-violet { --shop-accent: #9c6fe0; }
.accent-diamond { --shop-accent: #4fa7e4; }
.accent-sparkle { --shop-accent: #b16ad5; }
.accent-butterfly { --shop-accent: #77a7dc; }
.accent-rainbow-reaction { --shop-accent: #d778c7; }
.admin-referral-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.admin-referral-toolbar-actions .btn-action { margin: 0; }
.admin-setting-toggle, .admin-referral-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--app-line-soft);
  border-radius: 13px;
  background: var(--surface-hover);
}
.admin-setting-toggle + .admin-setting-toggle, .admin-referral-item + .admin-referral-item { margin-top: 7px; }
.admin-setting-toggle input, .admin-referral-item input { accent-color: var(--brand); }
.admin-setting-toggle span, .admin-referral-item span { display: grid; flex: 1; gap: 3px; }
.admin-setting-toggle strong, .admin-referral-item strong { font-size: 12px; }
.admin-setting-toggle small, .admin-referral-item small { color: var(--text-muted); font-size: 10px; }
.admin-referral-items { display: grid; max-height: 250px; overflow: auto; gap: 7px; }
.settings-icon.support { background: #398edc; }
.settings-icon.referrals { background: #b16ad5; }

@media (max-width: 380px) {
  .modal-card { width: calc(100% - 20px); padding-left: 16px; padding-right: 16px; }
  .theme-grid { grid-template-columns: 1fr; }
  .action-sheet-modal .modal-actions { margin-left: -16px; margin-right: -16px; }
}

/* Ovinta final polish: a quieter, more intentional hierarchy across every screen. */
:root {
  --app-line-soft: color-mix(in srgb, var(--border) 78%, transparent);
  --app-glow: color-mix(in srgb, var(--brand) 18%, transparent);
  --app-surface-raised: color-mix(in srgb, var(--surface) 92%, var(--brand) 8%);
}
*[hidden] {
  display: none !important;
}

html[data-theme] body {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 28%),
    var(--bg-color);
}

html[data-theme] #root {
  background: var(--bg-color);
  box-shadow: 0 0 80px color-mix(in srgb, var(--brand) 10%, transparent);
}

/* Auth is the first brand moment, not a generic form. */
html[data-theme] .auth-wrapper,
.auth-wrapper {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--brand, #5146d9) 22%, transparent), transparent 32%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--app-accent-2, #26b9aa) 18%, transparent), transparent 34%),
    var(--bg-color, #0e1621);
}
.auth-wrapper::before { border-color: color-mix(in srgb, var(--brand, #5146d9) 18%, transparent); }
.auth-wrapper::after { border-color: color-mix(in srgb, var(--app-accent-2, #26b9aa) 16%, transparent); }
.auth-card {
  width: min(432px, calc(100% - 28px));
  padding: 34px 28px 27px;
  border-color: color-mix(in srgb, var(--brand, #5146d9) 28%, var(--border, #2a3853));
  border-radius: 30px;
  box-shadow: 0 30px 90px color-mix(in srgb, #07111f 35%, transparent), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.auth-card::before {
  height: 4px;
  background: linear-gradient(90deg, var(--brand, #5146d9), var(--app-accent-2, #26b9aa));
}
.auth-logo {
  width: auto;
  height: auto;
  gap: 9px;
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f5f7ff;
  -webkit-text-fill-color: initial;
}
.auth-logo-glyph {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand, #5146d9), var(--app-accent-2, #26b9aa));
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand, #5146d9) 28%, transparent);
}
.auth-logo-word {
  color: #f5f7ff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.auth-card h1 {
  font-size: clamp(24px, 6vw, 28px);
  letter-spacing: -.035em;
}
.auth-subtitle {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}
.auth-card .input-group { margin-top: 18px; }
.auth-card input:not([type="checkbox"]) {
  min-height: 51px;
  border-radius: 15px;
  box-shadow: 0 2px 0 rgba(255,255,255,.02) inset;
}
.auth-card input:not([type="checkbox"]):focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand, #5146d9) 17%, transparent); }
.auth-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 6px;
}
.auth-card .btn-primary {
  min-height: 52px;
  border-radius: 16px;
  font-size: 15px;
  letter-spacing: -.01em;
}
.auth-card .btn-link {
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  transition: background .18s ease, color .18s ease;
}
.auth-card .btn-link:hover { background: color-mix(in srgb, var(--brand, #5146d9) 10%, transparent); }

/* Headers and navigation read as one surface instead of separate bars. */
html[data-theme] .mobile-page-head,
html[data-theme] .chat-topbar,
html[data-theme] .master-header {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--brand) 8%));
  border-bottom-color: var(--app-line-soft);
}
.mobile-page-head h1,
.master-title,
.chat-brand strong {
  letter-spacing: -.04em;
}
.mobile-page-head h1,
.master-title { font-size: 23px; }
.chat-topbar { min-height: 68px; }
.chat-brand { font-weight: 700; }
.chat-brand .avatar {
  border: 2px solid color-mix(in srgb, var(--brand) 22%, var(--surface));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 22%, transparent);
}
.btn-icon {
  transition: background .18s ease, color .18s ease, transform .18s var(--app-ease);
}
.btn-icon:active { transform: scale(.92); }

.bottom-nav {
  padding-left: 11px;
  padding-right: 11px;
  border-top-color: var(--app-line-soft);
  box-shadow: 0 -14px 34px color-mix(in srgb, #10233d 12%, transparent);
}
.nav-item {
  min-height: 53px;
  border-radius: 17px;
  font-weight: 600;
}
.nav-item.active {
  box-shadow: 0 5px 16px color-mix(in srgb, var(--brand) 13%, transparent);
}
.nav-item.active::after { bottom: 3px; }

/* Search and filters feel like controls, not decoration. */
.search-bar {
  min-height: 42px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-hover) 88%, var(--brand) 12%);
}
.chat-search-header .search-bar { border-radius: 16px; }
.search-bar:focus-within {
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
.chat-filters { gap: 7px; }
.filter-btn {
  border: 1px solid transparent;
  font-weight: 600;
}
.filter-btn.active { box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 18%, transparent); }

/* Lists get a stable rhythm and a softer active state in every theme. */
.chat-list { padding-top: 6px; }
.chat-item {
  min-height: 78px;
  border-bottom: 1px solid var(--app-line-soft);
  transition: background .18s ease, transform .18s var(--app-ease);
}
.chat-item:hover { transform: translateX(2px); }
.chat-item.active {
  margin: 3px 8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 17px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 17%, transparent);
}
.chat-item.active + .chat-item { border-top-color: transparent; }
.chat-item .avatar {
  border: 2px solid color-mix(in srgb, var(--surface) 76%, var(--brand) 24%);
}
.chat-title { font-size: 15.5px; }
.chat-preview { line-height: 1.25; }
.badge {
  min-width: 22px;
  height: 22px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 22%, transparent);
}
.floating-new-chat {
  width: 59px;
  height: 59px;
  border: 3px solid color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 15px 30px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Conversation surface. */
.conv-header {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 94%, var(--brand) 6%));
  border-bottom-color: var(--app-line-soft);
}
.conv-body {
  background-color: var(--bg-color);
  background-image:
    radial-gradient(circle at 18px 18px, color-mix(in srgb, var(--brand) 10%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46px 39px, color-mix(in srgb, var(--brand) 7%, transparent) 0 1px, transparent 1.5px);
}
.msg-bubble {
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--brand) 30%);
  border-radius: 17px 17px 17px 6px;
  box-shadow: 0 5px 15px color-mix(in srgb, #17324d 10%, transparent);
}
.msg-bubble.mine {
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 17px 17px 6px 17px;
}
.msg-bubble:hover { transform: translateY(-1px); }
.conv-composer {
  gap: 7px;
  border-top-color: var(--app-line-soft);
  box-shadow: 0 -12px 26px color-mix(in srgb, #17324d 9%, transparent);
}
.conv-composer input,
.conv-composer textarea {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  border-radius: 17px;
}
.conv-composer input:focus,
.conv-composer textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 11%, transparent);
}
.submit-btn {
  background: color-mix(in srgb, var(--brand) 11%, transparent);
}

/* Settings, profile and contact screens share the same card language. */
.settings-profile-large,
.settings-section,
.contacts-actions,
.profile-card.profile-details,
.publication-card {
  border: 1px solid var(--app-line-soft);
  box-shadow: 0 9px 24px color-mix(in srgb, #19334f 8%, transparent);
}
.settings-profile-large {
  border-radius: 22px;
  padding: 19px;
}
.settings-profile-large .avatar { box-shadow: 0 9px 20px color-mix(in srgb, #071a2c 22%, transparent); }
.settings-section,
.contacts-actions { border-radius: 20px; }
.settings-row {
  min-height: 70px;
  transition: background .18s ease, padding-left .18s var(--app-ease);
}
.settings-row:hover { padding-left: 19px; }
.settings-icon {
  border-radius: 12px;
  box-shadow: 0 5px 12px rgba(0,0,0,.1);
}
.profile-hero {
  box-shadow: 0 16px 32px color-mix(in srgb, var(--brand) 18%, transparent);
}
.profile-actions button {
  border-radius: 18px;
  transition: transform .18s var(--app-ease), box-shadow .18s ease, background .18s ease;
}
.profile-actions button:hover { box-shadow: 0 9px 20px color-mix(in srgb, var(--brand) 13%, transparent); }
.profile-tabs { box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 8%, transparent); }

/* Empty/loading/error states have a little more presence without becoming loud. */
html[data-theme] .ui-state {
  min-height: 210px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 14%, var(--border));
  box-shadow: 0 10px 24px color-mix(in srgb, #1a3550 6%, transparent);
}
html[data-theme] .ui-state-icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 12%, transparent);
}

/* Admin tables stay dense, but their surrounding workspace feels deliberate. */
.admin-body { padding: 20px; }
.admin-stats { gap: 14px; }
.admin-stat-card {
  min-height: 104px;
  border-radius: 18px;
  border-color: var(--app-line-soft);
}
.admin-stat-value { letter-spacing: -.04em; }
.admin-action-list,
.admin-table-wrap { border-color: var(--app-line-soft); }
.admin-table th {
  background: color-mix(in srgb, var(--surface-hover) 84%, var(--brand) 16%);
}

@media (min-width: 768px) {
  #root {
    width: min(100%, 680px);
    max-width: 680px;
    border-left: 1px solid var(--app-line-soft);
    border-right: 1px solid var(--app-line-soft);
  }
  .master-pane { width: 100%; }
}

@media (max-width: 767px) {
  .chat-item.active { margin-left: 6px; margin-right: 6px; }
  .settings-profile-large { margin-top: 9px; }
  .admin-body { padding: 15px; }
}

/* Chat workspace redesign: a quieter inbox, stronger hierarchy, and a
   conversation surface that feels like a focused workspace rather than a
   stack of utility bars. */
.chat-topbar {
  min-height: 82px;
  padding: 14px 16px 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 43%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--brand) 12%));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
}
.chat-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}
.chat-brand-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.chat-brand-copy strong {
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.chat-brand-copy small {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.chat-top-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-new-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.chat-new-top svg {
  width: 16px;
  height: 16px;
}
.chat-new-top:hover {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 23%, transparent);
}
.chat-new-top:active {
  transform: scale(.96);
}
.chat-search-header {
  display: grid;
  gap: 9px;
  height: auto;
  padding: 15px 16px 13px;
  background: var(--surface);
}
.chat-search-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.chat-search-caption strong {
  font-size: 14px;
  letter-spacing: -.01em;
}
.chat-search-caption span {
  color: var(--text-muted);
  font-size: 11px;
}
.chat-search-header .search-bar {
  height: 40px;
  border-radius: 13px;
  background: var(--surface-hover);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 65%, transparent);
}
.chat-search-header .search-bar:focus-within {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
  box-shadow: 0 0 0 4px var(--app-focus-ring);
}
.chat-filters {
  display: flex;
  gap: 6px;
  padding: 13px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-filters::-webkit-scrollbar,
.chat-utility-filters::-webkit-scrollbar {
  display: none;
}
.filter-btn {
  min-height: 31px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.filter-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.filter-btn.active {
  border-color: color-mix(in srgb, var(--brand) 18%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
  box-shadow: none;
}
.chat-utility-filters {
  display: flex;
  gap: 7px;
  padding: 8px 16px 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.utility-filter-btn {
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.utility-filter-btn:hover,
.utility-filter-btn.active {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  color: var(--brand);
}
.stories-list {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--app-line-soft);
}
.chat-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px 6px;
}
.chat-list-heading span {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.chat-list-heading small {
  color: var(--text-muted);
  font-size: 10px;
}
.chat-list {
  padding: 3px 8px 24px;
}
.chat-item {
  min-height: 78px;
  margin: 3px 0;
  padding: 10px 9px;
  border: 1px solid transparent;
  border-radius: 15px;
  gap: 11px;
}
.chat-item:hover {
  border-color: color-mix(in srgb, var(--brand) 14%, var(--border));
  background: var(--surface-hover);
  transform: none;
}
.chat-item.active {
  margin: 3px 0;
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  box-shadow: inset 3px 0 0 var(--brand);
}
.chat-item-avatar {
  position: relative;
  flex: 0 0 50px;
}
.chat-item .avatar {
  width: 50px;
  height: 50px;
  border: 0;
  box-shadow: 0 6px 13px color-mix(in srgb, var(--brand) 12%, transparent);
}
.chat-unread-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: #31b781;
}
.chat-item-info {
  gap: 4px;
}
.chat-item-top {
  min-width: 0;
}
.chat-title {
  font-size: 14px;
  font-weight: 800;
}
.chat-time {
  font-size: 10px;
  font-weight: 650;
}
.chat-item-bottom {
  min-width: 0;
}
.chat-preview {
  font-size: 12px;
  line-height: 1.35;
}
.chat-item-context {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 12px;
  color: var(--text-muted);
  font-size: 10px;
}
.chat-item-context i {
  font-style: normal;
  opacity: .55;
}
.chat-item.active .chat-item-context {
  color: var(--brand);
}
.badge {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 8px;
  text-align: center;
  font-size: 10px;
}
.floating-new-chat {
  display: none !important;
}

.detail-pane {
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 32%),
    var(--bg-color);
}
.conv-header {
  min-height: 76px;
  padding: 0 20px;
  border-bottom-color: color-mix(in srgb, var(--brand) 12%, var(--border));
  box-shadow: 0 5px 18px color-mix(in srgb, var(--brand) 6%, transparent);
}
.conv-peer {
  gap: 11px;
  padding: 5px 8px 5px 5px;
}
.conv-peer .avatar {
  width: 44px;
  height: 44px;
  box-shadow: 0 6px 15px color-mix(in srgb, var(--brand) 12%, transparent);
}
.conv-title {
  font-size: 16px;
  font-weight: 800;
}
.conv-status {
  margin-top: 3px;
  font-size: 11px;
}
.conv-body {
  gap: 9px;
  padding: 24px clamp(16px, 5vw, 64px);
  background-color: color-mix(in srgb, var(--bg-color) 90%, var(--brand) 10%);
  background-image:
    radial-gradient(circle at 20px 20px, color-mix(in srgb, var(--brand) 10%, transparent) 0 1px, transparent 1.5px),
    linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--brand) 2%, transparent) 48% 52%, transparent 52%);
  background-size: 34px 34px, 120px 120px;
}
.msg-bubble {
  max-width: min(680px, 82%);
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 17px;
  box-shadow: 0 7px 20px color-mix(in srgb, #0b2438 6%, transparent);
}
.msg-bubble.mine {
  border-color: color-mix(in srgb, var(--brand) 12%, transparent);
}
.conv-composer {
  margin: 12px clamp(12px, 4vw, 48px) 18px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 19px;
  background: var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 10%, transparent);
}
.conv-composer textarea,
.conv-composer input {
  min-height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 13px;
  background: var(--surface-hover);
}
.conv-composer .btn-icon,
.conv-composer .record-direct {
  width: 36px;
  height: 36px;
}
.channel-readonly-bar {
  margin: 10px clamp(12px, 4vw, 48px) 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 16px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 7%, transparent);
}

@media (min-width: 768px) {
  #root {
    width: min(100%, 1440px);
    max-width: 1440px;
  }
  .master-pane {
    width: 390px;
    border-right: 1px solid color-mix(in srgb, var(--brand) 11%, var(--border));
  }
}

@media (max-width: 767px) {
  .chat-topbar {
    min-height: 76px;
    padding: 12px 13px 10px;
  }
  .chat-brand-copy small {
    display: none;
  }
  .chat-new-top {
    width: 34px;
    justify-content: center;
    padding: 0;
  }
  .chat-new-top span {
    display: none;
  }
  .chat-search-header {
    padding: 13px 13px 11px;
  }
  .chat-filters,
  .chat-utility-filters {
    padding-left: 13px;
    padding-right: 13px;
  }
  .chat-list-heading {
    padding-left: 15px;
    padding-right: 15px;
  }
  .conv-header {
    min-height: 68px;
    padding: 0 10px;
  }
  .conv-body {
    padding: 18px 12px;
  }
  .msg-bubble {
    max-width: 90%;
  }
  .conv-composer {
    margin: 8px 9px 10px;
  }
  .channel-readonly-bar {
    margin: 8px 9px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-item:hover, .settings-row:hover { transform: none; }
}

/* Contacts workspace redesign: separate discovery actions from results and
   make each result explain what will happen before it is opened. */
.contacts-head {
  min-height: 82px;
  padding: 14px 16px 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 43%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--brand) 12%));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
}
.contacts-head > div {
  display: grid;
  gap: 3px;
}
.contacts-head strong {
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.contacts-head small {
  color: var(--text-muted);
  font-size: 11px;
}
.contacts-head .btn-icon {
  width: 36px;
  height: 36px;
}
.contacts-search {
  display: grid;
  gap: 9px;
  height: auto;
  padding: 15px 16px 13px;
  background: var(--surface);
}
.contacts-search-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.contacts-search-caption strong {
  font-size: 14px;
  letter-spacing: -.01em;
}
.contacts-search-caption span {
  color: var(--text-muted);
  font-size: 11px;
}
.contacts-search .search-bar {
  height: 40px;
  border-radius: 13px;
  background: var(--surface-hover);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 65%, transparent);
}
.contacts-search .search-bar:focus-within {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
  box-shadow: 0 0 0 4px var(--app-focus-ring);
}
.contacts-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 16px 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.contacts-actions .btn-action {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 82px;
  gap: 9px;
  padding: 12px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 11%, var(--border));
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 6%, transparent);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.contacts-actions .btn-action:hover {
  padding-left: 10px;
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 11%, transparent);
  transform: translateY(-2px);
}
.contacts-actions .btn-action:active {
  transform: translateY(0) scale(.98);
}
.contact-action-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.contact-action-copy strong {
  font-size: 12px;
  line-height: 1.2;
}
.contact-action-copy small {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
}
.quick-action-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 6px 13px rgba(20, 45, 70, .13);
}
.quick-action-icon svg {
  width: 17px;
  height: 17px;
}
.contacts-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 17px 4px;
}
.contacts-list-heading span {
  font-size: 12px;
  font-weight: 800;
}
.contacts-list-heading small {
  color: var(--text-muted);
  font-size: 10px;
}
.contacts-list-heading + .chat-list {
  padding-top: 2px;
}
.contacts-list-heading + .chat-list > .empty-list {
  margin-top: 8px;
}
.contacts-actions + .empty-list {
  margin-top: 8px;
}
.contacts-list .list-section-title {
  justify-content: flex-start;
  padding: 15px 17px 7px;
  text-transform: none;
  letter-spacing: .01em;
}
.contacts-list .list-section-title small {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.contacts-list .list-section-title::after {
  display: none;
}
.contact-result-item {
  min-height: 74px;
  padding: 9px;
}
.contact-result-item:hover {
  transform: translateX(2px);
}
.contact-result-avatar {
  position: relative;
  flex: 0 0 48px;
}
.contact-result-avatar .avatar {
  width: 48px;
  height: 48px;
  border: 0;
}
.contact-type-mark,
.contact-status-mark {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}
.contact-status-mark {
  background: #31b781;
  font-size: 10px;
}
.contact-result-action {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 10px;
  font-weight: 750;
}
.contact-result-item .chat-item-context {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.contact-result-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}
.contact-write,
.contact-more {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-muted);
}
.contact-write:hover,
.contact-more:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
}
.contact-write svg,
.contact-more svg {
  width: 17px;
  height: 17px;
}

@media (min-width: 768px) {
  .contacts-head,
  .contacts-search,
  .contacts-actions,
  .contacts-list-heading {
    padding-left: 20px;
    padding-right: 20px;
  }
  .contacts-actions {
    margin-left: 20px;
    margin-right: 20px;
  }
  .contacts-list-heading {
    padding-left: 21px;
    padding-right: 21px;
  }
}

@media (max-width: 767px) {
  .contacts-head {
    min-height: 76px;
    padding: 12px 13px 10px;
  }
  .contacts-search {
    padding: 13px 13px 11px;
  }
  .contacts-actions {
    margin: 13px 13px 10px;
  }
  .contacts-actions .btn-action {
    min-height: 78px;
    padding: 11px 9px;
  }
  .contacts-actions .btn-action:hover {
    padding-left: 9px;
  }
  .contacts-list-heading {
    padding-left: 15px;
    padding-right: 15px;
  }
  .contact-result-item:hover {
    transform: none;
  }
  .contact-result-action {
    display: none;
  }
  .contact-result-actions {
    gap: 0;
  }
}

/* Authenticated screens: finish the shared component language. */
.quick-create-icon svg,
.composer-action svg,
.record-direct svg,
.voice-icon svg,
.msg-meta svg,
.profile-detail-icon svg,
.profile-empty-icon svg,
.profile-action-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}
.quick-create-icon svg { width: 20px; height: 20px; }
.composer-action {
  color: var(--text);
}
.composer-action > svg {
  flex: 0 0 20px;
  color: var(--brand);
}
.record-direct svg { width: 20px; height: 20px; }
.voice-icon svg { width: 16px; height: 16px; }
.msg-meta {
  align-items: center;
}
.msg-meta svg {
  width: 12px;
  height: 12px;
  color: var(--brand);
}
.quick-create-icon {
  display: grid;
  place-items: center;
}
.contact-write svg,
.contact-more svg {
  width: 18px;
  height: 18px;
}

.list-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 17px;
  padding-bottom: 8px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.list-section-title::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--app-line-soft);
}
.contacts-actions {
  margin-top: 10px;
  background: var(--surface);
}
.contacts-actions .btn-action {
  min-height: 68px;
  font-weight: 650;
  transition: background .18s ease, padding-left .18s var(--app-ease);
}
.contacts-actions .btn-action:hover {
  padding-left: 20px;
}
.quick-action-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  margin-right: 1px;
  border-radius: 12px;
  box-shadow: 0 6px 13px rgba(20, 45, 70, .13);
}
.quick-action-icon svg { width: 19px; height: 19px; }

.profile-page {
  padding-bottom: 34px;
}
.profile-page-kicker {
  letter-spacing: -.04em;
}
.profile-head-actions .btn-icon svg {
  width: 21px;
  height: 21px;
}
.profile-detail-icon {
  display: grid;
  place-items: center;
}
.profile-card.profile-details .profile-detail-row {
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
}
.profile-card.profile-details .profile-detail-row > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.profile-detail-icon svg {
  width: 17px;
  height: 17px;
}

/* Final polish: a calm, tactile layer shared by lists, screens and dialogs. */
:root {
  --app-focus-ring: color-mix(in srgb, var(--brand) 22%, transparent);
  --app-surface-raised: color-mix(in srgb, var(--surface) 92%, var(--brand) 8%);
  --app-surface-soft: color-mix(in srgb, var(--surface-hover) 84%, var(--brand) 16%);
}

.chat-topbar {
  min-height: 72px;
  padding: 10px 14px 8px;
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 42%),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 84%, var(--brand) 16%));
  border-bottom-color: color-mix(in srgb, var(--brand) 18%, var(--border));
}
.chat-brand {
  gap: 10px;
  letter-spacing: -.03em;
}
.chat-brand strong {
  font-size: 18px;
  font-weight: 800;
}
.chat-brand .avatar {
  width: 38px;
  height: 38px;
  border: 2px solid color-mix(in srgb, var(--surface) 72%, var(--brand) 28%);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 18%, transparent);
}
.chat-search-header {
  padding: 8px 13px 10px;
  background: var(--surface);
}
.chat-search-header .search-bar {
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--brand) 20%);
  background: var(--app-surface-soft);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--brand) 7%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.chat-search-header .search-bar:focus-within {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--app-focus-ring), 0 7px 20px color-mix(in srgb, var(--brand) 10%, transparent);
}
.chat-filters {
  padding: 11px 13px 4px;
  gap: 7px;
  background: var(--surface);
}
.filter-btn {
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--app-surface-soft);
  font-size: 12px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--app-ease);
}
.filter-btn:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  color: var(--brand);
}
.filter-btn:active,
.utility-filter-btn:active {
  transform: scale(.96);
}
.filter-btn.active {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 23%, transparent);
}
.chat-utility-filters {
  padding: 7px 13px 5px;
}
.utility-filter-btn {
  min-height: 32px;
  border-radius: 11px;
  background: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--app-ease);
}
.utility-filter-btn:hover {
  background: var(--app-surface-soft);
}
.stories-list {
  padding-top: 9px;
  padding-bottom: 11px;
  background: var(--surface);
}
.chat-list {
  padding: 8px 6px 18px;
}
.chat-item {
  min-height: 76px;
  margin: 2px 0;
  padding: 9px 9px;
  border: 1px solid transparent;
  border-radius: 16px;
  border-bottom: 0;
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease), box-shadow .18s ease;
}
.chat-item:hover {
  border-color: color-mix(in srgb, var(--brand) 15%, var(--border));
  background: var(--app-surface-soft);
  transform: translateX(2px);
}
.chat-item.active {
  margin: 3px 0;
  padding-left: 9px;
  padding-right: 9px;
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--text);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 12%, transparent);
}
.chat-item.active .chat-preview,
.chat-item.active .chat-time,
.chat-item.active svg {
  color: var(--text-muted);
}
.chat-item .avatar {
  width: 50px;
  height: 50px;
  border: 2px solid color-mix(in srgb, var(--surface) 70%, var(--brand) 30%);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 12%, transparent);
}
.chat-item-info {
  gap: 5px;
}
.chat-title {
  font-size: 14px;
  font-weight: 750;
}
.chat-preview {
  font-size: 12.5px;
  line-height: 1.35;
}
.badge {
  background: var(--brand);
  color: #fff;
}
.empty-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(330px, calc(100% - 40px));
  padding: 28px 24px;
  border: 1px solid color-mix(in srgb, var(--brand) 17%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 82%, var(--brand) 18%);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand) 10%, transparent);
  text-align: center;
}
.empty-detail-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--app-accent-2, var(--brand)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 24%, transparent);
}
.empty-detail-icon svg {
  width: 25px;
  height: 25px;
}
.empty-detail strong {
  color: var(--text);
  font-size: 17px;
  letter-spacing: -.02em;
}
.empty-detail span {
  max-width: 240px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.conv-header {
  min-height: 68px;
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 34%),
    var(--surface);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--brand) 8%, transparent);
}
.conv-peer {
  min-width: 0;
  border-radius: 13px;
  transition: background .18s ease;
}
.conv-peer:hover {
  background: var(--app-surface-soft);
}
.conv-title {
  font-size: 15px;
  font-weight: 750;
}
.conv-status {
  font-size: 11px;
}
.bottom-nav {
  gap: 6px;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 95%, var(--brand) 5%);
  box-shadow: 0 -8px 22px color-mix(in srgb, var(--brand) 8%, transparent);
}
.nav-item {
  min-height: 48px;
  border-radius: 15px;
  transition: color .18s ease, background .18s ease, transform .18s var(--app-ease);
}
.nav-item.active {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.nav-item:hover {
  background: var(--app-surface-soft);
}
.nav-item:active {
  transform: scale(.96);
}
.nav-item svg {
  width: 21px;
  height: 21px;
}
.settings-profile-large,
.settings-section,
.contacts-actions {
  background: var(--app-surface-raised);
  border-color: color-mix(in srgb, var(--brand) 14%, var(--border));
}
.settings-profile-large {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 10%, transparent);
}
.settings-row {
  min-height: 72px;
  transition: background .18s ease, padding-left .18s var(--app-ease), transform .18s var(--app-ease);
}
.settings-row:hover {
  padding-left: 19px;
  background: var(--app-surface-soft);
}
.settings-icon {
  box-shadow: 0 7px 15px color-mix(in srgb, var(--brand) 12%, transparent);
}
.modal-card {
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  box-shadow: 0 24px 70px color-mix(in srgb, #061321 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand) 7%, transparent);
}
.modal-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--app-line-soft);
}

@media (max-width: 767px) {
  .chat-list {
    padding-left: 5px;
    padding-right: 5px;
  }
  .chat-item {
    min-height: 72px;
  }
  .empty-detail {
    width: min(310px, calc(100% - 32px));
  }
}
.profile-empty {
  gap: 9px;
  min-height: 260px;
  margin: 0 13px;
  border: 1px dashed color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-hover) 70%, transparent);
}
.profile-empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 3px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
}
.profile-empty-icon svg { width: 24px; height: 24px; }
.profile-empty button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.profile-empty button svg { width: 16px; height: 16px; }
.profile-media-grid {
  margin: 0 13px;
  gap: 6px;
}
.profile-media-tile {
  border-radius: 14px;
  box-shadow: 0 5px 15px color-mix(in srgb, #17324d 10%, transparent);
}
.profile-section-head {
  margin-top: 25px;
}

.admin-menu {
  padding: 10px;
}
.admin-menu .menu-item {
  min-height: 49px;
  font-weight: 600;
}
.admin-menu .menu-item.active {
  box-shadow: inset 3px 0 0 var(--brand), 0 5px 14px color-mix(in srgb, var(--brand) 9%, transparent);
}
.admin-menu-icon svg {
  width: 19px;
  height: 19px;
}
.admin-search {
  border-radius: 14px;
}
.admin-stat-card {
  position: relative;
  overflow: hidden;
}
.admin-stat-card::after {
  content: '';
  position: absolute;
  right: -23px;
  bottom: -28px;
  width: 86px;
  height: 86px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand) 5%, transparent);
  pointer-events: none;
}
.admin-stat-card.alert::after {
  border-color: color-mix(in srgb, #e53935 22%, transparent);
  box-shadow: 0 0 0 12px color-mix(in srgb, #e53935 6%, transparent);
}
.admin-section-title {
  letter-spacing: -.025em;
}
.admin-table-button,
.admin-page-button {
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
}
.admin-table-button:hover,
.admin-page-button:hover:not(:disabled) {
  box-shadow: 0 5px 12px color-mix(in srgb, var(--brand) 12%, transparent);
}

html[data-theme] .empty-list {
  margin: 18px 13px;
  padding: 32px 20px;
  border: 1px dashed color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
  line-height: 1.45;
}

@media (max-width: 767px) {
  .list-section-title { padding-left: 18px; padding-right: 18px; }
  .profile-empty { margin-left: 13px; margin-right: 13px; }
  .admin-stat-card::after { right: -30px; }
}

/* Recording feedback stays visible while the media is being captured. */
.recording-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 15px;
  border-top: 1px solid color-mix(in srgb, #e45d6d 22%, var(--border));
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, #e45d6d 8%, var(--surface));
  color: var(--text);
}
.recording-status-preview {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #e45d6d;
  border-radius: 50%;
  background: #182636;
  box-shadow: 0 0 0 3px color-mix(in srgb, #e45d6d 12%, transparent);
}
.recording-status-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scaleX(-1);
}
.recording-status-preview b {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 1px 3px;
  border-radius: 4px;
  background: #e45d6d;
  color: #fff;
  font-size: 7px;
  letter-spacing: .04em;
}
.recording-status:not(.recording-video) .recording-status-preview {
  display: none;
}
.recording-status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #e45d6d;
  box-shadow: 0 0 0 5px color-mix(in srgb, #e45d6d 15%, transparent);
  animation: record-status-pulse 1.1s ease-in-out infinite;
}
.recording-status-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.recording-status-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d9495d;
  font-size: 13px;
}
.recording-status-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 11px;
}
.recording-status time {
  min-width: 42px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 750;
  text-align: right;
}
.recording-status.recording-video {
  min-height: 116px;
  gap: 13px;
  padding: 10px 15px;
  background: color-mix(in srgb, #e45d6d 11%, var(--surface));
}
.recording-status.recording-video .recording-status-preview {
  width: 94px;
  height: 94px;
  flex-basis: 94px;
  border-width: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, #e45d6d 14%, transparent), 0 7px 18px color-mix(in srgb, #15283a 20%, transparent);
}
.recording-status.recording-video .recording-status-preview b {
  right: 5px;
  bottom: 5px;
  padding: 2px 4px;
  font-size: 8px;
}
.recording-status.recording-video .recording-status-copy strong::before {
  content: 'Кружочек · ';
}
.conv-composer .record-direct.recording {
  position: relative;
  border: 2px solid #e45d6d;
  background: #d9495d;
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, #e45d6d 16%, transparent), 0 8px 18px color-mix(in srgb, #e45d6d 28%, transparent);
}
.conv-composer .record-direct.recording::after {
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, #e45d6d 45%, transparent);
  border-radius: inherit;
  content: '';
  animation: record-button-ring 1.25s ease-out infinite;
}
.composer-action.recording {
  color: #d9495d;
}
@keyframes record-button-ring {
  0% { opacity: .8; transform: scale(.92); }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}
@media (max-width: 420px) {
  .recording-status.recording-video {
    min-height: 108px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .recording-status.recording-video .recording-status-preview {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }
  .recording-status.recording-video .recording-status-copy small {
    white-space: normal;
    line-height: 1.3;
  }
}
@keyframes record-status-pulse {
  50% { transform: scale(.75); opacity: .55; }
}

/* Profile: a focused identity card instead of a loose collection of rows. */
.profile-page {
  padding-top: 8px;
}
.profile-hero {
  min-height: 284px;
  margin: 0 13px 15px;
  padding: 0 19px 21px;
  border-radius: 27px;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--brand) 19%, transparent);
}
.profile-cover {
  height: 128px;
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, #9be4ff 55%, transparent), transparent 35%),
    radial-gradient(circle at 84% 0%, color-mix(in srgb, #c1a0ff 48%, transparent), transparent 42%),
    linear-gradient(135deg, var(--app-hero-a), var(--app-hero-b));
}
.profile-cover::before {
  content: '';
  position: absolute;
  right: -34px;
  top: -74px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 19px rgba(255,255,255,.06), 0 0 0 40px rgba(255,255,255,.035);
}
.profile-cover::after {
  background: linear-gradient(to bottom, transparent 10%, color-mix(in srgb, var(--bg-color) 70%, transparent) 100%);
}
.profile-avatar-wrap {
  margin-top: 73px;
}
.profile-avatar-wrap .avatar {
  width: 112px;
  height: 112px;
  border: 5px solid color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 10px 24px rgba(11, 34, 63, .28);
  font-size: 36px;
}
.profile-online-dot {
  right: 4px;
  bottom: 5px;
  width: 21px;
  height: 21px;
  border-width: 4px;
  border-color: var(--surface);
}
.profile-identity h1 {
  margin-top: 10px;
  letter-spacing: -.035em;
}
.profile-hero-bio {
  max-width: 300px;
  margin: 9px 0 0;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.profile-actions {
  gap: 10px;
  padding-bottom: 17px;
}
.profile-actions button {
  min-height: 72px;
  border-radius: 19px;
}
.profile-action-icon {
  width: 31px;
  height: 31px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.profile-action-icon svg {
  width: 19px;
  height: 19px;
}
.profile-card.profile-details {
  margin: 0 13px;
  padding: 5px 17px;
  border-radius: 21px;
}
.profile-detail-row {
  min-height: 62px;
  padding: 11px 0;
}
.profile-detail-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 11px;
}
.profile-section-head {
  margin-top: 27px;
  margin-bottom: 10px;
}
.profile-section-head strong {
  font-size: 18px;
  letter-spacing: -.025em;
}
.profile-tabs {
  margin-bottom: 14px;
  border-radius: 16px;
}
.profile-tabs button {
  min-height: 36px;
}

/* Only the two supported presets are selectable. */
.theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.theme-choice {
  min-height: 62px;
}
.theme-choice-swatch {
  width: 42px;
  height: 42px;
}
.theme-ocean { --swatch-a: #1689df; --swatch-b: #23b8aa; --swatch-c: #eaf4fa; }
.theme-graphite { --swatch-a: #5146d9; --swatch-b: #35b9af; --swatch-c: #202d46; }

@media (max-width: 380px) {
  .profile-hero { margin-left: 10px; margin-right: 10px; }
  .profile-actions { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .profile-actions button { min-height: 67px; }
  .profile-card.profile-details { margin-left: 10px; margin-right: 10px; }
}

/* Regular forms are dialogs; only explicit action sheets dock to the bottom. */
@media (max-width: 767px) {
  html[data-theme] .modal-overlay:not(.action-sheet-modal) {
    align-items: center;
    padding: 16px;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
    width: min(440px, 100%);
    max-height: min(88dvh, 720px);
    border-radius: 24px;
    padding: 20px 18px;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card::before {
    display: none;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-body {
    max-height: calc(88dvh - 160px);
  }
}

/* Community creation and settings use the same calm editor language as profile. */
.community-avatar-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  margin-bottom: 13px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  cursor: pointer;
}
.community-avatar-picker:hover {
  border-color: color-mix(in srgb, var(--brand) 44%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
}
.community-avatar-preview {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  overflow: hidden;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--app-hero-a), var(--app-hero-b));
}
.community-avatar-preview .avatar,
.community-avatar-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.community-avatar-preview .avatar {
  border-radius: 0;
}
.community-avatar-picker > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.community-avatar-picker strong { font-size: 13px; }
.community-avatar-picker small { color: var(--text-muted); font-size: 11px; }
.community-avatar-picker input {
  max-width: 100%;
  color: var(--brand);
  font-size: 11px;
}
.community-type-field,
.community-field-label {
  display: block;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.community-type-field .modal-input {
  margin-top: 6px;
}
.community-settings-hero {
  margin-bottom: 12px;
}
.community-settings-note {
  display: grid;
  gap: 3px;
  margin-top: 13px;
  padding: 12px 13px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.community-settings-note strong { color: var(--brand); font-size: 12px; }
.community-settings-note span { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.community-remove-avatar { color: var(--text-muted); font-size: 12px; }

/* Auth should feel authored: restrained surface, clear copy, no template-like glow. */
html[data-theme="ocean"] .auth-wrapper {
  background: linear-gradient(140deg, #edf6fb 0%, #f8fbfd 54%, #eef4ff 100%);
}
html[data-theme="ocean"] .auth-wrapper::before,
html[data-theme="ocean"] .auth-wrapper::after {
  opacity: .28;
}
html[data-theme="ocean"] .auth-card {
  color: var(--text);
  border-color: #dce7ef;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 25px 70px rgba(39, 73, 100, .14);
}
html[data-theme="ocean"] .auth-card h1,
html[data-theme="ocean"] .auth-logo-word {
  color: #172238;
}
html[data-theme="ocean"] .auth-card label,
html[data-theme="ocean"] .auth-card .auth-subtitle,
html[data-theme="ocean"] .auth-card .input-hint,
html[data-theme="ocean"] .auth-card .check-row {
  color: #718096;
}
html[data-theme="ocean"] .auth-card input:not([type="checkbox"]) {
  border-color: #dbe7ee;
  background: #f5f9fb;
  color: #172238;
}
html[data-theme="ocean"] .auth-card input:not([type="checkbox"]):hover,
html[data-theme="ocean"] .auth-card input:not([type="checkbox"]):focus {
  background: #fff;
}
html[data-theme="ocean"] .auth-remember input {
  border-color: #cbd9e4;
  background: #f5f9fb;
}
html[data-theme="ocean"] .auth-caption { color: #7b8d9b; }
html[data-theme="graphite"] .auth-caption { color: #9baac4; }
.auth-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: -9px 0 18px;
  font-size: 11px;
}
.auth-caption-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-accent-2);
}

.auth-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 15px;
  color: var(--text-muted);
  font-size: 11px;
}
.auth-legal-links button {
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-legal-links button:hover {
  color: var(--brand);
}

.confirm-dialog-message {
  margin: 4px 0 2px;
}

/* Channel feed: posts have their own hierarchy instead of looking like DMs. */
.channel-header {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--brand) 8%, var(--surface)));
}
.channel-header .conv-peer .avatar {
  border-radius: 14px;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 18%, transparent);
}
.channel-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px 20px;
}
.channel-post {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--border));
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 22px color-mix(in srgb, #17324d 8%, transparent);
}
.channel-post.is-pinned {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
}
.channel-post-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}
.channel-post-head > span:not(.channel-post-label) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.channel-post-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-post-head small {
  color: var(--text-muted);
  font-size: 11px;
}
.channel-post-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
}
.channel-post-label svg {
  width: 13px;
  height: 13px;
}
.channel-post-text {
  color: var(--text);
  font-size: 15px;
  line-height: 1.48;
  white-space: pre-wrap;
}
.channel-post-media {
  width: calc(100% + 28px);
  max-height: 390px;
  margin: 0 -14px 12px;
  border-radius: 0;
  object-fit: cover;
}
.channel-post .channel-post-file {
  display: block;
  margin: 0 0 12px;
}
.channel-post-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.channel-post-footer .reaction-list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.channel-reaction-empty {
  color: var(--text-muted);
  font-size: 11px;
}
.channel-discussion-button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 31px;
  padding: 5px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
}
.channel-discussion-button:hover {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
}
.channel-discussion-button svg {
  width: 14px;
  height: 14px;
}
.channel-discussion-button b {
  min-width: 12px;
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
}
.channel-react-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  color: var(--text-muted);
}
.channel-react-button:hover {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
}
.channel-react-button svg {
  width: 16px;
  height: 16px;
}
.channel-readonly-bar {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--brand);
}
.channel-readonly-bar > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
}
.channel-readonly-bar span {
  display: grid;
  gap: 2px;
}
.channel-readonly-bar strong {
  color: var(--text);
  font-size: 12px;
}
.channel-readonly-bar small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.bot-readonly-bar {
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.bot-readonly-bar > svg {
  color: var(--brand);
}
.chat-utility-filters {
  display: flex;
  gap: 8px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.utility-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  background: var(--surface);
  white-space: nowrap;
  font-size: 11px;
}
.utility-filter-btn svg {
  width: 14px;
  height: 14px;
}
.utility-filter-btn.active {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.chat-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
}
.chat-pinned-mark {
  display: inline-flex;
  color: var(--brand);
}
.chat-pinned-mark svg {
  width: 13px;
  height: 13px;
}
.msg-bubble.is-pinned {
  position: relative;
  border-left: 3px solid var(--brand);
}
.msg-bubble.is-pinned::before {
  content: 'Закреплено';
  display: block;
  margin-bottom: 5px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.settings-icon.about {
  background: linear-gradient(135deg, var(--brand), var(--app-accent-2, #26b9aa));
  color: #fff;
}
.check-row:not(.auth-remember) input,
.admin-check-row input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--border));
  border-radius: 5px;
  background: var(--surface-hover);
  cursor: pointer;
}
.check-row:not(.auth-remember) input:checked,
.admin-check-row input:checked {
  border-color: var(--brand);
  background: var(--brand);
}
.check-row:not(.auth-remember) input:checked::after,
.admin-check-row input:checked::after {
  content: '✓';
  position: absolute;
  inset: -1px 0 0;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  font-weight: 800;
}
.channel-discussion-modal .modal-card {
  width: min(500px, 100%);
}
.channel-discussion-source {
  padding: 11px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.channel-discussion-source strong {
  color: var(--brand);
  font-size: 12px;
}
.channel-discussion-source p {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}
.channel-discussion-list {
  display: grid;
  gap: 8px;
  max-height: 290px;
  margin: 12px 0;
  overflow-y: auto;
}
.channel-comment-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 7px 9px;
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand);
  font-size: 11px;
}
.channel-comment-reply span {
  flex: 1;
}
.channel-comment-reply button {
  color: var(--text-muted);
  font-size: 16px;
}
.channel-reply {
  padding: 9px 10px;
  border-radius: 13px;
  background: var(--surface-hover);
}
.channel-reply header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.channel-reply header > span {
  display: grid;
  gap: 1px;
}
.channel-reply header strong {
  color: var(--text);
  font-size: 12px;
}
.channel-reply header small {
  color: var(--text-muted);
  font-size: 10px;
}
.channel-reply p {
  margin: 7px 0 5px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.channel-reply-actions {
  display: flex;
  gap: 5px;
}
.channel-reply-actions button {
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
}
.channel-reply-actions button:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.channel-reply-actions button.is-danger:hover {
  border-color: var(--danger, #e53935);
  color: var(--danger, #e53935);
  background: color-mix(in srgb, var(--danger, #e53935) 8%, var(--surface));
}
.channel-reply-target {
  display: block;
  margin-top: 6px;
  color: var(--brand);
  font-size: 10px;
}
.channel-discussion-modal .modal-input#channel-comment-text {
  min-height: 84px;
  resize: vertical;
}

.group-topic-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--brand));
}
.topics-home {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: var(--surface);
}
.topics-home-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto 14px;
  max-width: 720px;
}
.topics-home-heading > div {
  display: grid;
  gap: 4px;
}
.topics-home-heading strong {
  color: var(--text);
  font-size: 17px;
}
.topics-home-heading span {
  color: var(--text-muted);
  font-size: 12px;
}
.topic-list {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}
.topic-list-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand));
  color: var(--text);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.topic-list-item:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  transform: translateY(-1px);
}
.topic-list-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
}
.topic-list-icon svg { width: 20px; height: 20px; }
.topic-list-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.topic-list-copy strong,
.topic-list-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-list-copy strong { font-size: 13px; }
.topic-list-copy small {
  color: var(--text-muted);
  font-size: 11px;
}
.topic-list-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 11px;
}
.topic-list-meta svg { width: 15px; height: 15px; }
.topic-context-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--brand));
}
.topic-context-bar button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
}
.topic-context-bar button:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.topic-context-bar button svg { width: 14px; height: 14px; }
.topic-context-bar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
}
.group-topic-bar > svg,
.group-topic-bar > span > svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.group-topic-bar select {
  min-width: 0;
  flex: 1;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.topic-add-btn,
.discussion-create-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.topic-add-btn svg { width: 13px; height: 13px; }
.topic-add-btn:hover,
.discussion-create-link:hover {
  background: color-mix(in srgb, var(--brand) 15%, var(--surface));
}
.msg-topic-label {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
}
.discussion-target {
  outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset: 3px;
  animation: discussion-target-pulse 1.8s ease-out;
}
@keyframes discussion-target-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
  25% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 17%, transparent); }
}
@media (max-width: 560px) {
  .group-topic-bar { padding-inline: 9px; }
  .topic-add-btn span { display: none; }
  .topic-add-btn { padding: 7px; }
  .topics-home { padding: 12px 9px; }
  .topics-home-heading { align-items: flex-start; }
  .topics-home-heading strong { font-size: 15px; }
}

.document-modal .modal-card {
  width: min(560px, 100%);
}
.legal-document {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.legal-document h4 {
  margin: 18px 0 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}
.legal-document h4:first-of-type {
  margin-top: 10px;
}
.legal-document p {
  margin: 7px 0;
  color: var(--text-muted);
}
.legal-document ul {
  display: grid;
  gap: 6px;
  margin: 7px 0;
  padding-left: 19px;
  color: var(--text-muted);
}
.legal-document li::marker {
  color: var(--brand);
}
.legal-updated {
  margin-top: 0 !important;
  color: var(--brand) !important;
  font-size: 11px;
  font-weight: 700;
}
.legal-note {
  margin-top: 18px !important;
  padding: 10px 11px;
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  font-size: 11px;
}
.about-hero {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
  padding: 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, var(--surface)), color-mix(in srgb, var(--app-accent-2) 12%, var(--surface)));
}
.about-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.about-hero div {
  display: grid;
  gap: 2px;
}
.about-hero strong {
  color: var(--text);
  font-size: 19px;
}
.about-hero small {
  color: var(--text-muted);
  font-size: 11px;
}
.document-inline-link {
  display: inline;
  padding: 0;
  color: var(--brand);
  font: inherit;
  text-decoration: underline;
}

.verified-badge {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  border-radius: 50%;
  background: #2f9cf4;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  vertical-align: 2px;
}
.security-code-input {
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
}
.security-biometric-button {
  width: 100%;
  margin-top: 8px;
}
.security-inline-error {
  min-height: 17px;
  margin: 6px 0 0;
  color: #dc4d58;
  font-size: 12px;
}
.security-biometric-status {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}
.security-reminder-points {
  display: grid;
  gap: 7px;
  margin: 13px 0 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.security-lock-modal .modal-card {
  border-top: 3px solid var(--brand);
}
.admin-form-card {
  max-width: 680px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.admin-form-card .admin-section-title {
  margin-top: 0;
}
.admin-form-control {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 14px;
}
.admin-broadcast-button {
  margin-top: 6px;
}

/* The light preset must keep every settings control readable, including
   older utility classes that predate the shared theme variables. */
html[data-theme="ocean"] .settings-section,
html[data-theme="ocean"] .settings-row,
html[data-theme="ocean"] .settings-row:hover,
html[data-theme="ocean"] .settings-row:focus-visible {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="ocean"] .settings-row strong,
html[data-theme="ocean"] .settings-row span,
html[data-theme="ocean"] .settings-row i {
  color: var(--text);
}
html[data-theme="ocean"] .settings-row small,
html[data-theme="ocean"] .settings-row i,
html[data-theme="ocean"] .settings-chevron,
html[data-theme="ocean"] .menu-hint,
html[data-theme="ocean"] .form-hint {
  color: var(--text-muted);
}
html[data-theme="ocean"] .settings-row {
  border-bottom-color: var(--border);
}
html[data-theme="ocean"] .modal-body .btn-action,
html[data-theme="ocean"] .modal-body .menu-item {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border);
}
html[data-theme="ocean"] .modal-body .btn-action:hover,
html[data-theme="ocean"] .modal-body .menu-item:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
}

/* Profile remains compact and readable when the bio or title is long. */
html[data-theme] .profile-page {
  padding-bottom: 34px;
}
html[data-theme] .profile-hero-bio {
  max-height: 38px;
  overflow: hidden;
  margin-top: 8px;
}
html[data-theme] .profile-details .profile-detail-row > div {
  flex: 1;
}
html[data-theme] .profile-section-head {
  align-items: center;
}
html[data-theme] .profile-section-head span {
  max-width: 44%;
  text-align: right;
}

/* Settings rows use the same card language as support actions and referral
   history: one surface, one clear action, one quiet explanation. */
.settings-section-label {
  margin-top: 8px;
  color: var(--brand);
  font-size: 11px;
  letter-spacing: .08em;
}
.settings-section {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  padding: 8px;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
.settings-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 11px 12px;
  gap: 10px;
  border: 1px solid var(--app-line-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 5%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease), box-shadow .18s ease;
}
.settings-row:hover,
.settings-row:focus-visible {
  padding-left: 12px;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: var(--surface-hover);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 9%, transparent);
  transform: translateX(2px);
}
.settings-row > span:not(.settings-icon) {
  flex: 1;
}
.settings-row strong {
  color: var(--text);
  font-size: 13px;
}
.settings-row small {
  color: var(--text-muted);
  font-size: 11px;
}
.settings-row > i {
  color: var(--text-muted);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
}
.settings-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  color: #fff;
  box-shadow: none;
}
.settings-icon svg {
  width: 17px;
  height: 17px;
}
.settings-profile-large {
  margin-bottom: 10px;
  border-radius: 16px;
}
.settings-row.danger-row {
  border-color: color-mix(in srgb, #e53935 18%, var(--border));
  color: #e53935;
}
.settings-row.danger-row strong {
  color: #e53935;
}
html[data-theme="ocean"] .settings-section {
  background: transparent;
}
html[data-theme="ocean"] .settings-row,
html[data-theme="ocean"] .settings-row:hover,
html[data-theme="ocean"] .settings-row:focus-visible {
  background: var(--surface);
  border-color: var(--app-line-soft);
}
html[data-theme="ocean"] .settings-row:hover,
html[data-theme="ocean"] .settings-row:focus-visible {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
}

@media (max-width: 767px) {
  .settings-section {
    padding-left: 5px;
    padding-right: 5px;
  }
  .settings-row:hover,
  .settings-row:focus-visible {
    transform: none;
  }
}

/* Explicit settings action cards. This class intentionally mirrors the
   support-action treatment so the settings screen has a visible, shared
   component instead of relying on the older generic row styles. */
.settings-action-list {
  display: grid;
  gap: 8px;
  padding: 0;
}
.settings-action-list .settings-action-card {
  position: relative;
}
.settings-action-list .settings-row {
  min-height: 70px;
  padding: 12px 13px;
  border: 1px solid var(--app-line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 6%, transparent);
}
.settings-action-list .settings-row:hover,
.settings-action-list .settings-row:focus-visible {
  padding-left: 13px;
  border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
  background: var(--surface-hover);
  box-shadow: 0 9px 21px color-mix(in srgb, var(--brand) 11%, transparent);
  transform: translateX(2px);
}
.settings-action-list .settings-row > span:not(.settings-icon) {
  display: grid;
  gap: 4px;
}
.settings-action-list .settings-row strong {
  font-size: 13px;
  font-weight: 750;
}
.settings-action-list .settings-row small {
  font-size: 11px;
  line-height: 1.35;
}
.settings-action-list .settings-row > i {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
}
.settings-action-list .settings-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
}
.settings-action-list .settings-icon svg {
  width: 18px;
  height: 18px;
}
.settings-action-list .danger-row {
  border-color: color-mix(in srgb, #e53935 25%, var(--border));
}
@media (max-width: 767px) {
  .settings-action-list .settings-row:hover,
  .settings-action-list .settings-row:focus-visible {
    transform: none;
  }
}

/* Modal system: one calm, spacious surface for forms, confirmations and
   action sheets. The shared selectors keep every existing dialog aligned. */
html[data-theme] .modal-overlay {
  align-items: center;
  padding: 18px;
  background: color-mix(in srgb, #061321 58%, transparent);
  backdrop-filter: blur(12px) saturate(1.08);
}
html[data-theme] .modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(500px, 100%);
  max-height: min(86dvh, 760px);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 34%),
    var(--surface);
  box-shadow:
    0 28px 80px color-mix(in srgb, #061321 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand) 5%, transparent);
}
html[data-theme] .modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  margin: 0;
  padding: 17px 18px 13px;
  border-bottom: 1px solid var(--app-line-soft);
}
html[data-theme] .modal-head::before {
  content: '';
  width: 4px;
  height: 27px;
  flex: 0 0 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--brand), #27b6aa);
}
html[data-theme] .modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.025em;
}
html[data-theme] .modal-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  transition: background .18s ease, color .18s ease, transform .18s var(--app-ease);
}
html[data-theme] .modal-close:hover {
  background: var(--surface-hover);
  color: var(--text);
  transform: rotate(4deg);
}
html[data-theme] .modal-body {
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  color: var(--text);
  scrollbar-width: thin;
}
html[data-theme] .modal-body > p:not(.theme-picker-hint),
html[data-theme] .modal-body .menu-hint {
  margin: 0 0 13px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
html[data-theme] .modal-body > label:not(.check-row):not(.profile-upload-field),
html[data-theme] .modal-body .admin-form-label {
  display: grid;
  gap: 6px;
  margin: 13px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
}
html[data-theme] .modal-body > label:first-child:not(.check-row):not(.profile-upload-field),
html[data-theme] .modal-body > .admin-form-label:first-child {
  margin-top: 0;
}
html[data-theme] .modal-body .modal-input,
html[data-theme] .modal-body input.modal-input,
html[data-theme] .modal-body textarea.modal-input,
html[data-theme] .modal-body select.modal-input {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--brand) 10%);
  border-radius: 13px;
  outline: none;
  background: var(--surface-hover);
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
html[data-theme] .modal-body textarea.modal-input {
  min-height: 94px;
  resize: vertical;
}
html[data-theme] .modal-body .modal-input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 78%, transparent);
}
html[data-theme] .modal-body .modal-input:focus,
html[data-theme] .modal-body .modal-input:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 70%, var(--border));
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--app-focus-ring);
}
html[data-theme] .modal-body .check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: var(--text);
  font-size: 12px;
}
html[data-theme] .modal-body .check-row input {
  flex: 0 0 auto;
}
html[data-theme] .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 12px 18px calc(15px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--app-line-soft);
  background: color-mix(in srgb, var(--surface) 94%, var(--brand) 6%);
}
html[data-theme] .modal-actions .btn-cancel,
html[data-theme] .modal-actions .btn-confirm {
  min-height: 42px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 750;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s var(--app-ease);
}
html[data-theme] .modal-actions .btn-cancel {
  color: var(--text-muted);
}
html[data-theme] .modal-actions .btn-cancel:hover {
  background: var(--surface-hover);
  color: var(--text);
}
html[data-theme] .modal-actions .btn-confirm {
  min-width: 96px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 7px 17px color-mix(in srgb, var(--brand) 24%, transparent);
}
html[data-theme] .modal-actions .btn-confirm:hover {
  background: var(--brand-hover);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--brand) 31%, transparent);
  transform: translateY(-1px);
}
html[data-theme] .modal-actions .btn-confirm:active,
html[data-theme] .modal-actions .btn-cancel:active {
  transform: scale(.97);
}
html[data-theme] .confirm-modal .modal-head::before {
  background: linear-gradient(180deg, #e15b67, #f0a04b);
}
html[data-theme] .confirm-modal .btn-confirm {
  background: #d9505c;
  box-shadow: 0 7px 17px color-mix(in srgb, #d9505c 25%, transparent);
}
html[data-theme] .confirm-modal .btn-confirm:hover {
  background: #bd3f4c;
}
html[data-theme] .modal-card.is-busy .modal-actions {
  pointer-events: none;
}
html[data-theme] .modal-card.is-busy .modal-body {
  opacity: .62;
}

/* Action sheets keep the same surface language, but use the mobile-first
   bottom-sheet interaction that is already expected by the app. */
html[data-theme] .action-sheet-modal {
  align-items: flex-end;
  padding: 0;
}
html[data-theme] .action-sheet-modal .modal-card {
  width: min(100%, 560px);
  max-height: min(88dvh, 760px);
  border-radius: 26px 26px 0 0;
}
html[data-theme] .action-sheet-modal .modal-card::before {
  width: 40px;
  height: 4px;
  margin: 9px auto 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text-muted) 38%, transparent);
}
html[data-theme] .action-sheet-modal .modal-head {
  min-height: 61px;
  padding-top: 11px;
}
html[data-theme] .action-sheet-modal .modal-head::before {
  display: none;
}
html[data-theme] .action-sheet-modal .modal-body {
  max-height: min(67dvh, 570px);
}
html[data-theme] .action-sheet-modal .modal-actions {
  justify-content: stretch;
  padding-top: 11px;
}
html[data-theme] .action-sheet-modal .btn-confirm {
  width: 100%;
}

/* Toasts and small popovers should feel related to the dialog system without
   blocking the screen. */
html[data-theme] .toast {
  bottom: calc(var(--nav-height) + 17px + env(safe-area-inset-bottom));
  max-width: min(92vw, 390px);
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--text) 90%, #061321 10%);
  box-shadow: 0 12px 30px color-mix(in srgb, #061321 28%, transparent);
  font-size: 12px;
  line-height: 1.35;
  backdrop-filter: blur(16px);
}
.composer-actions {
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 34px color-mix(in srgb, #061321 24%, transparent);
}
.composer-action {
  min-height: 42px;
  border-radius: 10px;
}
.composer-action:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-hover));
}
.ui-state {
  margin: 8px 6px;
  padding: 25px 16px;
  border: 1px dashed color-mix(in srgb, var(--brand) 23%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-hover) 76%, transparent);
}
.ui-state-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
}
.ui-state-icon svg {
  width: 21px;
  height: 21px;
}
.ui-state-title {
  margin-top: 9px;
  font-size: 14px;
}
.ui-state-message {
  max-width: 290px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.state-action {
  min-height: 36px;
  margin-top: 10px;
  padding: 0 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
}
.state-action:hover {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 767px) {
  html[data-theme] .modal-overlay:not(.action-sheet-modal) {
    align-items: flex-end;
    padding: 0;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
    width: 100%;
    max-height: 91dvh;
    border-radius: 26px 26px 0 0;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 9px auto 0;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-muted) 38%, transparent);
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-head {
    padding-top: 11px;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-head::before {
    display: none;
  }
  html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-body {
    max-height: calc(91dvh - 155px);
  }
  html[data-theme] .modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Final settings menu alignment: this must stay after the legacy settings
   rules so the screen uses the same cards as support and referrals. */
.settings-scroll > .support-section-title {
  margin: 18px 16px 8px;
  padding: 0;
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settings-scroll > .support-actions {
  display: grid;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.settings-scroll > .support-actions .settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--app-line-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 5%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--app-ease);
}
.settings-scroll > .support-actions .settings-row:hover,
.settings-scroll > .support-actions .settings-row:focus-visible {
  padding-left: 12px;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: var(--surface-hover);
  transform: translateX(2px);
}
.settings-scroll > .support-actions .settings-row > span:not(.settings-icon) {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}
.settings-scroll > .support-actions .settings-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-scroll > .support-actions .settings-row small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-scroll > .support-actions .settings-row > i {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
}
.settings-scroll > .support-actions .settings-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  box-shadow: none;
}
.settings-scroll > .support-actions .settings-icon svg {
  width: 17px;
  height: 17px;
}
@media (max-width: 767px) {
  .settings-scroll > .support-section-title {
    margin-left: 15px;
    margin-right: 15px;
  }
  .settings-scroll > .support-actions {
    margin-left: 13px;
    margin-right: 13px;
  }
  .settings-scroll > .support-actions .settings-row:hover,
  .settings-scroll > .support-actions .settings-row:focus-visible {
    transform: none;
  }
}

/* Final modal contract for every regular dialog. This stays after all legacy
   mobile rules so profile, settings, forms and confirmations behave alike. */
html[data-theme] .modal-overlay:not(.action-sheet-modal) {
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center;
  min-height: 100dvh;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
  box-sizing: border-box;
  min-height: 0;
  width: min(500px, 100%);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  padding: 0;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card::before {
  display: none !important;
  content: none !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-head {
  padding-top: 17px;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-actions {
  z-index: 1;
  flex: 0 0 auto;
  padding-bottom: max(15px, calc(15px + env(safe-area-inset-bottom)));
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .profile-upload-field {
  min-width: 0;
  margin-bottom: 10px;
  padding: 11px;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .profile-upload-field > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .profile-upload-field input {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) #profile-bio {
  margin-top: 10px;
}
html[data-theme] .action-sheet-modal {
  box-sizing: border-box;
  min-height: 100dvh;
  overflow-y: auto;
  padding: env(safe-area-inset-top) 0 0 !important;
}
html[data-theme] .action-sheet-modal .modal-card {
  box-sizing: border-box;
  min-height: 0;
  max-height: calc(100dvh - env(safe-area-inset-top)) !important;
}
html[data-theme] .action-sheet-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
}
html[data-theme] .action-sheet-modal .modal-actions {
  position: relative;
  bottom: auto;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 18px max(15px, calc(15px + env(safe-area-inset-bottom)));
}

/* Actual terminal override: this block intentionally stays last in the file
   so the older mobile bottom-sheet rules cannot override regular dialogs. */
html[data-theme] .modal-overlay:not(.action-sheet-modal) {
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center;
  min-height: 100dvh;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-card {
  box-sizing: border-box;
  min-height: 0;
  width: min(500px, 100%);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px !important;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme] .modal-overlay:not(.action-sheet-modal) .modal-actions {
  z-index: 1;
  flex: 0 0 auto;
  padding-bottom: max(15px, calc(15px + env(safe-area-inset-bottom)));
}
html[data-theme] .action-sheet-modal {
  box-sizing: border-box;
  min-height: 100dvh;
  overflow-y: auto;
  padding: env(safe-area-inset-top) 0 0 !important;
}
html[data-theme] .action-sheet-modal .modal-card {
  box-sizing: border-box;
  min-height: 0;
  max-height: calc(100dvh - env(safe-area-inset-top)) !important;
}
html[data-theme] .action-sheet-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
}
html[data-theme] .action-sheet-modal .modal-actions {
  position: relative;
  bottom: auto;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 18px max(15px, calc(15px + env(safe-area-inset-bottom)));
}

/* Final button contrast contract. Surface buttons use the theme text color;
   primary and active buttons keep their intentionally white/brand treatment. */
html[data-theme] .modal-body .btn-action,
html[data-theme] .modal-body .menu-item,
html[data-theme] .action-sheet-modal .menu-item,
html[data-theme] .quick-create-item,
html[data-theme] .admin-menu .menu-item:not(.active),
html[data-theme] .settings-row,
html[data-theme] .contacts-actions .btn-action,
html[data-theme] .profile-actions button,
html[data-theme] .filter-btn:not(.active),
html[data-theme] .utility-filter-btn:not(.active),
html[data-theme] .profile-tabs button:not(.active) {
  color: var(--text);
}
html[data-theme] .modal-body .btn-action,
html[data-theme] .modal-body .menu-item {
  background: var(--surface-hover);
  border-color: var(--border);
}
html[data-theme] .modal-body .btn-action:hover,
html[data-theme] .modal-body .menu-item:hover,
html[data-theme] .action-sheet-modal .menu-item:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
}
html[data-theme] .filter-btn:not(.active),
html[data-theme] .utility-filter-btn:not(.active) {
  border-color: var(--border);
  background: var(--surface);
}
html[data-theme] .filter-btn:not(.active):hover,
html[data-theme] .utility-filter-btn:not(.active):hover,
html[data-theme] .profile-tabs button:not(.active):hover {
  background: var(--surface-hover);
  color: var(--brand);
}