/* Qorlith wallet. Builds on ../assets/qorlith.css (tokens, buttons, forms, badges, dialog). */

main.wrap { padding-top: 28px; }
.w-shell { max-width: 1040px; margin: 0 auto; }
.ic { width: 18px; height: 18px; flex: none; display: block; }
.ic.sm { width: 15px; height: 15px; }
.ic.lg { width: 22px; height: 22px; }
.btn .ic { width: 16px; height: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; flex: none; }
.icon-btn:active { transform: scale(.94); }
@media (hover: hover) { .icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); border-color: var(--line); } }
.mono-addr { font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.addr-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
.addr-line .mono-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 4px; }
.lbl { font-size: 13px; color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mint); font-weight: 500; }
.boot { display: grid; place-items: center; gap: 14px; padding: 120px 0; color: var(--muted); text-align: center; }
.inline-err { display: flex; gap: 10px; align-items: flex-start; color: var(--text); background: rgba(255, 122, 140, .07); border: 1px solid rgba(255, 122, 140, .28); border-radius: var(--r-in); padding: 11px 14px; font-size: 14px; }
.inline-err .ic { color: var(--red); margin-top: 2px; }
.inline-ok { display: flex; gap: 10px; align-items: flex-start; background: var(--mint-soft); border: 1px solid rgba(92, 242, 200, .25); border-radius: var(--r-in); padding: 11px 14px; font-size: 14px; }
.inline-ok .ic { color: var(--mint); margin-top: 2px; }
.busy { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }

/* ============================================================ onboarding */
.ob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: center; max-width: 1040px; margin: 24px auto 40px; }
.ob-intro h1 { font: 500 clamp(28px, 3.6vw, 40px)/1.15 var(--display); letter-spacing: -.03em; margin: 16px 0 14px; }
.ob-intro h1 span { color: var(--mint); }
.ob-intro > p { color: var(--muted); font-size: 16px; max-width: 46ch; margin: 0 0 28px; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.trust li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.trust .ti { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--mint); }
.trust b { display: block; font-weight: 500; }
.trust span { color: var(--muted); font-size: 14px; }
.ob-card { padding: 28px; }
.ob-card h2 { font-size: 21px; margin-bottom: 6px; }
.ob-card > p { color: var(--muted); margin: 0 0 4px; font-size: 14.5px; }
.ob-single { max-width: 520px; margin: 24px auto 40px; }
.choice button, .choice label.choice-item { grid-template-columns: 44px 1fr 18px; }
.choice .chev { color: var(--dim); }
.choice label.choice-item:focus-within { outline: 2px solid var(--mint); outline-offset: 2px; }
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; color: var(--dim); list-style: none; padding: 0; }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li + li::before { content: ""; width: 22px; height: 1px; background: var(--line2); }
.steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 500 11px var(--mono); font-style: normal; border: 1px solid var(--line2); }
.steps .on { color: var(--text); }
.steps .on i { border-color: var(--mint); color: var(--mint); }
.steps .done i { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer; padding: 6px 0; margin-bottom: 10px; }
.back-link:hover { color: var(--text); }
.pw-row { display: grid; gap: 8px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px !important; }
.pw-wrap .icon-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.pw-meter { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.pw-meter .meter { height: 5px; }
.pw-meter small { font-size: 12.5px; color: var(--dim); min-width: 92px; text-align: right; }
.id-box { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-in); background: var(--bg2); border: 1px solid var(--line); min-width: 0; }
.id-box b { font-weight: 500; display: block; }
.id-box .mono-addr { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-box > div { min-width: 0; }
.bk-opt { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; background: var(--bg2); }
.bk-opt h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bk-opt p { margin: 0; color: var(--muted); font-size: 14px; }
.bk-opt.done { border-color: rgba(92, 242, 200, .45); }
.bk-or { text-align: center; color: var(--dim); font-size: 13px; }
.secret { font-size: 14px; line-height: 1.7; letter-spacing: .02em; }
.acct-pick { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.acct-pick legend { font-size: 14px; color: var(--muted); margin-bottom: 8px; padding: 0; }
.acct-opt { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--bg2); cursor: pointer; color: var(--text) !important; transition: border-color .15s ease, background-color .15s ease; }
.acct-opt input { position: absolute; opacity: 0; pointer-events: none; }
.acct-opt .radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; }
.acct-opt:has(input:checked) { border-color: rgba(92, 242, 200, .55); background: rgba(92, 242, 200, .04); }
.acct-opt:has(input:checked) .radio { border-color: var(--mint); }
.acct-opt:has(input:checked) .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.acct-opt:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 2px; }
.acct-opt > span { min-width: 0; }
.acct-opt b { font-weight: 500; display: block; }

