/* MIOIM glass system v3 — one refined material language across every surface. */
:root {
  --glass-canvas: #eef7fc;
  --glass-canvas-2: #f9fcfe;
  --glass-surface: rgba(255, 255, 255, .64);
  --glass-surface-strong: rgba(255, 255, 255, .80);
  --glass-surface-soft: rgba(242, 249, 253, .58);
  --glass-line: rgba(255, 255, 255, .84);
  --glass-line-soft: rgba(151, 190, 212, .22);
  --glass-highlight: rgba(255, 255, 255, .92);
  --glass-shadow: 0 18px 44px rgba(54, 101, 128, .10), 0 3px 10px rgba(63, 104, 126, .045);
  --glass-shadow-soft: 0 10px 28px rgba(51, 95, 120, .075), 0 2px 6px rgba(51, 95, 120, .035);
  --glass-inset: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(118, 165, 190, .10);
  --glass-blur: blur(28px) saturate(155%);
  --glass-blue: #37aef0;
  --glass-blue-deep: #197fbf;
  --glass-radius-xl: 27px;
  --glass-radius-lg: 22px;
  --glass-radius-md: 17px;
}

html[data-theme="dark"] {
  --glass-canvas: #071218;
  --glass-canvas-2: #0c1a22;
  --glass-surface: rgba(24, 39, 48, .68);
  --glass-surface-strong: rgba(27, 44, 54, .84);
  --glass-surface-soft: rgba(33, 51, 61, .54);
  --glass-line: rgba(178, 224, 246, .15);
  --glass-line-soft: rgba(127, 190, 220, .13);
  --glass-highlight: rgba(228, 248, 255, .11);
  --glass-shadow: 0 22px 50px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .18);
  --glass-shadow-soft: 0 12px 30px rgba(0, 0, 0, .24), 0 2px 7px rgba(0, 0, 0, .16);
  --glass-inset: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(0, 0, 0, .20);
  --glass-blue: #70ccff;
  --glass-blue-deep: #328fc4;
}

html,
body,
.app-stage { background: var(--glass-canvas); }

.app-shell {
  isolation: isolate;
  background:
    radial-gradient(circle at 90% 7%, rgba(100, 205, 255, .25), transparent 28%),
    radial-gradient(circle at 6% 44%, rgba(161, 220, 249, .18), transparent 31%),
    linear-gradient(155deg, var(--glass-canvas-2), var(--glass-canvas));
  border-color: var(--glass-line);
  box-shadow: 0 34px 90px rgba(35, 72, 93, .20), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}

.app-shell::before {
  width: 230px;
  height: 230px;
  right: -116px;
  top: 24%;
  background: radial-gradient(circle, rgba(87, 196, 247, .19), transparent 68%);
}

.app-shell::after {
  width: 190px;
  height: 190px;
  left: -100px;
  bottom: 12%;
  background: radial-gradient(circle, rgba(190, 229, 248, .24), transparent 68%);
}

html[data-theme="dark"] .app-shell {
  background:
    radial-gradient(circle at 91% 5%, rgba(49, 160, 217, .18), transparent 28%),
    radial-gradient(circle at 4% 48%, rgba(38, 116, 151, .11), transparent 31%),
    linear-gradient(155deg, var(--glass-canvas-2), var(--glass-canvas));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(182, 224, 243, .08);
}

