/* MIOIM visual system v2
   Functional icons use independent light/dark artwork. Official chain/token marks keep their native colors. */
:root {
  color-scheme: light;
  --stage: #e9ede9;
  --canvas: #fafaf8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f2f5f1;
  --surface-muted: #e9eeea;
  --ink: #18221d;
  --navy: #18221d;
  --muted: #69756f;
  --muted-strong: #4f5c55;
  --line: #dce3de;
  --line-strong: #cbd5ce;
  --blue: #2e9fdf;
  --cyan: #77cdf5;
  --green: #2e8b68;
  --red: #c55d67;
  --gold: #c5954f;
  --soft: #f2f5f1;
  --soft2: #e9eeea;
  --white: #ffffff;
  --primary: #287faa;
  --primary-hover: #216e96;
  --primary-ink: #ffffff;
  --control: #edf1ed;
  --control-hover: #e4eae5;
  --control-ink: #243129;
  --focus: rgba(46, 159, 223, .22);
  --shadow: 0 18px 52px rgba(38, 53, 45, .10);
  --shadow-soft: 0 9px 26px rgba(38, 53, 45, .075);
  --mioim-icon-wash: #edf7fd;
  --mioim-icon-wash-strong: #e3f2fb;
  --mioim-icon-accent: #35a9ee;
  background: var(--stage);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --stage: #0b0e0c;
  --canvas: #101411;
  --surface: #151a17;
  --surface-raised: #1c221e;
  --surface-soft: #202722;
  --surface-muted: #29312c;
  --ink: #eef3ef;
  --navy: #eef3ef;
  --muted: #a2ada6;
  --muted-strong: #c0c9c3;
  --line: #303833;
  --line-strong: #404a44;
  --blue: #74cbff;
  --cyan: #a9e1ff;
  --green: #80cfaa;
  --red: #ff8c96;
  --gold: #e3ba72;
  --soft: #202722;
  --soft2: #29312c;
  --white: #151a17;
  --primary: #46524b;
  --primary-hover: #536159;
  --primary-ink: #f5f8f6;
  --control: #252c28;
  --control-hover: #303832;
  --control-ink: #edf2ef;
  --focus: rgba(116, 203, 255, .25);
  --shadow: 0 20px 58px rgba(0, 0, 0, .38);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .25);
  --mioim-icon-wash: #202d35;
  --mioim-icon-wash-strong: #263945;
  --mioim-icon-accent: #74cbff;
  background: var(--stage);
}

body,
.app-stage { background: var(--stage); color: var(--ink); }
.app-shell,
.app-shell button,
.app-shell input,
.app-shell textarea,
.app-shell select {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4 { line-height: 1.18; }
.app-shell p,
.app-shell small { line-height: 1.48; }
.app-shell button { line-height: 1.2; }
.app-shell { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow); }
.screens,
.screen,
.social-screen { background: var(--canvas); color: var(--ink); }

button,
input,
textarea,
select { font-family: inherit; }
button { color: var(--ink); }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.app-header,
.app-shell[data-screen="chat"] .app-header,
.bottom-nav,
.app-shell[data-screen="chat"] .bottom-nav,
.chat-room-header,
.modal { background: color-mix(in srgb, var(--surface) 94%, transparent); border-color: var(--line); }
.app-header,
.chat-room-header { box-shadow: 0 1px 0 var(--line); }
.bottom-nav { box-shadow: 0 -1px 0 var(--line); }
.brand small,
.page-intro small,
.my-page-head small,
.section-heading small,
.social-topbar small { color: var(--muted); }

/* Neutral, high-contrast controls shared across every screen. */
.round-button,
.icon-button,
.network-pill,
.app-shell[data-screen="chat"] .network-pill,
.app-shell[data-screen="chat"] .round-button,
.chat-room-header > button,
.modal-close,
.chat-add-button,
.social-top-actions button {
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--control-ink);
  box-shadow: var(--shadow-soft);
}
.round-button:hover,
.icon-button:hover,
.network-pill:hover,
.modal-close:hover,
.chat-add-button:hover,
.social-top-actions button:hover { background: var(--control-hover); }