/* ============================================================ dashboard header */
.w-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 24px 26px 26px; }
.w-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.w-id .avatar { width: 42px; height: 42px; }
.w-id-txt { min-width: 0; }
.w-id-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.w-bal-k { margin-top: 22px; }
.w-bal { font: 500 clamp(34px, 5vw, 50px)/1.05 var(--mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-bal small { font: 500 .36em var(--sans); color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.w-bal .sk { width: 220px; height: 46px; }
.w-sub { margin-top: 8px; color: var(--muted); font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.w-sub .mono { font-size: 14px; color: var(--text); }
.w-acts { display: flex; gap: 14px; }
.act { display: grid; justify-items: center; gap: 8px; background: none; border: 0; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; padding: 0; min-width: 58px; }
.act span.c { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--card2); border: 1px solid var(--line2); color: var(--text); transition: background-color .15s ease, border-color .15s ease, transform .16s var(--ease-out); }
.act:active span.c { transform: scale(.94); }
.act.primary span.c { background: var(--mint); color: var(--mint-ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.act:focus-visible { outline: none; }
.act:focus-visible span.c { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (hover: hover) {
  .act:hover { color: var(--text); }
  .act:hover span.c { border-color: rgba(200, 215, 245, .38); background: var(--hover); }
  .act.primary:hover span.c { background: #7af6d4; }
}
.w-main { margin-top: 16px; }
.w-main .tabs { padding: 0 14px; }
.tabs button { min-height: 48px; }
.tab-body { padding: 24px; min-height: 280px; }
.tab-body:focus-visible { outline: none; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-h h2 { font-size: 17px; }
.sec-h p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* ============================================================ activity */
.feed { list-style: none; margin: 0 -24px; padding: 0; }
.feed li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 24px; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: 0; }
@media (hover: hover) { .feed li:hover { background: rgba(255, 255, 255, .015); } }
.f-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--line); color: var(--muted); }
.f-ico.in { color: var(--ok); background: rgba(74, 222, 154, .07); border-color: rgba(74, 222, 154, .22); }
.f-ico.fail { color: var(--red); }
.f-main { min-width: 0; }
.f-title { font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f-meta { color: var(--dim); font-size: 13px; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-meta a { color: var(--muted); }
.f-amt { text-align: right; font: 500 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; display: grid; gap: 2px; justify-items: end; }
.f-amt .pos { color: var(--ok); }
.f-amt .neg { color: var(--text); }
.f-amt .st { font: 400 12px var(--sans); }
.badge .spinner { width: 10px; height: 10px; border-width: 1.5px; }
.sk-row { display: grid; grid-template-columns: 40px 1fr 90px; gap: 14px; align-items: center; padding: 13px 0; }
.sk-row .sk.c { width: 40px; height: 40px; border-radius: 50%; }

/* ============================================================ send / receive */
.send-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; }
.send-grid .form { max-width: 560px; }
.vhint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); min-height: 20px; }
.vhint.ok { color: var(--ok); }
.vhint.bad { color: var(--red); }
.vhint.warn { color: var(--amber); }
.amt-box { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-in); padding: 6px 6px 6px 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.amt-box:focus-within { border-color: rgba(92, 242, 200, .6); box-shadow: 0 0 0 4px rgba(92, 242, 200, .08); }
.amt-box input { border: 0 !important; background: none !important; box-shadow: none !important; padding: 8px 0 !important; font: 500 22px var(--mono) !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.amt-box .unit { color: var(--muted); font-size: 14px; }
.form label > .lbl-row { display: flex; justify-content: space-between; gap: 10px; }
.side-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; }
.side-card h3 { font-size: 14px; color: var(--muted); font-weight: 500; }
.rows { display: grid; gap: 10px; margin: 0; }
.rows > div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.rows dt { color: var(--muted); }
.rows dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.rows .tot { border-top: 1px solid var(--line); padding-top: 10px; }
.rows .tot dt, .rows .tot dd { color: var(--text); font-weight: 500; }
details.adv summary { cursor: pointer; color: var(--muted); font-size: 14px; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary::before { content: "+"; font-family: var(--mono); color: var(--dim); }
details.adv[open] summary::before { content: "-"; }
details.adv[open] > :not(summary) { margin-top: 12px; }
.recv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; max-width: 720px; }
.recv .qr { width: 208px; height: 208px; }
.recv-addr { font: 500 15px/1.6 var(--mono); word-break: break-all; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-in); padding: 12px 14px; margin: 8px 0 14px; }
.recv-d { text-align: center; }
.recv-d .recv-addr { font-size: 13.5px; text-align: left; }

/* ============================================================ review dialog + tracker */
dialog { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
dialog .d-b { padding: 26px; }
.d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.d-head h2 { margin: 0; }
.d-head .icon-btn { margin: -6px -8px 0 0; }
.d-sub { color: var(--muted); font-size: 14px; margin: 6px 0 18px; }
.rv-amt { text-align: center; padding: 18px 12px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); margin-bottom: 16px; }
.rv-amt .k { color: var(--muted); font-size: 13px; }
.rv-amt .v { font: 500 30px/1.2 var(--mono); letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rv-amt .v small { font: 500 14px var(--sans); color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.sum { margin: 0 0 18px; gap: 11px 16px; }
.sum dd { font-variant-numeric: tabular-nums; }
.sum dd.mono { font-size: 12.5px; }
.sum .tot-k, .sum .tot-v { border-top: 1px solid var(--line); padding-top: 11px; color: var(--text); font-weight: 500; }
.d-actions { display: flex; gap: 10px; }
.d-actions .btn { flex: 1; }
.trk { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 0; }
.trk li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; position: relative; padding-bottom: 16px; }
.trk li:last-child { padding-bottom: 0; }
.trk li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 26px; bottom: 2px; width: 1.5px; background: var(--line2); }
.trk li.done:not(:last-child)::after { background: rgba(92, 242, 200, .5); }
.trk .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line2); color: var(--dim); background: var(--card); }
.trk .done .dot { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.trk .now .dot { border-color: var(--mint); color: var(--mint); }
.trk .now .dot .spinner { width: 13px; height: 13px; border-width: 1.5px; }
.trk .fin .dot { background: var(--blue); border-color: var(--blue); color: #0a0f2a; }
.trk .fail .dot { border-color: var(--red); color: var(--red); }
.trk b { font-weight: 500; display: block; line-height: 26px; }
.trk .todo b { color: var(--dim); }
.trk small { color: var(--muted); font-size: 13px; display: block; margin-top: -2px; }

/* ============================================================ tokens */
.tok-list { list-style: none; margin: 0 -24px; padding: 0; }
.tok-list li { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 240px; gap: 14px; align-items: center; padding: 13px 24px; border-top: 1px solid var(--line); }
.tok-list li.th { border-top: 0; padding-top: 0; padding-bottom: 10px; color: var(--dim); font-size: 12.5px; }
.tok-list li.th .tok-num { font: 400 12.5px var(--sans); color: var(--dim); }
.tok-list li.th + li { border-top: 1px solid var(--line); }
@media (hover: hover) { .tok-list li:not(.th):hover { background: rgba(255, 255, 255, .015); } }
.tok-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--sans); color: var(--mint-ink); flex: none; overflow: hidden; }
.tok-av.q { background: var(--grad); }
.tok-av svg { width: 100%; height: 100%; }
.tok-name { min-width: 0; }
.tok-name b { font-weight: 500; }
.tok-name .sub { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tok-num { text-align: right; font: 500 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tok-num small { display: block; color: var(--dim); font: 400 12px var(--sans); }
.tok-acts { display: flex; gap: 6px; justify-content: flex-end; }
.mine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mine-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; }
.mine-card .hd { display: flex; gap: 10px; align-items: center; min-width: 0; }
.mine-card .hd > div { min-width: 0; }
.add-tok { display: flex; gap: 8px; max-width: 560px; }
.add-tok input { flex: 1; }
.sum.manage { grid-template-columns: auto 1fr; }
.own-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.own-grid label { font-size: 12.5px !important; gap: 5px !important; }
.own-row { display: flex; gap: 8px; align-items: end; }
.own-row > :first-child { flex: 1; min-width: 0; }
.own-sec { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 14px; }
.own-sec h3 { font-size: 15px; }

/* ============================================================ create token */
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px; align-items: start; }
.ct-sec { display: grid; gap: 14px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.ct-sec:last-of-type { border-bottom: 0; margin-bottom: 0; }
.ct-sec > h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.ct-sec > h2 i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--mono); font-style: normal; color: var(--mint); background: var(--mint-soft); }
.ct-sec > p.hint { margin: -8px 0 0; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.preset { position: relative; padding: 14px; min-height: 108px; }
.preset b { font-weight: 500; }
.preset::after { content: ""; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line2); }
.preset[aria-checked="true"] { border-color: var(--mint); background: rgba(92, 242, 200, .06); }
.preset[aria-checked="true"]::after { border-color: var(--mint); background: radial-gradient(circle, var(--mint) 0 4px, transparent 4.5px); }
.preset b { padding-right: 22px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-prev { position: sticky; top: 84px; display: grid; gap: 14px; }
.tkp { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tkp-h { display: flex; gap: 12px; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); background: radial-gradient(420px 140px at 0 0, rgba(92, 242, 200, .08), transparent 70%); }
.tkp-h .tok-av { width: 48px; height: 48px; font-size: 13px; background: var(--grad); }
.tkp-h b { font-size: 18px; font-weight: 500; display: block; overflow-wrap: anywhere; }
.tkp-b { padding: 16px 18px; display: grid; gap: 14px; }
.tkp .rows dd { font-family: var(--sans); font-size: 14px; }
.says { font-size: 14px; color: var(--muted); display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.says li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.says .ic { margin-top: 3px; color: var(--mint); }
.says li.w .ic { color: var(--amber); }
.cost { display: grid; gap: 8px; }
.ct-errs { color: var(--amber); font-size: 13.5px; margin: 0; padding-left: 18px; }
.ct-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ct-done { max-width: 560px; margin: 8px auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.ct-done .big-ok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint); border: 1px solid rgba(92, 242, 200, .3); }
.ct-done h2 { font-size: 24px; }
.ct-done p { margin: 0; color: var(--muted); }
.ct-done .id-box { width: 100%; text-align: left; }
.next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.next { display: grid; gap: 6px; text-align: left; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s ease; }
.next small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.next .ic { color: var(--mint); }
@media (hover: hover) { .next:hover { border-color: rgba(92, 242, 200, .5); text-decoration: none; } }

/* ============================================================ swap / liquidity / boost */
.dex { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 28px; align-items: start; }
.sw-card { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.dex > *, .ct > *, .send-grid > *, .sw-box, .sw-det { min-width: 0; }
.sum dd { word-break: normal; overflow-wrap: anywhere; }
.sum dd.mono { word-break: break-all; }
.sw-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.sw-top h2 { font-size: 17px; }
.sw-box { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; transition: border-color .15s ease; }
.sw-box:focus-within { border-color: rgba(92, 242, 200, .45); }
.sw-box .k { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.sw-box .k button.linkish { background: none; border: 0; color: var(--mint); font: inherit; cursor: pointer; padding: 0; }
.sw-row { display: flex; align-items: center; gap: 10px; }
.sw-row input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; color: var(--text); font: 500 26px var(--mono); letter-spacing: -.03em; padding: 4px 0; outline: none; font-variant-numeric: tabular-nums; }
.sw-row input::placeholder { color: var(--dim); }
.tok-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 5px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line2); color: var(--text); font: 500 15px var(--sans); cursor: pointer; flex: none; max-width: 100%; transition: border-color .15s ease, background-color .15s ease; }
.tok-btn .tok-av { width: 30px; height: 30px; font-size: 10px; }
.tok-btn span.s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-btn:active { transform: scale(.97); }
@media (hover: hover) { .tok-btn:hover { border-color: rgba(200, 215, 245, .38); background: var(--hover); } }
.sw-row > span { flex: none; max-width: 55%; display: flex; }
.hint { font-size: 12.5px; color: var(--dim); }
.sw-flip { display: grid; place-items: center; height: 10px; position: relative; z-index: 1; }
.sw-flip button { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card2); border: 4px solid var(--card); color: var(--muted); cursor: pointer; box-sizing: content-box; transition: color .15s ease, transform .2s var(--ease-out); }
.sw-flip button:hover { color: var(--mint); }
.sw-flip button:active { transform: rotate(180deg) scale(.95); }
.sw-box:has(+ .sw-flip) { padding-bottom: 22px; }
.sw-flip + .sw-box { padding-top: 22px; }
.sw-det { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.sw-det .rows dd { font-size: 13px; }
.sw-msg { margin-top: 12px; }
.sw-go { margin-top: 14px; width: 100%; }
.slip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slip .seg button { padding: 6px 10px; }
.mk-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; }
.mk-card h3 { font-size: 15px; }
.mk-card p { margin: 0; color: var(--muted); font-size: 14px; }
.tp-search { margin: 0 0 12px; }
.tp-list { list-style: none; margin: 0 -26px; padding: 0; max-height: min(420px, 55dvh); overflow: auto; border-top: 1px solid var(--line); }
.tp-list button { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 11px 26px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.tp-list button:hover, .tp-list button:focus-visible { background: var(--hover); outline: none; }
.tp-list button[aria-current="true"] { background: rgba(92, 242, 200, .05); }
.tp-list .sub { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-list .tok-num { font-size: 13px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tier { display: grid !important; gap: 4px !important; padding: 14px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--bg2); cursor: pointer; color: var(--text) !important; position: relative; }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier b { font-weight: 500; font-size: 16px; }
.tier span { font: 500 13.5px var(--mono); color: var(--muted); }
.tier:has(input:checked) { border-color: var(--mint); background: rgba(92, 242, 200, .06); }
.tier:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 2px; }
.pos-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pos-list li { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; }
.pos-list .hd { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.lock-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.lock-note .ic { color: var(--mint); margin-top: 2px; }

/* ============================================================ settings */
.set-nav { margin-bottom: 20px; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.set-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; align-content: start; }
.set-card h3 { font-size: 15px; }
.set-card p { margin: 0; color: var(--muted); font-size: 14px; }
.set-card .btn { justify-self: start; }
.acct-list li { grid-template-columns: 36px minmax(0, 1fr) auto; }

/* ============================================================ responsive */
@media (max-width: 900px) {
  .ob { grid-template-columns: 1fr; gap: 28px; margin-top: 8px; }
  .ob-intro > p { margin-bottom: 18px; }
  .trust { gap: 12px; }
  .send-grid, .ct, .dex { grid-template-columns: minmax(0, 1fr); }
  .ct-prev { position: static; }
  .w-head { grid-template-columns: 1fr; align-items: start; }
  .w-acts { justify-content: space-between; }
  .tok-list li { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .tok-list li .tok-num.price, .tok-list li.th { display: none; }
  .tok-list li .tok-acts { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  main.wrap { padding-top: 16px; }
  .ob-card { padding: 20px; }
  .ob-intro h1 { margin-top: 10px; }
  .trust li:nth-child(n+3) { display: none; }
  .w-head { padding: 20px 18px; gap: 20px; }
  .w-bal-k { margin-top: 16px; }
  .act { min-width: 0; flex: 1; font-size: 12.5px; }
  .act span.c { width: 48px; height: 48px; }
  .w-acts { gap: 6px; }
  .tab-body { padding: 18px 16px; }
  .feed, .tok-list { margin: 0 -16px; }
  .feed li, .tok-list li { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .feed li { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .f-ico { width: 36px; height: 36px; }
  .recv { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .recv .recv-addr { text-align: left; }
  .set-grid, .next-grid, .g2 { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .sw-row input { font-size: 22px; }
  .tok-btn { padding-right: 10px; }
  .own-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog .d-b { padding: 20px; }
  .tp-list { margin: 0 -20px; }
  .tp-list button { padding: 11px 20px; }
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preset { min-height: 0; }
}
@media (max-width: 380px) { .act span.c { width: 44px; height: 44px; } .w-acts { gap: 2px; } }

/* ============================================================ registry logos + token flags */
.tok-av { position: relative; }
.tok-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--card2); }
.tok-av.md { width: 32px; height: 32px; font-size: 11px; }
.tok-av.lg { width: 48px; height: 48px; font-size: 13px; }
.tok-av.xl { width: 64px; height: 64px; font-size: 15px; }
.tok-ver { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); margin-left: 6px; vertical-align: -2px; flex: none; }
.tok-ver .ic { width: 11px; height: 11px; stroke-width: 3; }
.badge.b-fail .ic { width: 12px; height: 12px; }
.tok-name .badge.b-fail, .tp-list .badge.b-fail { margin-left: 6px; }
.amt-logo { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; vertical-align: -3px; margin-right: 6px; }

/* ============================================================ pay an invoice */
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; }
.pay-grid > * { min-width: 0; }
.pay-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 18px; }
.pay-mer { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.pay-mer .k, .pay-amt .k { color: var(--muted); font-size: 13px; }
.pay-mer h3 { font-size: 19px; margin: 2px 0 6px; overflow-wrap: anywhere; }
.pay-logo { position: relative; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; display: block; background: var(--card2); }
.pay-logo .avatar, .pay-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pay-logo img { object-fit: cover; background: var(--card2); }
.pay-ver { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--amber); }
.pay-ver .ic { margin-top: 2px; }
.pay-ver.ok { color: var(--ok); }
.pay-ver.ok b { color: var(--text); font-weight: 500; }
.pay-desc { margin: 0; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.pay-amt { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; display: grid; gap: 4px; }
.pay-amt .v { font: 500 clamp(30px, 4.6vw, 40px)/1.1 var(--mono); letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pay-amt .v small { font: 500 15px var(--sans); color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.pay-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pay-meta #invExp { display: inline-flex; gap: 6px; align-items: center; }
.pay-meta #invExp b { font-weight: 500; color: var(--text); }
#payAct { display: grid; gap: 14px; }
#payAct:empty { display: none; }
.pay-go { width: 100%; }
.pay-two b { color: var(--text); font-weight: 500; }
.pay-trk { display: grid; gap: 14px; }
.pay-trk h3 { font-size: 16px; }
.pay-trk .trk { margin: 0; }
.pay-open { max-width: 560px; }
.vhint.inv { color: var(--text); flex-wrap: wrap; gap: 8px; }
.vhint.inv .ic { color: var(--mint); }

/* ============================================================ profile editor */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; }
.pf-grid > * { min-width: 0; }
.pf-sec { display: grid; gap: 14px; padding-bottom: 22px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.pf-sec h3 { font-size: 15px; }
.logo-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.logo-cur { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--card2); border: 1px solid var(--line2); transition: opacity .2s var(--ease-out); }
.logo-cur img, .logo-cur .avatar { width: 100%; height: 100%; object-fit: cover; }
.logo-cur .tok-av.xl { width: 100%; height: 100%; }
.logo-pick { display: grid; gap: 8px; justify-items: start; }
.logo-pick label.btn { cursor: pointer; display: inline-flex !important; flex-direction: row; align-items: center; gap: 8px !important; color: var(--text) !important; }
.logo-pick .btn:focus-within { outline: 2px solid var(--mint); outline-offset: 2px; }
.logo-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf-ctrl { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; }
.pf-ctrl .ic { color: var(--mint); margin-top: 1px; }
.pf-prev { position: sticky; top: 84px; }
.pv-k { font-size: 12.5px; color: var(--dim); }
.pv-mk { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-in); background: var(--card); border: 1px solid var(--line); }
.pv-mk b { font-weight: 500; }
.pv-mk .sub { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-ex { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-in); background: var(--card); border: 1px solid var(--line); }
.pv-ex-h { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pv-ex-h b { font-weight: 500; font-size: 16px; display: block; overflow-wrap: anywhere; }
.pv-logo { position: relative; border-radius: 50%; overflow: hidden; display: block; flex: none; background: var(--card2); }
.pv-logo img, .pv-logo .avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-desc { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.pv-ex .chip { display: inline-flex; gap: 5px; align-items: center; }
.pv-ex .chip .ic { width: 12px; height: 12px; color: var(--mint); }
.dv { display: grid; gap: 12px; }
.dv:empty { display: none; }
.dv { padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.dv-h b { font-weight: 500; }
.dv-opt { display: grid; gap: 6px; }
.dv-code { display: flex; gap: 6px; align-items: center; background: #070b14; border: 1px solid var(--line); border-radius: var(--r-in); padding: 4px 4px 4px 12px; min-width: 0; }
.dv-code code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; color: #c3cde3; }
.ok-t { color: var(--ok); display: inline-flex; gap: 6px; align-items: center; }
.logo-cta { width: 100%; display: flex; gap: 16px; align-items: center; justify-content: space-between; text-align: left; padding: 16px 18px; border-radius: var(--r); border: 1px solid rgba(92, 242, 200, .35); background: rgba(92, 242, 200, .05); }
.logo-cta b { display: block; font-weight: 500; }
.logo-cta small { color: var(--muted); font-size: 13px; }
.btn.disabled { opacity: .5; pointer-events: none; }

@media (max-width: 900px) {
  .pay-grid, .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-prev { position: static; }
}
@media (max-width: 760px) {
  .pay-card { padding: 18px; }
  .logo-cta { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- launchpad + DEX routing (v7) */
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.preset.mode { padding: 18px; min-height: 0; gap: 8px; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
.preset.mode .mode-ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint); }
.preset.mode b { font-size: 15px; }
.preset.mode small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.dex-tag { display: inline-flex; align-items: center; font: 500 11.5px var(--mono); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.dex-tag.curve { color: var(--mint); border-color: rgba(92, 242, 200, .35); background: rgba(92, 242, 200, .06); }
.pos-list .hd .dex-tag { margin-left: 4px; }
.cprog { display: grid; gap: 7px; }
.cprog-k { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.cprog-k .mono { color: var(--text); font-variant-numeric: tabular-nums; }
.cprog-bar { height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.cprog-bar span { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(92, 242, 200, .55), var(--mint)); transition: width .25s var(--ease-out); }
.cprog.done .cprog-bar span { background: var(--ok); }
.claim-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; padding: 18px; margin-bottom: 14px; border-radius: var(--r); border: 1px solid rgba(92, 242, 200, .25); background: radial-gradient(520px 160px at 0 0, rgba(92, 242, 200, .07), transparent 70%), var(--bg2); }
.claim-card .cl-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.claim-card .cl-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint); }
.claim-card .cl-amt { font: 500 24px var(--mono); font-variant-numeric: tabular-nums; margin: 2px 0 6px; overflow-wrap: anywhere; }
.claim-card .cl-amt small { font-size: 13px; color: var(--muted); }
.claim-card .cl-act { display: grid; gap: 6px; justify-items: end; }
.claim-card .cl-msg { grid-column: 1 / -1; }
.claim-card .cl-msg:empty { display: none; }
.share-box { width: 100%; display: grid; gap: 8px; text-align: left; }
.share-row { display: flex; gap: 8px; align-items: center; }
.share-row input { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-in); padding: 9px 12px; font-size: 13px; }
@media (max-width: 760px) {
  .mode-grid { grid-template-columns: 1fr; }
  .claim-card { grid-template-columns: 1fr; }
  .claim-card .cl-act { justify-items: stretch; }
}
.cprog-k { flex-wrap: wrap; }
.cprog-k span { white-space: nowrap; }
.rows dd .small.muted { font-family: var(--sans); }

/* ---------------------------------------------------------------- .qor names */
.w-qor { display: inline-flex; align-items: center; gap: 0; min-width: 0; margin-right: 6px; }
.w-qor[hidden] { display: none; }
.w-qor b { font-weight: 500; color: var(--mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-qor .icon-btn { width: 30px; height: 30px; }
.qor-link { color: var(--text) !important; font-weight: 500; }
.nm-to { min-width: 0; overflow-wrap: anywhere; }
.nm-to b { font-weight: 500; color: var(--text); margin-right: 4px; }
.nm-to .mono { font-size: 12.5px; color: var(--ok); }
.vhint:has(.nm-to) { align-items: flex-start; }
.vhint:has(.nm-to) .ic { margin-top: 2px; }
.nm-who { display: grid; gap: 2px; }
.nm-who b { font-weight: 500; }
.nm-who .mono { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.nm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: start; }
.nm-find { display: grid; gap: 0; min-width: 0; max-width: 600px; }
.nm-search { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-in); padding: 4px 16px; transition: border-color .15s ease, box-shadow .15s ease; color: var(--dim); }
.nm-search:focus-within { border-color: rgba(92, 242, 200, .6); box-shadow: 0 0 0 4px rgba(92, 242, 200, .08); }
.nm-search input { border: 0 !important; background: none !important; box-shadow: none !important; padding: 10px 0 !important; font: 500 20px var(--mono) !important; color: var(--text); flex: 1; min-width: 0; }
.nm-search .nm-suf { font: 500 20px var(--mono); color: var(--muted); }
.nm-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 16px; margin-top: 14px; }
.nm-card .sk { display: block; }
.nm-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.nm-card-h > div { min-width: 0; }
.nm-conf { color: var(--text); font-weight: 500; }
.nm-card-h .badge .ic { width: 13px; height: 13px; }
.nm-big { font: 600 26px/1.2 var(--display); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; margin-bottom: 4px; }
.nm-big span { color: var(--mint); white-space: nowrap; }
.nm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nm-step { display: inline-flex; align-items: center; gap: 6px; }
.nm-step .btn { font: 500 18px var(--mono); }
.nm-step output { min-width: 76px; text-align: center; font: 500 15px var(--sans); font-variant-numeric: tabular-nums; }
.nm-tgt { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.nm-tgt legend { font-size: 14px; color: var(--muted); margin-bottom: 8px; padding: 0; }
.nm-tgt #rtBox { display: grid; gap: 6px; padding-left: 28px; }
.nm-tgt #rtBox[hidden] { display: none; }
.nm-facts { margin: 0; }
.nm-pend { margin: 18px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nm-pend .inline-err { flex: 1 1 100%; }
.nm-mine-h { margin-top: 36px; }
.nm-list { list-style: none; margin: 0 -24px; padding: 0; }
.nm-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); }
.nm-item:first-child { border-top: 0; }
.nm-item.warn { background: rgba(255, 196, 107, .035); }
.nm-item.bad { background: rgba(255, 122, 140, .04); }
.nm-main { min-width: 0; display: grid; gap: 4px; }
.nm-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nm-t b { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.nm-t b span { color: var(--muted); }
.nm-meta { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
.nm-meta .warn { color: var(--amber); }
.nm-meta .err { color: var(--red); }
.nm-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.nm-empty .f-ico { margin-bottom: 4px; }
.recv-name { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 24px; max-width: 720px; }
.recv-name p { margin: 4px 0 0; }
.recv-name .btn { flex: none; }
.recv-qor { font: 600 30px/1.2 var(--display); letter-spacing: -.01em; margin-top: 2px; overflow-wrap: anywhere; }
.recv-qor span { color: var(--mint); white-space: nowrap; }
.recv-name.none { border-style: dashed; }
.recv-d .recv-name { text-align: left; margin: 14px 0 0; }
@media (max-width: 900px) {
  .nm-grid { grid-template-columns: minmax(0, 1fr); }
  .nm-find { max-width: none; }
}
@media (max-width: 760px) {
  .nm-list { margin: 0 -16px; }
  .nm-item { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; gap: 12px; }
  .nm-item .f-ico { width: 36px; height: 36px; }
  .nm-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .nm-acts .btn { height: 40px; }
  .nm-card { padding: 16px; }
  .nm-big { font-size: 22px; }
  .recv-name { flex-direction: column; align-items: stretch; text-align: center; }
  .recv-qor { font-size: 26px; }
  .w-qor .icon-btn { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------- escrow + subscriptions (v9) */
.esc-opt { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); padding: 14px 16px; display: grid; gap: 14px; }
.esc-opt:has(#escOn:checked) { border-color: rgba(92, 242, 200, .4); }
.esc-on b { display: block; font-weight: 500; }
.esc-on small { display: block; color: var(--muted); font-size: 13px; }
.esc-box { display: grid; gap: 12px; }
.esc-row { display: grid; gap: 8px; }
.esc-seg { flex-wrap: wrap; border-radius: 16px; }
.esc-seg button { min-height: 34px; }
.esc-custom { max-width: 320px; }
.esc-custom input { max-width: 120px; }
.esc-says { border-top: 1px solid var(--line); padding-top: 12px; }
.vhint b { color: var(--text); font-weight: 500; }
.esc-sk { padding: 18px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; display: grid; }
.cm-pend { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-pend .inline-err { flex: 1 1 100%; }
.cm-h { font-size: 14px; color: var(--muted); margin: 6px 0 10px; display: flex; gap: 8px; }
.cm-done { margin-top: 18px; }
.cm-done > summary { padding: 6px 0; }
.esc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.esc-item { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 12px; min-width: 0; }
.esc-item.disp { border-color: rgba(255, 122, 140, .3); }
.esc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; }
.esc-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.esc-t b { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.esc-amt { font: 500 20px/1.2 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.esc-amt small { font: 400 13px var(--sans); color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.esc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin: 0; }
.esc-facts > div { min-width: 0; }
.esc-facts dt { font-size: 12.5px; color: var(--dim); margin-bottom: 2px; }
.esc-facts dd { margin: 0; font-size: 14px; min-width: 0; }
.esc-facts dd .mono { font-size: 13px; }
.esc-say { margin: 0; font-size: 14px; color: var(--muted); max-width: 72ch; }
.esc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.esc-msg:empty { display: none; }
.cm-who { display: inline-grid; gap: 0; min-width: 0; max-width: 100%; vertical-align: top; }
.cm-w1 { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.cm-w2 { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.cm-w2 .mono { font-size: 12px; }
.cm-who .mono { color: var(--muted); }
.cm-me { font-weight: 500; }
.cm-who .qor-link { overflow-wrap: anywhere; }
.cm-who .cm-cp { width: 28px; height: 28px; }
.cm-you { padding: 1px 8px; font-size: 11.5px; }
.cm-mn { font-weight: 500; color: var(--text); }
.warn-t { color: var(--amber); }
.sum .cm-say { grid-column: 1 / -1; }
.sum .cm-say dd { text-align: left; word-break: normal; overflow-wrap: anywhere; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-in); padding: 10px 12px; font-size: 14px; line-height: 1.5; }
.st-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-split > div { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-in); padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
.st-split .k { font-size: 12.5px; color: var(--muted); display: grid; }
.st-split .k b { font-weight: 500; color: var(--text); font-size: 14px; }
.st-split .nm-who .mono, .st-split .k .mono { font-size: 12px; }
.st-split > div > b { font: 500 16px var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
input[type="range"] { accent-color: var(--mint); padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; height: 28px; }
.cm-intro { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; }
.cm-intro .ic { color: var(--mint); margin-top: 2px; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; }
.pl-grid > * { min-width: 0; }
.pl-new { position: sticky; top: 84px; }
.pl-period { display: grid; gap: 8px; }
.pl-period .seg { justify-self: start; }
.pl-days { max-width: 140px; }
.due-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); }
.due-card > div { display: grid; gap: 2px; min-width: 0; }
.due-card b { font-weight: 500; }
.pl-subs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.pl-subs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.ch-res { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ch-res li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.ch-res .ok-t { color: var(--ok); }
.sb-terms { padding: 0; }
.sb-per { display: grid; gap: 8px; }
.sb-per .seg { justify-self: start; flex-wrap: wrap; border-radius: 16px; }
.sb-per p { margin: 0; }
.sb-steps { margin: 0 0 4px; }
@media (max-width: 900px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-new { position: static; }
}
@media (max-width: 760px) {
  .esc-item { padding: 14px; }
  .esc-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .esc-acts .btn { height: 40px; }
  .st-split { grid-template-columns: 1fr; }
  .pl-subs li { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-subs li > :last-child { grid-column: 1 / -1; }
  .due-card .btn { width: 100%; }
}

/* transaction preview (simulation) */
.sim { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); }
.sim-load, .sim-off { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 14px; }
.sim-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.sim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.sim-list li { padding-left: 18px; position: relative; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sim-list li::before { content: ''; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.sim-list li.in::before { background: var(--accent); }
.sim-list li.out::before { background: var(--red); }
.sim-w { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-in); font-size: 14px; border: 1px solid var(--line); }
.sim-w .ic { margin-top: 2px; flex: none; }
.sim-w.danger { background: rgba(255, 122, 140, .08); border-color: rgba(255, 122, 140, .35); }
.sim-w.danger .ic { color: var(--red); }
.sim-w.warning { background: rgba(255, 196, 92, .07); border-color: rgba(255, 196, 92, .3); }
.sim-w.warning .ic { color: #ffc45c; }
.sim-w.info .ic { color: var(--muted); }
.sim-ack { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 14px; cursor: pointer; }
.sim-ack input { width: 18px; height: 18px; accent-color: var(--red); }
.sim-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ============================================================ Qorlith Connect (wallet in a popup for a site) */
body.cx-mode #appfoot, body.cx-mode .ob-intro { display: none; }
body.cx-mode main.wrap { padding-top: 14px; padding-bottom: 24px; }
body.cx-mode .ob { grid-template-columns: minmax(0, 1fr); margin: 0 auto; max-width: 480px; gap: 0; }
body.cx-mode .ob-single { margin: 0 auto; }
body.cx-mode .ob-card { padding: 20px; }
.cx { max-width: 480px; margin: 0 auto; }
.cx-card { padding: 20px; display: grid; gap: 14px; }
.cx-card > * { margin: 0; }
.cx-card h2 { font-size: 20px; }
.cx-lead { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.cx-lead b { color: var(--text); font-weight: 500; }
.cx-site { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-in); background: var(--bg2); border: 1px solid var(--line); min-width: 0; }
.cx-site-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cx-site-t b { font-weight: 500; font-size: 15.5px; overflow-wrap: anywhere; }
.cx-site-t .mono { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.cx-site .badge { flex: none; }
.cx-fav { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--card2); border: 1px solid var(--line2); font: 600 15px/1 var(--sans); color: var(--muted); }
.cx-fav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card2); }
.cx-qor { color: var(--mint); font-weight: 500; font-size: 13px; }
.cx-perm { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.cx-perm li { display: flex; gap: 10px; align-items: flex-start; }
.cx-perm .ic { margin-top: 2px; flex: none; color: var(--ok); }
.cx-perm li.no .ic { color: var(--red); }
.cx-card .d-actions { margin-top: 2px; }
.cx-card .hint { margin: 0; }
.cx-bal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px; }
.cx-bal #bal { font: 500 18px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.cx-bal #bal small { font-size: 13px; color: var(--muted); margin-left: 5px; }
.cx-h { font-size: 14px; color: var(--muted); font-weight: 500; }
.cx-log { list-style: none; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.cx-log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 13.5px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.cx-log li > span { overflow-wrap: anywhere; }
.cx-log li .ic { margin-top: 2px; }
.cx-log li.ok .ic { color: var(--ok); } .cx-log li.no .ic { color: var(--muted); } .cx-log li.err .ic { color: var(--red); } .cx-log li.wait .ic { color: var(--amber); }
.cx-log li.none { display: block; background: none; border: 0; padding: 0; }
.cx-foot { flex-wrap: wrap; }
.req-by { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--mint-soft); border: 1px solid rgba(92, 242, 200, .25); font-size: 13.5px; overflow-wrap: anywhere; min-width: 0; }
.req-by .ic { flex: none; color: var(--mint); }
.req-by b { font-weight: 500; }
.cx-msg { margin: 6px 0 0; padding: 12px 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.55 var(--mono); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-in); color: var(--text); }
.site-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-in); background: var(--bg2); border: 1px solid var(--line); }
.site-list b { font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  body.cx-mode dialog .d-b { padding: 18px; }
  .cx-card, body.cx-mode .ob-card { padding: 16px; }
}

/* ============================================================ NFTs */
.nft-seg { margin-top: -4px; }
.nft-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.nft-card { position: relative; display: grid; gap: 10px; align-content: start; width: 100%; padding: 10px; text-align: left; font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .15s ease, transform .2s var(--ease-out); }
.nft-card:active { transform: scale(.98); }
@media (hover: hover) { .nft-card:hover { border-color: var(--line2); } .nft-card:hover .nft-img img { transform: scale(1.03); } }
.sk-card { cursor: default; }
.nft-img { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, hsl(var(--h, 170) 55% 30%), hsl(calc(var(--h, 170) + 50) 50% 18%)); }
.nft-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card2); z-index: 1; transition: transform .35s var(--ease-out); image-rendering: auto; }
.nft-ph { position: absolute; inset: 0; display: grid; place-items: center; font: 500 clamp(16px, 4vw, 26px) var(--mono); color: rgba(255, 255, 255, .7); letter-spacing: -.02em; }
.nft-img.lg .nft-ph { font-size: 40px; }
.nft-meta { display: grid; gap: 2px; min-width: 0; padding: 0 2px 2px; }
.nft-meta b { font-weight: 500; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nft-meta .sub { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nft-tag { position: absolute; top: 18px; left: 18px; z-index: 2; font: 500 11.5px var(--mono); padding: 3px 8px; border-radius: 999px; background: rgba(5, 7, 13, .78); border: 1px solid rgba(92, 242, 200, .4); color: var(--mint); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nft-col-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; font: 600 11px var(--sans); color: rgba(255, 255, 255, .92); background: linear-gradient(135deg, hsl(var(--h, 170) 65% 55%), hsl(calc(var(--h, 170) + 45) 60% 38%)); }
.nft-col-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card2); }
.nft-rows { gap: 6px; }
.nft-rows > div { font-size: 13px; }
.nft-rows dd { font-family: var(--sans); font-size: 13px; }
.nft-mh { display: flex; gap: 12px; align-items: center; min-width: 0; }
.nft-mh p { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

dialog.wide { width: min(780px, calc(100% - 24px)); }
.nft-d { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; margin-top: 14px; align-items: start; }
.nft-d-img .nft-img { border: 1px solid var(--line); }
.nft-d-info { display: grid; gap: 12px; min-width: 0; }
.nft-d-col { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.nft-d-desc { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; white-space: pre-line; }
.nft-sum { margin: 0; }
.nft-attrs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.nft-attrs li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-in); background: var(--bg2); border: 1px solid var(--line); min-width: 0; }
.nft-attrs span { font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nft-attrs b { font-weight: 500; font-size: 13.5px; overflow-wrap: anywhere; }
.nft-d-act { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
dialog .back-link { margin-bottom: 10px; }

.om-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.om-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); }
.om-fields { gap: 12px; }
.om-fields [data-p] { display: grid; gap: 12px; }
.om-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.om-top b { font-weight: 500; margin-right: auto; }
.om-top .seg button { padding: 5px 10px; font-size: 12.5px; }
.om-file { justify-self: start; cursor: pointer; display: inline-flex !important; flex-direction: row; align-items: center; gap: 8px !important; color: var(--text) !important; }
.om-file:focus-within { outline: 2px solid var(--mint); outline-offset: 2px; }

.mint-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: start; }
.mint-grid > * { min-width: 0; }
.mint-art { display: grid; gap: 10px; }
.mint-art > .nft-img { border: 1px solid var(--line); border-radius: var(--r); }
.mint-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mint-strip .nft-img { border-radius: 10px; }
.mint-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 16px; }
.mint-h { display: flex; gap: 12px; align-items: center; }
.mint-h h2, .buy-h { font-size: 22px; overflow-wrap: anywhere; }
.buy-h { margin: 4px 0 4px; }
.mint-price { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; display: grid; gap: 4px; }
.mint-price .k { color: var(--muted); font-size: 13px; }
.mint-price .v { font: 500 clamp(28px, 4vw, 36px)/1.1 var(--mono); letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mint-price .v small { font: 500 15px var(--sans); color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.mint-card .lbl-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); margin-bottom: 8px; }
.mint-meter span { background: var(--grad); }
.mint-q { display: flex; gap: 8px; align-items: center; }
.mint-q input { text-align: center; font: 500 18px var(--mono) !important; max-width: 110px; }
.mint-q .btn { width: 46px; height: 46px; padding: 0; justify-content: center; font: 500 20px var(--mono); flex: none; }
#mGo, #bGo { width: 100%; }

@media (max-width: 900px) {
  .mint-grid { grid-template-columns: minmax(0, 1fr); }
  .mint-art { max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  .nft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nft-card { padding: 8px; gap: 8px; }
  .nft-tag { top: 14px; left: 14px; }
  .nft-d { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nft-d-img { max-width: 360px; width: 100%; justify-self: center; }
  .om-item { grid-template-columns: minmax(0, 1fr); }
  .om-prev { max-width: 160px; }
  .mint-card { padding: 18px; }
  .nft-own { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================ account security: key change, guardians, recovery */
.sec-banner { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r); border: 1px solid rgba(255, 196, 107, .4); background: rgba(255, 196, 107, .07); }
.sec-banner > .ic { color: var(--amber); flex: none; align-self: flex-start; margin-top: 2px; }
.sec-banner > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sec-banner b { font-weight: 600; }
.sec-banner span { color: var(--muted); font-size: 14px; }
.sec-banner .btn { flex: none; }
.sec-banner.bad { border-color: rgba(255, 122, 140, .45); background: rgba(255, 122, 140, .08); }
.sec-banner.bad > .ic { color: var(--red); }
.sec-blk { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; display: grid; gap: 14px; }
.sec-blk .sec-h { margin: 0; }
.sec-blk .sec-h p { max-width: 70ch; }
.sec-blk > .small { margin: 0; }
.sec-blk .form textarea { min-height: 84px; }
.danger-text { color: var(--red) !important; }
.file-btn { cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--mint); outline-offset: 2px; }
.rec-alert { border: 1px solid rgba(255, 122, 140, .4); background: rgba(255, 122, 140, .06); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 12px; margin-bottom: 18px; }
.rec-alert h3 { display: flex; gap: 8px; align-items: center; font-size: 16px; }
.rec-alert h3 .ic { color: var(--red); }
.rec-alert p { margin: 0; color: var(--muted); font-size: 14px; max-width: 72ch; }
.rec-alert.warnish { border-color: rgba(255, 196, 107, .4); background: rgba(255, 196, 107, .06); margin: 0; }
.rec-alert.warnish h3 .ic { color: var(--amber); }
.rec-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rec-reqs li { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-in); padding: 12px 14px; display: grid; gap: 8px; min-width: 0; }
.rec-req-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rec-st { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.rec-st .ic { margin-top: 3px; color: var(--amber); }
.rec-st.ready { color: var(--text); }
.rec-st.ready .ic { color: var(--red); }
.key-code { font: 500 14px var(--mono); letter-spacing: .06em; color: var(--text); white-space: nowrap; }
.key-code.big { font-size: clamp(20px, 3.4vw, 26px); letter-spacing: .08em; color: var(--mint); }
.kc-box { display: grid; gap: 4px; justify-items: start; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-in); padding: 12px 16px; }
.g-empty { display: flex; gap: 14px; align-items: flex-start; background: var(--bg2); border: 1px dashed var(--line2); border-radius: var(--r); padding: 16px 18px; }
.g-empty > .ic { color: var(--mint); margin-top: 2px; }
.g-empty p { margin: 4px 0 0; max-width: 64ch; }
.g-facts { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.g-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
.g-list li > .ic { color: var(--muted); justify-self: center; }
.g-list li.ok > .ic { color: var(--ok); }
.g-list .avatar { border-radius: 6px; }
.g-list .pos { color: var(--ok); }
.g-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line2); justify-self: center; }
.g-form { max-width: 620px; }
.g-fs { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.g-fs legend { padding: 0; margin-bottom: 8px; }
.g-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-rows label { display: grid; gap: 6px; }
.g-row { display: flex; gap: 6px; align-items: center; }
.g-row input { flex: 1; min-width: 0; }
.g-form select#gTh { max-width: 200px; }
.ck-steps { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
.rec-wrap { max-width: 640px; }
.rec-card h2 { margin-top: 10px; }
.rec-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.rec-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; position: relative; padding-bottom: 22px; }
.rec-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--line2); }
.rec-steps > li > div { display: grid; gap: 10px; min-width: 0; }
.rec-steps > li > div > b { font-weight: 500; font-size: 15px; line-height: 30px; }
.rec-steps > li p { margin: 0; color: var(--muted); font-size: 14px; }
.rec-steps .rs-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 13px var(--mono); border: 1px solid var(--line2); color: var(--muted); background: var(--bg2); }
.rec-steps > li.on .rs-n { border-color: var(--mint); color: var(--mint); }
.rec-steps > li.done .rs-n { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.rec-steps > li:not(.on):not(.done) > div > b { color: var(--muted); }
.rec-foot { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.gv { display: grid; gap: 16px; max-width: 720px; }
.gv-who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.gv-who > div { display: grid; min-width: 0; }
.gv-who b { font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.gv-who .mono-addr { overflow-wrap: anywhere; }
.gv-act { display: grid; gap: 12px; }
.gv-act .rec-alert { margin: 0; }
.gv-ack { font-size: 14px; }
.rq-form { max-width: 620px; }
@media (max-width: 760px) {
  .sec-banner { flex-wrap: wrap; }
  .sec-banner .btn { margin-left: 30px; }
  .g-list li { grid-template-columns: 22px minmax(0, 1fr); }
  .g-list li > .small { grid-column: 2; margin-top: -6px; }
  .rec-foot { justify-content: flex-start; }
}
#gBody { display: grid; gap: 14px; }
#gBody .btn-row.mt { margin-top: 0; }
.form label.file-btn, label.file-btn { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
.set-nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 760px) { .g-facts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .sec-banner > div { flex: 1 1 calc(100% - 40px); } }
/* Settings, Accounts: link to the browser extension */
.ext-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; max-width: 760px; }
.ext-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ext-card .btn { justify-self: end; }
@media (max-width: 600px) { .ext-card { grid-template-columns: 1fr; } .ext-card .btn { justify-self: start; } }

/* ============================================================ other networks (networks.js) */
.mc-note { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--r-in); background: rgba(255, 196, 107, .06); border: 1px solid rgba(255, 196, 107, .28); margin-bottom: 18px; }
.mc-note > .ic { color: var(--amber); margin-top: 2px; }
.mc-note > div { display: grid; gap: 4px; min-width: 0; }
.mc-note b { font-weight: 500; }
.mc-note span { color: var(--muted); font-size: 14px; }
.mc-av { font-size: 10.5px; letter-spacing: -.01em; color: #08101c; }
.mc-av.lg { width: 48px; height: 48px; font-size: 12.5px; }
.mc-av.xs { width: 22px; height: 22px; font-size: 7.5px; }
.mc-av.off { filter: grayscale(1); opacity: .45; }
.mc-name { background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.mc-name:hover b { color: var(--mint); }
.mc-name:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }
.mc-list .tok-name .badge { font-size: 11px; padding: 1px 8px; vertical-align: 1px; }
.mc-list .tok-num small.mc-inl { display: inline; }
.mc-tokm { display: none; }
.mc-tokm:empty { display: none !important; }
.mc-retry { color: var(--amber); }
.mc-h { font-size: 14px; color: var(--muted); font-weight: 500; margin: 26px 0 10px; }
.mc-soon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.mc-soon li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--r-in); color: var(--dim); }
.mc-soon .tok-av { width: 32px; height: 32px; }
.mc-soon span { display: grid; min-width: 0; }
.mc-soon b { font-weight: 500; color: var(--muted); }
.mc-soon small { font-size: 12.5px; }
.mc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 14px; }
.mc-head-t { min-width: 0; }
.mc-head h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-head .badge { font-size: 11.5px; padding: 2px 9px; }
.mc-bal { font: 500 26px/1.15 var(--mono); letter-spacing: -.03em; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mc-bal small { font: 500 13px var(--sans); color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.mc-assets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mc-assets:empty { display: none; }
.mc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); font-size: 13.5px; }
.mc-chip b { font: 500 13.5px var(--mono); font-variant-numeric: tabular-nums; }
.mc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.mc-faucet { position: relative; }
.mc-faucet > summary { list-style: none; }
.mc-faucet > summary::-webkit-details-marker { display: none; }
.mc-fmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: min(300px, 86vw); background: var(--card2); border: 1px solid var(--line2); border-radius: 14px; padding: 12px; display: grid; gap: 4px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.mc-fmenu p { margin: 0 0 6px; }
.mc-fmenu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--text); font-size: 14px; }
.mc-fmenu a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.mc-sub { font-size: 16px; }
.mc-body .send-grid .form { max-width: 520px; }
.mc-dd { font-family: var(--sans) !important; font-size: 14px !important; }
.mc-body .recv .sim-w { margin-top: 0; }
.mc-netline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.mc-netline b { font-weight: 500; }
.mc-keys { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.mc-keys li { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.mc-keys li:first-child { border-top: 0; padding-top: 0; }
.mc-keys p { margin: 0; }
.mc-key-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mc-key-h b { font-weight: 500; }
.mc-secret { font-size: 12.5px; word-break: break-all; max-height: 7.5em; overflow: auto; }
.set-grid .mc-exp { grid-column: 1 / -1; }
.mc-ck { margin-top: 14px; }
.mc-ck h3 { font-size: 14.5px; }
.mc-ck p { font-size: 13.5px; }
.mc-cklist { margin: 6px 0 10px; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }
.mc-ck .check { font-size: 13.5px; }
@media (max-width: 900px) {
  .mc-list li .tok-acts { grid-column: 2 / -1; }
  .mc-tokm { display: block; }
}
@media (max-width: 760px) {
  .mc-head { grid-template-columns: auto minmax(0, 1fr); }
  .mc-bal { grid-column: 1 / -1; text-align: left; }
  .mc-note { padding: 12px 13px; }
}
.mc-okline { display: flex; align-items: center; gap: 8px; }
.mc-okline .ic { color: var(--ok); }
.sum.mc-sum { margin-top: 16px; }