/* Semantic appearance overrides; generated prototype styles remain untouched. */
:root { color-scheme:light; }
:root[data-theme="dark"] {
  color-scheme:dark;
  --white:#12151c; --fog:#1b202b; --ink:#edf0f7; --mute:#a5aec0;
  --line:#384255; --line-soft:#2a3242; --surface:#1b202b;
  --blue:#a7a5ff; --sky:#83b8ff; --green:#63d594; --warn:#e9be69; --crit:#ff9298;
  --grad:linear-gradient(135deg,#efb0ff 0%,#c1a2ff 45%,#a7a5ff 100%);
  --shadow:0 4px 12px rgba(0,0,0,.24);
  --soft:color-mix(in srgb,var(--blue) 9%,var(--white));
}
.theme-control { display:inline-flex; align-items:center; justify-content:space-between; gap:10px; color:var(--mute,#6b6b6b); font:500 12px var(--font-b,system-ui,sans-serif); }
.theme-control select { min-width:96px; min-height:36px; border:1px solid var(--line,#e5e5e6); border-radius:8px; padding:6px 10px; background:var(--white,#fff); color:var(--ink,#131214); font:inherit; cursor:pointer; }
.theme-control select:focus-visible { outline:2px solid var(--blue,#110fff); outline-offset:3px; }
.side > .theme-control { margin:12px 6px; }
.public-header nav { flex-wrap:wrap; }
:root[data-theme="dark"] .btn:not(.ghost):not(.danger):not(.done),
:root[data-theme="dark"] .connect,
:root[data-theme="dark"] .wsteps li.done .n,
:root[data-theme="dark"] .skip-link,
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .toastbox .tst { background:var(--ink); color:var(--white); }
:root[data-theme="dark"] .btn:not(.ghost):not(.danger):hover { background:#d5dbea; }
:root[data-theme="dark"] .btn.done { color:var(--white) !important; }
:root[data-theme="dark"] .toastbox .tst svg { color:#166534; }
:root[data-theme="dark"] .badge { color:var(--white); }
:root[data-theme="dark"] .rank-badge,
:root[data-theme="dark"] .chain-state { background:var(--fog); color:var(--ink); }
:root[data-theme="dark"] .development-banner { background:#30291b; color:#f1ce86; border-color:#625136; }
:root[data-theme="dark"] .development-banner a { color:#c6c3ff; }
:root[data-theme="dark"] .pill.good { color:var(--green); }
:root[data-theme="dark"] .pill.warning { color:var(--warn); }
:root[data-theme="dark"] .pill.critical { color:var(--crit); }
:root[data-theme="dark"] .chain-success,
:root[data-theme="dark"] .identity-badge.verified { color:var(--green); background:#19352b; border-color:#366d50; }
:root[data-theme="dark"] .chain-failure,
:root[data-theme="dark"] .identity-page .errorlist { color:var(--crit); background:#3b232c; border-color:var(--crit); }
:root[data-theme="dark"] .btn.danger { color:var(--crit); border-color:#84505b; }
:root[data-theme="dark"] .btn.danger:hover { background:#3b232c; }
:root[data-theme="dark"] .field-row.accent,
:root[data-theme="dark"] .notification-row.accent,
:root[data-theme="dark"] .notif.unread,
:root[data-theme="dark"] table.data tr.rowlink:hover td { background:var(--soft); }
:root[data-theme="dark"] table.data tr.you td,
:root[data-theme="dark"] .you-pill,
:root[data-theme="dark"] table.data tr.you .rank-badge { background:color-mix(in srgb,var(--blue) 14%,var(--white)); }
:root[data-theme="dark"] .mcard.ok { background:color-mix(in srgb,var(--green) 8%,var(--white)); }
:root[data-theme="dark"] .field input::placeholder { color:var(--mute); }
:root[data-theme="dark"] textarea { color:var(--ink); }
:root[data-theme="dark"] .sc-drawer,
:root[data-theme="dark"] .sc-btn,
:root[data-theme="dark"] .acct-w select option { background:var(--white); color:var(--ink); }
/* The standalone wallet portal uses the same appearance preference and assets. */
.sandbox-portal .theme-control { float:right; margin-bottom:16px; }
:root[data-theme="dark"] .sandbox-portal { background:var(--white); color:var(--ink); }
:root[data-theme="dark"] .sandbox-portal a { color:var(--blue); }
:root[data-theme="dark"] .sandbox-portal section { border-color:var(--line); }
:root[data-theme="dark"] .sandbox-portal button { background:var(--ink); color:var(--white); }
@media (max-width:960px) {
  .side > .theme-control { margin:0; padding:6px 0; flex-basis:100%; justify-content:flex-end; }
}
@media (max-width:560px) {
  .public-header { flex-wrap:wrap; gap:16px; }
  .public-header nav { width:100%; justify-content:space-between; gap:10px; }
  .theme-control { gap:6px; }
}
/* QR modules must keep a white quiet zone in either appearance. */
.auth-qr-code { display:block; background:#fff; padding:12px; border-radius:8px; max-width:100%; height:auto; }

/* Canonical logo: preserve its ratio and adapt to the selected app theme. */
.brand-logo { object-fit:contain; flex-shrink:0; }
html[data-theme="dark"] .brand-logo { filter:invert(1); }
.public-brand { display:inline-flex; align-items:center; gap:10px; }
.public-brand .brand-wordmark { color:var(--ink); font:inherit; margin:0; }
.wm .brand-logo { width:32px; height:30px; }
.brand:has(.brand-logo) .by { padding-left:40px; }