/* A quiet MIOIM signature lives inside the material instead of looking like an extra badge. */
:is(.section-block, .market-section, .chat-conversation-panel, .contact-chat-list, .settings-list, .my-assets-card, .appearance-card, .ucard-intro, .dapp-card, .social-post) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
:is(.section-block, .market-section, .chat-conversation-panel, .contact-chat-list, .settings-list, .my-assets-card, .appearance-card, .ucard-intro, .dapp-card, .social-post)::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -9px;
  bottom: -13px;
  width: 82px;
  height: 82px;
  pointer-events: none;
  background: url("assets/veyra-mark.png") center / contain no-repeat;
  opacity: .026;
  filter: grayscale(1) contrast(.88);
  mix-blend-mode: luminosity;
}
:is(.section-block, .market-section, .chat-conversation-panel, .contact-chat-list, .settings-list, .my-assets-card, .appearance-card, .ucard-intro, .dapp-card, .social-post) > * {
  position: relative;
  z-index: 1;
}
.balance-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -22px;
  top: 31px;
  width: 150px;
  height: 150px;
  pointer-events: none;
  background: url("assets/veyra-mark.png") center / contain no-repeat;
  opacity: .075;
  filter: grayscale(1) brightness(1.55);
  mix-blend-mode: soft-light;
  transform: rotate(-8deg);
}
html[data-theme="dark"] :is(.section-block, .market-section, .chat-conversation-panel, .contact-chat-list, .settings-list, .my-assets-card, .appearance-card, .ucard-intro, .dapp-card, .social-post)::after { opacity: .044; }

/* Portfolio value is the visual anchor, with an immediate USDT and USD reading. */
.portfolio-total { gap: 1px; }
.portfolio-total small { letter-spacing: .055em; }
.portfolio-total strong {
  min-height: 35px;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  transition: opacity .18s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.portfolio-total em { letter-spacing: .015em; }

.social-identity-strip.guest > span:first-child {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--glass-line);
  background: var(--glass-surface-strong);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
html[data-theme="dark"] .social-identity-strip.guest > span:first-child {
  background: rgba(37, 55, 65, .86);
  border-color: var(--glass-line);
}

.screens {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.screen,
.social-screen,
.ucard-screen,
.app-shell[data-screen="chat"] .screen[data-screen="chat"] {
  background: transparent !important;
  color: var(--ink);
}

.app-header,
.app-shell[data-screen="chat"] .app-header,
.bottom-nav,
.app-shell[data-screen="chat"] .bottom-nav,
.chat-room-header {
  border-color: var(--glass-line-soft);
  background: var(--glass-surface-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), 0 6px 26px rgba(47, 88, 111, .055);
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .app-shell[data-screen="chat"] .app-header,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .app-shell[data-screen="chat"] .bottom-nav,
html[data-theme="dark"] .chat-room-header {
  background: rgba(13, 26, 34, .76);
  border-color: var(--glass-line);
  box-shadow: var(--glass-inset), 0 7px 26px rgba(0, 0, 0, .20);
}

.brand img { box-shadow: 0 9px 24px rgba(15, 35, 47, .16), inset 0 1px 0 rgba(255, 255, 255, .24); }
.brand b { letter-spacing: .13em; }
.brand small { color: var(--muted); letter-spacing: .16em; }

.round-button,
.icon-button,
.network-pill,
.app-shell[data-screen="chat"] .network-pill,
.app-shell[data-screen="chat"] .round-button,
.chat-add-button,
.social-top-actions button,
.chat-room-header > button,
.modal-close {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface-soft);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}

.page-intro,
.my-page-head { margin-top: 13px; margin-bottom: 17px; }
.page-intro h1,
.my-page-head h1,
.social-topbar h1,
.chat-topbar h1 { font-weight: 820; letter-spacing: -.045em; }
.page-intro small,
.my-page-head small,
.section-heading small,
.social-topbar small,
.chat-topbar small { color: var(--muted); letter-spacing: .19em; }

/* Shared glass surfaces */
.section-block,
.market-section,
.appearance-card,
.security-trust-card,
.settings-list,
.full-list,
.receive-page-card,
.chat-list,
.contact-chat-list,
.chat-zero,
.chat-gate,
.my-gate,
.my-assets-card,
.my-detail-list,
.my-wallet-binding,
.my-membership-strip,
.social-identity-strip,
.social-empty,
.ucard-intro,
.ucard-flow,
.ucard-boundary,
.ucard-action-grid button,
.membership-current,
.membership-plan,
.membership-disclosure,
.membership-payment-summary,
.security-report-hero,
.policy-hero,
.legal-document,
.system-status-shell,
.meeting-mode-card,
.meeting-join-existing,
.meeting-id-search,
.meeting-config-form,
.meeting-entry-card,
.meeting-invite-preview,
.chat-current-meeting,
.resource-links button,
.contact-row,
.token-manage-row,
.uid-search-hero,
.group-join-preview,
.uid-wallet-binding,
.uid-copy-row,
.warning-card,
.risk-banner,
.info-banner {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}

.section-block,
.market-section,
.settings-list,
.full-list,
.receive-page-card,
.chat-list,
.contact-chat-list,
.chat-zero,
.my-assets-card,
.my-detail-list,
.my-wallet-binding,
.security-trust-card { border-radius: var(--glass-radius-lg); }

.appearance-card,
.my-membership-strip,
.social-identity-strip,
.ucard-intro,
.ucard-flow,
.ucard-boundary,
.warning-card,
.risk-banner,
.info-banner { border-radius: var(--glass-radius-md); }

.section-block,
.market-section,
.my-assets-card,
.security-trust-card { padding: 16px; }

/* Inputs and segmented controls */
.search-field,
.dapp-search,
.contract-watch-form,
.form-stack input,
.form-stack textarea,
.form-stack select,
.social-comment-form input,
.meeting-chat-composer input,
.message-composer textarea,
.full-address,
.domain-card,
.asset-switch,
.appearance-segment {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface-soft);
  color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: var(--glass-inset), 0 7px 20px rgba(52, 95, 119, .055);
}

.search-field,
.dapp-search,
.contract-watch-form { min-height: 49px; border-radius: 17px; }
.form-stack input,
.form-stack textarea,
.form-stack select { border-radius: 15px; }
.asset-switch button.active,
.appearance-segment button.active {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface-strong);
  color: var(--ink);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}