.primary-button,
.membership-plan > button,
.social-comment-form button,
.contract-watch-form button {
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 11px 24px color-mix(in srgb, var(--primary) 27%, transparent);
}
.primary-button:hover,
.membership-plan > button:hover,
.social-comment-form button:hover,
.contract-watch-form button:hover { background: var(--primary-hover); }
.secondary-button,
.membership-plan > button.secondary {
  border: 1px solid var(--line-strong);
  background: var(--control);
  color: var(--control-ink);
  box-shadow: none;
}
.danger-button,
.mini-danger {
  border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 14%, var(--surface));
  color: var(--red);
  box-shadow: none;
}
.toast {
  top: auto;
  bottom: calc(88px + env(safe-area-inset-bottom));
  border: 1px solid color-mix(in srgb, var(--line-strong) 75%, transparent);
  background: #29342e;
  color: #f7faf8;
  box-shadow: 0 14px 36px rgba(18, 29, 23, .24);
}
.app-shell:has(.modal:not([hidden])) .toast {
  top: calc(82px + env(safe-area-inset-top));
  bottom: auto;
}
.toast.warning { background: #463b27; color: #fff4db; }
.toast p { color: inherit; }
html[data-theme="dark"] .toast { background: #343d38; color: #f4f7f5; }
html[data-theme="dark"] .toast.warning { background: #4a3c25; color: #ffefcc; }
button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.membership-plan > button:disabled {
  opacity: 1;
  border-color: var(--line) !important;
  background: var(--surface-muted) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .primary-button:disabled,
html[data-theme="dark"] .secondary-button:disabled {
  background: #202622 !important;
  color: #89948d !important;
  border-color: #343d37 !important;
}

/* Surfaces. */
.section-block,
.market-section,
.appearance-card,
.security-facts > div,
.settings-list,
.chat-list,
.contact-chat-list,
.balance-card,
.receive-page-card,
.ucard-intro,
.ucard-action-grid button,
.ucard-deposit-row,
.ucard-flow,
.ucard-boundary,
.ucard-detail-card,
.dapp-card,
.activity-row,
.my-assets-card,
.my-detail-list,
.my-wallet-binding,
.membership-current,
.membership-plan,
.membership-disclosure,
.membership-payment-summary,
.resource-links button,
.contact-row,
.token-manage-row,
.profile-action-grid button,
.chat-tool-grid button,
.meeting-picker button,
.group-member-choice,
.message-action-preview,
.message-action-grid button,
.emoji-grid button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.settings-list > button,
.my-detail-list > button,
.my-asset-list > button,
.my-token-preview,
.chat-row,
.asset-row,
.market-row { background: transparent; border-color: var(--line); }
.settings-list > button:hover,
.my-detail-list > button:hover,
.chat-row:hover,
.asset-row:hover,
.market-row:hover { background: var(--surface-soft); }

/* The daylight wallet hero stays unmistakably MIOIM sky blue. */
.balance-card {
  border: 1px solid rgba(255, 255, 255, .38);
  background:
    radial-gradient(circle at 92% 4%, rgba(177, 229, 255, .52), transparent 34%),
    linear-gradient(145deg, #49b8ee, #267fbd);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(38, 127, 189, .24);
}
.balance-card b,
.balance-card strong,
.balance-card small,
.balance-card p,
.balance-card button,
.balance-card .address-line { color: #ffffff; }
.balance-card .ghost-button { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .14); }
.balance-card::after { border-color: rgba(255, 255, 255, .12); }

.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 {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: .8; }

/* Navigation uses calm neutral color with a clear sky-blue active state. */
.bottom-nav button { color: var(--muted); }
.bottom-nav button.active { color: var(--ink); }
.bottom-nav button.active::before { background: var(--mioim-icon-accent); }
.bottom-nav button span { background: transparent; }

/* Larger theme-specific functional glyphs. */
.app-shell img[src*="icon-"],
.app-shell img[src*="theme-light/icon-"],
.app-shell img[src*="theme-dark/icon-"] {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate3d(0, 0, 0);
}
.app-shell button > span:has(> img[src*="icon-"]),
.app-shell button > i:has(> img[src*="icon-"]),
.app-shell [class$="-icon"]:has(> img[src*="icon-"]) {
  line-height: 0;
  align-items: center;
  justify-content: center;
}
.app-shell button > span:has(> img[src*="icon-"]) > img,
.app-shell button > i:has(> img[src*="icon-"]) > img,
.app-shell [class$="-icon"]:has(> img[src*="icon-"]) > img { place-self: center; }
.ui-glyph { width: 26px; height: 26px; }
.round-button img,
.icon-button img,
.chat-add-button img,
.social-top-actions img { width: 25px; height: 25px; }
.bottom-nav span img { width: 27px; height: 27px; }
.bottom-nav b { font-size: 10px; line-height: 1; }
.page-intro small,
.my-page-head small,
.section-heading small,
.social-topbar small { font-size: 8px; }
.settings-list b { font-size: 13px; }
.settings-list small { font-size: 10px; }
.social-post-head strong { font-size: 12px; }
.social-post-head small,
.social-post-head time { font-size: 9px; }
.social-post-content { font-size: 12px; line-height: 1.58; }
.my-assets-card > header small,
.my-invite-copy small { font-size: 8px; }
.my-asset-list p small,
.my-detail-list small { font-size: 9px; }
.my-detail-list b { font-size: 12px; }
.my-invite-copy p { font-size: 9px; }
.contact-row-end {
  position: relative;
  align-self: stretch;
  min-width: 46px;
  display: block !important;
  text-align: right;
}
.contact-row-end small { display: block; line-height: 1.2; }
.contact-row-end > img[src*="icon-chevron"] {
  position: absolute;
  right: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}
.settings-list > button > span,
.appearance-copy > span,
.contact-quick-actions button > span,
.profile-action-grid button > span,
.chat-tool-grid button > span,
.resource-links button > span,
.token-manage-row > span,
.my-membership-strip > span,
.my-detail-list > button > span,
.my-wallet-binding > span,
.ucard-action-grid button > span {
  background: var(--mioim-icon-wash);
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
.settings-list > button > span img,
.appearance-copy img,
.contact-quick-actions img,
.profile-action-grid button img,
.chat-tool-grid button img,
.resource-links button > span img,
.token-manage-row > span img,
.my-membership-strip > span img,
.my-detail-list > button > span img,
.my-wallet-binding > span img { width: 28px; height: 28px; }

/* Official token and chain marks are already complete brands: no extra tile or frame. */
.official-asset-icon,
.market-token-icon:has(> img[src*="assets/official/"]),
.asset-icon:has(> img[src*="assets/official/"]),
.my-asset-list > button > span:has(> img[src*="assets/official/"]),
.profile-action-grid button > span:has(> img[src*="assets/official/"]),
.chat-tool-grid button > span:has(> img[src*="assets/official/"]) {
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.my-asset-list > button > span:has(> img[src*="assets/official/"]) img { width: 40px; height: 40px; }
.profile-action-grid button > span:has(> img[src*="assets/official/"]) img,
.chat-tool-grid button > span:has(> img[src*="assets/official/"]) img { width: 36px; height: 36px; }
.market-token-icon:has(> img[src*="assets/official/"]) img,
.asset-icon:has(> img[src*="assets/official/"]) img { width: 100%; height: 100%; object-fit: contain; }

/* Social feed: fix the white slab in dark mode and replace electric blue controls. */
.social-topbar,
.social-tabs,
.social-post,
.social-load-more { background: var(--surface); border-color: var(--line); color: var(--ink); }
.social-topbar h1 { color: var(--ink); }
.social-top-actions .social-compose-button,
.social-floating-compose {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--line));
  background: var(--primary);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 28%, transparent);
}
.social-tabs button { color: var(--muted); }
.social-tabs button.active { color: var(--ink); }
.social-tabs button.active::after { background: var(--mioim-icon-accent); }
.social-identity-strip,
.social-empty,
.social-community-badge,
.social-load-more button { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }
.social-identity-strip button,
.social-post-content .social-hashtag,
.social-x-content a,
.social-x-footer a,
.social-compose-tools button { color: var(--blue); }
.social-loading span,
.membership-verify-progress span { border-color: var(--line); border-top-color: var(--blue); }

/* Market cards have more depth without adding blue containers around official marks. */
.market-ticker,
.common-market-card { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }
.common-market-card { box-shadow: 0 7px 18px rgba(42, 61, 50, .05); }
.common-market-card > em.up,
.market-row-main > em.up { background: color-mix(in srgb, var(--green) 13%, var(--surface)); color: var(--green); }
.common-market-card > em.down,
.market-row-main > em.down { background: color-mix(in srgb, var(--red) 13%, var(--surface)); color: var(--red); }
.common-market-card > em.flat,
.market-row-main > em.flat { background: var(--surface-muted); color: var(--muted); }
.market-ticker-live { background: var(--surface); border-color: var(--line); color: var(--green); }

/* Profile and membership. */
.my-identity-hero {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
  background: radial-gradient(circle at 88% 8%, rgba(83, 184, 239, .18), transparent 34%), linear-gradient(145deg, #263039, #3b4953);
  box-shadow: 0 18px 40px rgba(29, 42, 35, .18);
}
.my-membership-strip {
  border-color: var(--line);
  background: linear-gradient(135deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow-soft);
}
.my-membership-strip > em,
.my-assets-card > header button,
.my-invite-copy small,
.my-wallet-binding button { color: var(--blue); }
.my-invite-card { border-color: var(--line); background: linear-gradient(145deg, var(--surface-muted), var(--surface)); }
.my-invite-copy button { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.membership-plan.featured { border-color: color-mix(in srgb, var(--blue) 65%, var(--line)); box-shadow: 0 13px 34px color-mix(in srgb, var(--blue) 14%, transparent); }
.membership-plan.featured::before,
.membership-plan.blue > button { background: var(--primary); }
.membership-plan.gold > button { background: #725832; }

/* Chat glass keeps its identity while moving from blue to sage/graphite. */
.chat-room { background: var(--canvas); }
.conversation-security-strip { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
.message-list {
  background-color: #edf3ef;
  background-image:
    radial-gradient(circle at 9% 10%, rgba(112, 201, 246, .22), transparent 28%),
    radial-gradient(circle at 93% 4%, rgba(255, 255, 255, .92), transparent 27%),
    radial-gradient(circle at 50% 88%, rgba(205, 176, 119, .12), transparent 31%),
    radial-gradient(circle at 10px 10px, rgba(59, 95, 78, .026) 1.1px, transparent 1.2px);
}
.message-bubble.incoming {
  border-color: rgba(255, 255, 255, .88);
  background: linear-gradient(145deg, rgba(255, 255, 255, .73), rgba(244, 248, 245, .48));
  color: #17231d;
}
.message-bubble.outgoing {
  border-color: rgba(255, 255, 255, .66);
  background: linear-gradient(145deg, rgba(211, 239, 254, .80), rgba(112, 196, 241, .48)), rgba(97, 190, 241, .25);
  color: #102635;
  box-shadow: 0 14px 34px rgba(44, 126, 171, .16), inset 0 1px 0 rgba(255, 255, 255, .78);
}
.message-composer { background: color-mix(in srgb, var(--surface) 86%, transparent); border-color: var(--line); }
.message-composer .composer-tools,
.message-composer .composer-emoji { background: var(--control); border-color: var(--line); }
.message-composer .composer-send { background: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-soft); }
.call-controls button img,
.ghost-button img,
.address-line i img { filter: none; }

/* Dark mode is graphite, not navy, and every action remains readable. */
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .screens,
html[data-theme="dark"] .screen,
html[data-theme="dark"] .social-screen { background: var(--canvas); }
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,
html[data-theme="dark"] .modal { background: rgba(21, 26, 23, .96); border-color: var(--line); }
html[data-theme="dark"] .section-block,
html[data-theme="dark"] .market-section,
html[data-theme="dark"] .appearance-card,
html[data-theme="dark"] .security-facts,
html[data-theme="dark"] .security-facts > div,
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"] .ucard-deposit-row,
html[data-theme="dark"] .dapp-card,
html[data-theme="dark"] .activity-row,
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 { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .balance-card {
  background: radial-gradient(circle at 90% 4%, rgba(116, 203, 255, .10), transparent 34%), linear-gradient(145deg, #202622, #303833);
  border-color: var(--line-strong);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .30);
}
html[data-theme="dark"] .social-screen,
html[data-theme="dark"] .social-topbar,
html[data-theme="dark"] .social-tabs,
html[data-theme="dark"] .social-post,
html[data-theme="dark"] .social-load-more,
html[data-theme="dark"] .social-top-actions button { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .social-top-actions .social-compose-button,
html[data-theme="dark"] .social-floating-compose { background: #39433e; border-color: #536158; }
html[data-theme="dark"] .message-list {
  background-color: #0f1311;
  background-image:
    radial-gradient(circle at 8% 10%, rgba(100, 194, 246, .12), transparent 29%),
    radial-gradient(circle at 92% 5%, rgba(104, 119, 111, .09), transparent 26%),
    radial-gradient(circle at 50% 87%, rgba(183, 139, 78, .07), transparent 32%),
    radial-gradient(circle at 10px 10px, rgba(183, 217, 201, .025) 1.1px, transparent 1.2px);
}
html[data-theme="dark"] .message-bubble.incoming {
  border-color: rgba(201, 218, 208, .13);
  background: linear-gradient(145deg, rgba(54, 65, 59, .62), rgba(31, 38, 34, .48));
  color: var(--ink);
}
html[data-theme="dark"] .message-bubble.outgoing {
  border-color: rgba(133, 204, 243, .22);
  background: linear-gradient(145deg, rgba(56, 92, 113, .74), rgba(34, 59, 73, .56));
  color: #f4f8f5;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(208, 236, 222, .14);
}
html[data-theme="dark"] .message-composer,
html[data-theme="dark"] .message-composer textarea { background: rgba(28, 34, 30, .86); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .message-composer .composer-tools,
html[data-theme="dark"] .message-composer .composer-emoji,
html[data-theme="dark"] .message-composer .composer-send { background: #303933; border-color: #465149; }
html[data-theme="dark"] .warning-card,
html[data-theme="dark"] .risk-banner { background: #302b21; border-color: #504832; }
html[data-theme="dark"] .warning-card small,
html[data-theme="dark"] .risk-banner small { color: #c8b990; }
html[data-theme="dark"] .appearance-segment { background: #101411; }
html[data-theme="dark"] .appearance-segment button { color: var(--muted); }
html[data-theme="dark"] .appearance-segment button.active { background: #303833; color: var(--ink); box-shadow: none; }
html[data-theme="dark"] .my-invite-card { border-color: var(--line); background: linear-gradient(145deg, #202722, #171c19); }
html[data-theme="dark"] .my-membership-strip { border-color: var(--line); background: linear-gradient(135deg, #1b211d, #202722); }
html[data-theme="dark"] .my-invite-copy button { border-color: var(--line-strong); background: #252d28; color: var(--ink); }
html[data-theme="dark"] .my-identity-hero { background: radial-gradient(circle at 88% 8%, rgba(99, 196, 255, .16), transparent 34%), linear-gradient(145deg, #20262a, #34434d); }

@media (max-width: 520px) {
  html[data-theme="dark"],
  html[data-theme="dark"] body { background: var(--canvas); }
}