/* Chat and contacts */
.app-shell[data-screen="chat"] .my-entry-card,
.my-entry-card {
  border: 1px solid var(--glass-line);
  background:
    radial-gradient(circle at 90% 4%, rgba(77, 190, 244, .21), transparent 34%),
    var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), var(--glass-shadow);
}

.contact-quick-actions button {
  min-height: 82px;
  border: 1px solid var(--glass-line);
  border-radius: 19px;
  background: var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}

.contact-quick-actions button > span,
.chat-zero > span,
.empty-list > span,
.settings-list > button > span,
.security-trust-head > span,
.appearance-copy > span,
.ucard-action-grid button > span,
.uid-search-hero > span,
.group-join-preview > span {
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 7px 18px rgba(54, 101, 128, .06);
}

html[data-theme="dark"] .contact-quick-actions button > span,
html[data-theme="dark"] .chat-zero > span,
html[data-theme="dark"] .empty-list > span,
html[data-theme="dark"] .settings-list > button > span,
html[data-theme="dark"] .security-trust-head > span,
html[data-theme="dark"] .appearance-copy > span,
html[data-theme="dark"] .ucard-action-grid button > span { background: rgba(145, 211, 241, .08); }

.chat-list,
.contact-chat-list { padding: 4px 13px; overflow: hidden; }
.chat-row {
  min-height: 74px;
  border-color: var(--glass-line-soft);
  background: transparent !important;
}
.chat-row:active { background: rgba(255, 255, 255, .24) !important; }
.chat-room {
  background:
    radial-gradient(circle at 92% 8%, rgba(78, 192, 242, .18), transparent 30%),
    linear-gradient(160deg, var(--glass-canvas-2), var(--glass-canvas));
}
.message-list {
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(84, 194, 244, .11), transparent 28%),
    radial-gradient(circle at 88% 90%, rgba(173, 221, 243, .13), transparent 30%),
    radial-gradient(circle at 10px 10px, rgba(74, 157, 195, .028) 1.1px, transparent 1.2px) !important;
  background-size: auto, auto, 23px 23px !important;
}
.message-row .message-bubble {
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
  box-shadow: var(--glass-inset), 0 14px 34px rgba(48, 87, 108, .13);
}
.message-bubble.incoming { background: rgba(255, 255, 255, .58); }
.message-bubble.outgoing {
  border-color: rgba(166, 225, 252, .44);
  background: linear-gradient(145deg, rgba(67, 177, 231, .68), rgba(32, 121, 180, .54));
  color: #fff;
}
.message-composer {
  border-top: 1px solid var(--glass-line-soft);
  background: var(--glass-surface-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 -14px 34px rgba(53, 94, 116, .075), var(--glass-inset);
}

/* Wallet */
.balance-card {
  border: 1px solid rgba(255, 255, 255, .48);
  background:
    radial-gradient(circle at 88% 5%, rgba(218, 244, 255, .35), transparent 31%),
    linear-gradient(145deg, rgba(71, 188, 239, .93), rgba(30, 119, 185, .92));
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), inset 0 -1px 0 rgba(0, 57, 94, .15), 0 22px 48px rgba(34, 120, 175, .24);
}
.balance-card::after { border-color: rgba(255, 255, 255, .10); }
.balance-card .ghost-button {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
}
.portfolio-total strong { text-shadow: 0 2px 13px rgba(10, 76, 119, .17); }
.portfolio-line { border-color: rgba(255, 255, 255, .21); }
.action-grid span {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.asset-row { border-color: var(--glass-line-soft); }
.asset-icon-image,
.official-asset-icon,
.official-asset-icon img,
.asset-row > img.asset-icon-image { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* Discover and DApps */
.market-ticker {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.market-ticker-live { border-color: var(--glass-line-soft); background: rgba(255, 255, 255, .32); }
.common-market-card {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface-soft);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--glass-inset), 0 8px 24px rgba(51, 97, 122, .06);
}
.contract-watch-form button,
.primary-button,
.membership-plan > button,
.social-comment-form button {
  background: linear-gradient(145deg, var(--glass-blue), var(--glass-blue-deep));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 12px 26px rgba(38, 144, 201, .22);
}
.secondary-button {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  color: var(--ink);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.category-pills button {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface-soft);
  box-shadow: var(--glass-inset);
}
.category-pills button.active {
  background: linear-gradient(145deg, var(--glass-blue), var(--glass-blue-deep));
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.dapp-card {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.dapp-card-top > img,
.dapp-logo-letter { box-shadow: 0 8px 22px rgba(42, 79, 99, .10); }

/* Social feed becomes floating glass posts, not flat white rows. */
.social-topbar,
.social-tabs {
  border-color: var(--glass-line-soft);
  background: var(--glass-surface-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
}
.social-feed { padding: 3px 13px 96px; }
.social-post {
  margin: 10px 0;
  padding: 14px 14px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background: var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.social-post-image { border-color: var(--glass-line); box-shadow: 0 12px 28px rgba(42, 79, 99, .10); }
.social-post-actions { border-top: 1px solid var(--glass-line-soft); margin-top: 6px; padding-top: 3px; }
.social-load-more { margin: 9px 0 0; padding: 16px 0 100px; background: transparent; }
.social-load-more button {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.social-floating-compose {
  border: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(145deg, rgba(77, 193, 247, .94), rgba(32, 125, 193, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 16px 34px rgba(36, 133, 191, .28);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Security and profile */
.appearance-card { padding: 13px; }
.security-facts { gap: 9px; }
.security-facts > div {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.security-trust-actions button,
.settings-list > button,
.my-detail-list > button,
.my-asset-list > button,
.my-token-preview {
  border-color: var(--glass-line-soft);
  background: transparent;
}
.security-trust-actions button:active,
.settings-list > button:active,
.my-detail-list > button:active,
.my-asset-list > button:active { background: rgba(255, 255, 255, .18); }
.my-identity-hero {
  border: 1px solid rgba(255, 255, 255, .40);
  background:
    radial-gradient(circle at 88% 8%, rgba(220, 245, 255, .32), transparent 33%),
    linear-gradient(145deg, rgba(67, 182, 235, .88), rgba(39, 115, 169, .82));
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 20px 45px rgba(31, 114, 166, .20);
}
.my-invite-card {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.my-qr-button,
.my-invite-copy button,
.my-edit-button,
.my-wallet-binding button {
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .20);
  box-shadow: var(--glass-inset);
}

/* U card and memberships */
.ucard-preview-card,
.ucard-live-card {
  border: 1px solid rgba(255, 255, 255, .22);
  background:
    radial-gradient(circle at 88% 6%, rgba(131, 219, 255, .28), transparent 30%),
    linear-gradient(145deg, rgba(20, 52, 73, .94), rgba(25, 104, 155, .88));
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .19), 0 22px 48px rgba(14, 55, 82, .27);
}
.ucard-deposit-row { border-color: var(--glass-line-soft); background: transparent; }
.membership-modal { background: transparent; }
.membership-hero {
  border: 1px solid rgba(255, 255, 255, .26);
  background:
    radial-gradient(circle at 90% 5%, rgba(117, 216, 255, .24), transparent 30%),
    linear-gradient(145deg, rgba(24, 68, 93, .92), rgba(21, 42, 57, .90));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 42px rgba(11, 48, 71, .25);
}
.membership-plan.featured { border-color: rgba(67, 176, 231, .44); box-shadow: var(--glass-inset), 0 17px 38px rgba(44, 139, 193, .15); }

/* Modals and sheets */
.modal-backdrop {
  background: rgba(18, 45, 61, .24);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}
.modal {
  border: 1px solid var(--glass-line);
  border-bottom: 0;
  background: var(--glass-surface-strong);
  -webkit-backdrop-filter: blur(36px) saturate(165%);
  backdrop-filter: blur(36px) saturate(165%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 -24px 64px rgba(32, 75, 99, .18);
}
.modal-header::before { background: color-mix(in srgb, var(--muted) 35%, transparent); }
.mnemonic-grid,
.chat-tool-grid button,
.message-action-grid button,
.profile-action-grid button,
.meeting-picker button,
.group-member-choice {
  border: 1px solid var(--glass-line);
  background: var(--glass-surface-soft);
  box-shadow: var(--glass-inset), var(--glass-shadow-soft);
}
.toast {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(18, 41, 54, .82);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 16px 38px rgba(12, 37, 51, .24);
}

/* Meetings stay cinematic while adopting the same optical glass. */
.call-stage {
  background:
    radial-gradient(circle at 50% 18%, rgba(52, 158, 211, .18), transparent 34%),
    linear-gradient(155deg, #08141b, #0b202b);
}
.host-control-panel,
.meeting-chat-panel,
.call-controls,
.call-host-tools {
  border: 1px solid rgba(177, 226, 247, .13);
  background: rgba(12, 29, 39, .68);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(224, 247, 255, .08), 0 18px 44px rgba(0, 0, 0, .28);
}
.call-video-tile,
.host-space-hero,
.meeting-host-pass,
.meeting-access-card {
  border: 1px solid rgba(181, 226, 246, .13);
  background: rgba(18, 38, 49, .60);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(223, 247, 255, .08), 0 18px 42px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .section-block,
html[data-theme="dark"] .market-section,
html[data-theme="dark"] .appearance-card,
html[data-theme="dark"] .security-facts > div,
html[data-theme="dark"] .security-trust-card,
html[data-theme="dark"] .settings-list,
html[data-theme="dark"] .balance-card,
html[data-theme="dark"] .receive-page-card,
html[data-theme="dark"] .ucard-intro,
html[data-theme="dark"] .ucard-action-grid button,
html[data-theme="dark"] .dapp-card,
html[data-theme="dark"] .my-assets-card,
html[data-theme="dark"] .my-detail-list,
html[data-theme="dark"] .my-wallet-binding,
html[data-theme="dark"] .membership-current,
html[data-theme="dark"] .membership-plan,
html[data-theme="dark"] .membership-disclosure,
html[data-theme="dark"] .membership-payment-summary,
html[data-theme="dark"] .social-post,
html[data-theme="dark"] .social-identity-strip,
html[data-theme="dark"] .social-empty { background: var(--glass-surface); border-color: var(--glass-line); }

html[data-theme="dark"] .balance-card {
  background:
    radial-gradient(circle at 89% 4%, rgba(117, 208, 249, .16), transparent 31%),
    linear-gradient(145deg, rgba(38, 65, 79, .92), rgba(21, 39, 49, .94));
  border-color: rgba(165, 218, 243, .18);
  box-shadow: inset 0 1px 0 rgba(227, 248, 255, .10), 0 22px 50px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .message-bubble.incoming { background: rgba(38, 56, 66, .62); }
html[data-theme="dark"] .message-bubble.outgoing { background: linear-gradient(145deg, rgba(45, 150, 204, .60), rgba(20, 86, 129, .50)); }
html[data-theme="dark"] .social-topbar,
html[data-theme="dark"] .social-tabs,
html[data-theme="dark"] .social-load-more { background: rgba(13, 27, 35, .72); }
html[data-theme="dark"] .market-ticker-live,
html[data-theme="dark"] .my-qr-button,
html[data-theme="dark"] .my-invite-copy button,
html[data-theme="dark"] .my-edit-button,
html[data-theme="dark"] .my-wallet-binding button { background: rgba(141, 211, 243, .07); }
html[data-theme="dark"] .warning-card,
html[data-theme="dark"] .risk-banner { background: rgba(84, 68, 37, .45); border-color: rgba(224, 192, 121, .20); }
html[data-theme="dark"] .info-banner { background: rgba(35, 80, 66, .36); border-color: rgba(119, 210, 176, .18); }

/* Keep keyboard focus accessible without leaving a harsh square around touch navigation. */
.bottom-nav button:focus-visible {
  outline: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .24);
  box-shadow: inset 0 0 0 1px rgba(55, 174, 240, .28), inset 0 1px 0 rgba(255, 255, 255, .48);
}
html[data-theme="dark"] .bottom-nav button:focus-visible {
  background: rgba(114, 203, 246, .06);
  box-shadow: inset 0 0 0 1px rgba(112, 204, 255, .24), inset 0 1px 0 rgba(232, 249, 255, .07);
}

/* Entry surfaces: one calm frame, never a card nested inside another card. */
.app-shell[data-screen="chat"] .chat-identity-card.is-gated {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-shell[data-screen="chat"] .chat-identity-card.is-gated .chat-gate {
  margin: 0;
  padding: 26px 21px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.contact-chat-list.is-gated {
  padding: 2px 14px 14px;
}

.contact-chat-list.is-gated .chat-gate {
  padding: 26px 8px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-shell[data-screen="chat"] .chat-identity-card.is-gated .chat-gate > img {
  width: 92px;
  height: 92px;
  border-radius: 26px;
  box-shadow: 0 17px 38px rgba(29, 61, 79, .17);
}

.empty-wallet .empty-art {
  width: 136px;
  height: 136px;
  margin-bottom: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.empty-wallet .empty-art > img {
  width: 136px;
  height: 136px;
  display: block;
  object-fit: contain;
  border-radius: 34px;
  box-shadow: none;
  filter: drop-shadow(0 19px 30px rgba(27, 60, 78, .18));
}

.empty-wallet .empty-art > span { display: none; }

html[data-theme="dark"] .app-shell[data-screen="chat"] .chat-identity-card.is-gated,
html[data-theme="dark"] .app-shell[data-screen="chat"] .chat-identity-card.is-gated .chat-gate,
html[data-theme="dark"] .contact-chat-list.is-gated .chat-gate,
html[data-theme="dark"] .empty-wallet .empty-art {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .empty-wallet .empty-art > img {
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .42));
}

@media (max-width: 520px) {
  html,
  body,
  .app-stage { background: var(--glass-canvas); }
  .app-shell { border-radius: 0; }
  .screen { padding-left: 15px; padding-right: 15px; }
  .social-screen { padding-left: 0 !important; padding-right: 0 !important; }
  .modal { border-radius: 31px 31px 0 0; }
}

@media (max-width: 360px) {
  .social-feed { padding-left: 10px; padding-right: 10px; }
  .social-post { border-radius: 19px; }
  .contact-quick-actions button { min-height: 75px; }
}