/* ============================================================
   DESIGN SYSTEM — Multi-Chain Distributor
   Dark-first web3 palette + light theme. Token names preserve
   the PRD §12 contract (--bg --card --line --accent --green
   --red --amber --text --muted) so injected #result HTML stays
   consistent. Extra tokens are additive only.
   ============================================================ */
:root{
  /* ---- DARK (default) ---- */
  --bg:        #0a0c12;
  --bg-2:      #0e1119;
  --card:      #14172180;          /* glassy surface */
  --card-solid:#141721;
  --line:      #262b3a;
  --line-2:    #323849;
  --accent:    #7c5cff;            /* PRD violet */
  --accent-2:  #9d86ff;
  --accent-ink:#ffffff;
  --green:     #22c98a;
  --red:       #f0584b;
  --amber:     #f2c037;
  --cyan:      #38bdf8;
  --text:      #eceefb;
  --muted:     #8b91a6;

  /* additive design tokens */
  --radius:    16px;
  --radius-sm: 11px;
  --radius-pill:999px;
  --shadow:    0 24px 60px -28px rgba(0,0,0,.85);
  --ring:      0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
  --grad-accent: linear-gradient(135deg,#8b6cff,#6a4bff 60%,#5a8bff);
  --grad-hero: radial-gradient(1200px 600px at 78% -10%, color-mix(in oklab,var(--accent) 26%, transparent), transparent 60%),
               radial-gradient(900px 500px at 8% 0%, color-mix(in oklab,var(--cyan) 14%, transparent), transparent 55%);
  --mono: 'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
  --sans: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --maxw: 1000px;
  color-scheme: dark;
}
[data-theme="light"]{
  --bg:        #f6f7fb;
  --bg-2:      #eef0f7;
  --card:      #ffffffcc;
  --card-solid:#ffffff;
  --line:      #e3e6f0;
  --line-2:    #d3d8e8;
  --accent:    #6a45ff;
  --accent-2:  #7c5cff;
  --accent-ink:#ffffff;
  --green:     #11a06b;
  --red:       #dc3a2d;
  --amber:     #b9860b;
  --cyan:      #0a8fc9;
  --text:      #161a26;
  --muted:     #5c6477;
  --shadow:    0 22px 50px -30px rgba(31,38,72,.45);
  --grad-hero: radial-gradient(1100px 560px at 80% -12%, color-mix(in oklab,var(--accent) 16%, transparent), transparent 60%),
               radial-gradient(820px 460px at 6% -4%, color-mix(in oklab,var(--cyan) 12%, transparent), transparent 55%);
  color-scheme: light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.011em;
  min-height:100dvh;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--grad-hero);opacity:1;transition:opacity .4s;
}
a{color:inherit}
::selection{background:color-mix(in oklab,var(--accent) 40%,transparent)}

/* ---------- Header ---------- */
.appbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in oklab,var(--bg) 78%,transparent);
  border-bottom:1px solid var(--line);
}
.appbar-in{
  max-width:var(--maxw);margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:16px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.logo{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--grad-accent);
  display:grid;place-items:center;
  box-shadow:0 6px 18px -6px var(--accent), inset 0 0 0 1px rgba(255,255,255,.16);
}
.logo svg{width:21px;height:21px;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-txt b{font-size:15px;font-weight:650;letter-spacing:-.02em}
.brand-txt span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-spacer{flex:1}
.appbar-status{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--muted);
  padding:7px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:color-mix(in oklab,var(--card-solid) 60%,transparent);
  max-width:230px;
}
.appbar-status .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;transition:.25s}
.appbar-status.live .dot{background:var(--green);box-shadow:0 0 0 4px color-mix(in oklab,var(--green) 22%,transparent)}
.appbar-status code{font-family:var(--mono);color:var(--text);font-size:12px}
.theme-toggle{
  width:44px;height:44px;flex:none;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:color-mix(in oklab,var(--card-solid) 60%,transparent);
  color:var(--text);display:grid;place-items:center;transition:.2s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent-2)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-sun{display:block}
[data-theme="light"] .theme-toggle .ic-moon{display:none}

/* ---------- Layout ---------- */
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:34px 22px 96px}
.hero{margin:6px 0 26px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:14px;
  padding:5px 11px;border:1px solid color-mix(in oklab,var(--accent) 40%,var(--line));
  border-radius:var(--radius-pill);background:color-mix(in oklab,var(--accent) 9%,transparent);
}
h1{
  font-size:clamp(28px,5vw,42px);line-height:1.05;font-weight:680;
  letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance;
}
h1 em{font-style:normal;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:clamp(14px,1.6vw,16px);max-width:60ch;text-wrap:pretty;margin:0}

/* ---------- Step rail ---------- */
.steps{
  display:flex;gap:8px;margin:24px 0 6px;flex-wrap:wrap;
}
.step{
  display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:0;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--card-solid) 50%,transparent);transition:.25s;
}
.step.done,.step.cur{border-color:color-mix(in oklab,var(--accent) 55%,var(--line))}
.step .n{
  width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  background:color-mix(in oklab,var(--text) 8%,transparent);color:var(--muted);transition:.25s;
}
.step.cur .n,.step.done .n{background:var(--grad-accent);color:#fff}
.step .lbl{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.step .lbl b{font-size:13px;font-weight:600}
.step .lbl span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 22px 24px;
  margin-top:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.card-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px}
.card-num{
  width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:650;font-size:14px;
  color:var(--accent-2);background:color-mix(in oklab,var(--accent) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);
}
.card-head h2{font-size:16.5px;font-weight:640;letter-spacing:-.02em;margin:0}
.card-head p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- Form primitives ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > label{font-size:12.5px;font-weight:560;color:var(--text)}
.hint{font-size:11.5px;color:var(--muted);line-height:1.45}

select,input,textarea{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--text);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:0 13px;min-height:46px;transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:120px;padding:12px 13px;line-height:1.55;resize:vertical;font-family:var(--mono);font-size:13px}
input{font-family:var(--mono)}
input::placeholder,textarea::placeholder{color:color-mix(in oklab,var(--muted) 80%,transparent);font-family:var(--sans)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.select-wrap{position:relative}
.select-wrap::after{
  content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
}
select{padding-right:34px}

/* ---------- Icon select (network dropdown) ---------- */
.tk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;flex:none}
.icon-select{position:relative}
.icon-select-trigger{
  appearance:none;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:10px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  min-height:46px;padding:0 13px;color:var(--text);font-family:var(--sans);font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.icon-select-trigger:hover{border-color:var(--line)}
.icon-select.open .icon-select-trigger{border-color:var(--accent);box-shadow:var(--ring)}
.icon-select-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-select-caret{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .2s}
.icon-select.open .icon-select-caret{transform:rotate(180deg)}
.icon-select-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;
  background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px;display:flex;flex-direction:column;gap:4px;
  box-shadow:var(--shadow);animation:wpIn .15s ease;
}
.icon-select-menu[hidden]{display:none}
.icon-select-item{
  appearance:none;cursor:pointer;width:100%;text-align:left;
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--text);font-family:var(--sans);font-size:13.5px;font-weight:560;transition:.14s;
}
.icon-select-item:hover{background:var(--bg-2);border-color:var(--line-2)}
.icon-select-item.sel{background:color-mix(in oklab,var(--accent) 12%,var(--bg-2));border-color:var(--accent)}
.icon-select-item .nm{flex:1}
.icon-select-item .ck{width:16px;height:16px;flex:none;color:var(--accent);opacity:0}
.icon-select-item.sel .ck{opacity:1}
.icon-select-item .ck svg{width:100%;height:100%}

/* ---------- Buttons ---------- */
.btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:4px}
.btn{
  appearance:none;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--text);background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:0 18px;min-height:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:.16s;letter-spacing:-.01em;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{border-color:var(--accent);color:var(--accent-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;border-color:var(--line-2);color:var(--muted)}
.btn.primary{
  background:var(--grad-accent);border-color:transparent;color:#fff;
  box-shadow:0 10px 24px -12px var(--accent), inset 0 0 0 1px rgba(255,255,255,.14);
}
.btn.primary:hover{filter:brightness(1.07);color:#fff}
.btn.primary:disabled{background:var(--line);box-shadow:none;color:var(--muted)}
.btn.exec{
  background:linear-gradient(135deg,#26d796,#11a06b);border-color:transparent;color:#04231a;
  box-shadow:0 10px 24px -12px var(--green), inset 0 0 0 1px rgba(255,255,255,.18);
}
.btn.exec:hover{filter:brightness(1.06);color:#04231a}
.btn.exec:disabled{background:var(--line);box-shadow:none;color:var(--muted)}
.btn.ghost-danger:hover{border-color:var(--red);color:var(--red)}
.btn-grow{flex:1 1 auto}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;
  padding:6px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--muted);
}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.badge.ok{color:var(--green);border-color:color-mix(in oklab,var(--green) 45%,transparent);background:color-mix(in oklab,var(--green) 12%,transparent)}
.badge.ok::before{background:var(--green);box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 22%,transparent)}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.badge-row .k{font-size:11px;color:var(--muted);font-family:var(--sans)}

/* ---------- Mainnet warning ---------- */
.netwarn{
  display:flex;gap:11px;align-items:flex-start;
  margin:2px 0 16px;padding:12px 14px;border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--red) 11%,transparent);
  border:1px solid color-mix(in oklab,var(--red) 38%,transparent);
  color:color-mix(in oklab,var(--red) 88%,var(--text));font-size:12.5px;line-height:1.45;
}
.netwarn svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--red)}
.netwarn b{color:var(--text)}

/* ---------- Result / output contract (PRD §10) ---------- */
#result{margin-top:26px;display:flex;flex-direction:column;gap:14px}
#result:empty{display:none}
.msg{padding:13px 15px;border-radius:var(--radius-sm);font-size:13px;line-height:1.5;border:1px solid var(--line)}
.msg.info{background:color-mix(in oklab,var(--cyan) 10%,transparent);border-color:color-mix(in oklab,var(--cyan) 35%,transparent);color:color-mix(in oklab,var(--cyan) 86%,var(--text))}
.msg.warn{background:color-mix(in oklab,var(--amber) 12%,transparent);border-color:color-mix(in oklab,var(--amber) 40%,transparent);color:color-mix(in oklab,var(--amber) 90%,var(--text))}
.msg.err{background:color-mix(in oklab,var(--red) 11%,transparent);border-color:color-mix(in oklab,var(--red) 40%,transparent);color:color-mix(in oklab,var(--red) 90%,var(--text))}
.msg b{color:var(--text)}
.msg code{font-family:var(--mono);font-size:12px}

#result .card{margin-top:0;padding:18px 18px 8px}
table{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 14px}
thead th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line-2);
}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.total td{font-weight:700;color:var(--text);border-top:1px solid var(--line-2)}
td.addr{font-family:var(--mono);font-size:12px;color:var(--muted)}
td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
th.num{text-align:right}

/* pills (PRD §10) */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--green);background:color-mix(in oklab,var(--green) 14%,transparent);border-color:color-mix(in oklab,var(--green) 40%,transparent)}
.pill.err{color:var(--red);background:color-mix(in oklab,var(--red) 14%,transparent);border-color:color-mix(in oklab,var(--red) 40%,transparent)}
.pill.wait{color:var(--amber);background:color-mix(in oklab,var(--amber) 16%,transparent);border-color:color-mix(in oklab,var(--amber) 42%,transparent)}
.pill.wait::before{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

.summary{display:flex;gap:18px;flex-wrap:wrap;padding:4px 2px 12px;font-size:12.5px;color:var(--muted)}
.summary b{font-family:var(--mono);font-size:15px;color:var(--text);display:block}

/* ---------- footer note ---------- */
.foot{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.foot .lock{color:var(--green)}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .row{grid-template-columns:1fr}
  .appbar-in{padding:12px 16px;gap:10px}
  .brand-txt span{display:none}
  .appbar-status{max-width:150px}
  .appbar-status .net-label{display:none}
  .wrap{padding:24px 16px 80px}
  .card{padding:18px 16px 20px}
  .step{flex:1 1 100%}
  .btns{flex-direction:column}
  .btn{width:100%}
  .btn-grow{flex:1 1 auto}
}
@media (max-width:380px){
  .appbar-status{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ============================================================
   Header wallet connect — trigger + popover panel
   ============================================================ */
.wallet-ctl{position:relative;flex:none}
.wallet-trigger{
  appearance:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:-.01em;color:#fff;
  background:var(--grad-accent);border:1px solid transparent;
  border-radius:12px;min-height:44px;padding:0 14px;
  display:inline-flex;align-items:center;gap:9px;transition:.18s;
  box-shadow:0 10px 24px -14px var(--accent), inset 0 0 0 1px rgba(255,255,255,.16);
}
.wallet-trigger:hover{filter:brightness(1.07)}
.wallet-trigger:active{transform:translateY(1px)}
.wallet-trigger .wt-ic{width:18px;height:18px;flex:none}
.wallet-trigger .wt-label{white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.wallet-trigger .wt-caret{width:14px;height:14px;flex:none;opacity:.8;transition:transform .2s}
.wallet-ctl.open .wallet-trigger .wt-caret{transform:rotate(180deg)}

/* connected state — calmer surface + green status dot */
.wallet-ctl.connected .wallet-trigger{
  background:color-mix(in oklab,var(--card-solid) 70%,transparent);
  color:var(--text);
  border-color:color-mix(in oklab,var(--green) 45%,var(--line));
  box-shadow:none;
}
.wallet-ctl.connected .wallet-trigger .wt-ic{color:var(--green)}
.wallet-ctl.connected .wallet-trigger .wt-label{font-family:var(--mono);font-size:12.5px}

.wallet-panel{
  position:absolute;top:calc(100% + 12px);right:0;z-index:60;
  width:344px;max-width:calc(100vw - 32px);
  background:var(--card-solid);
  border:1px solid var(--line);border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transform-origin:top right;
  animation:wpIn .17s cubic-bezier(.2,.7,.3,1);
}
@keyframes wpIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

/* head — icon tile + title, tinted with accent + divider */
.wallet-panel .wp-head{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px;
  border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--accent) 7%,transparent);
}
.wallet-panel .wp-ic{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;color:#fff;
  background:var(--grad-accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 16px -10px var(--accent);
}
.wallet-panel .wp-ic svg{width:20px;height:20px}
.wallet-panel .wp-head h2{font-size:15px;font-weight:650;letter-spacing:-.02em;margin:0}
.wallet-panel .wp-head p{margin:2px 0 0;font-size:11.5px;color:var(--muted);line-height:1.4}

/* body — field + actions */
.wallet-panel .wp-body{padding:16px}
.wallet-panel .wp-body .field{margin-bottom:14px}
.wallet-panel .btns{flex-direction:column;margin:0}
.wallet-panel .btn{width:100%}

/* icon wallet list (replaces the native select) */
.wallet-list{display:flex;flex-direction:column;gap:6px;max-height:236px;overflow-y:auto;padding-right:2px}
.wallet-item{
  appearance:none;cursor:pointer;width:100%;text-align:left;
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--text);font-family:var(--sans);font-size:13.5px;font-weight:560;
  transition:border-color .14s, background .14s, box-shadow .14s;
}
.wallet-item:hover{border-color:color-mix(in oklab,var(--accent) 60%,var(--line-2))}
.wallet-item.sel{
  border-color:var(--accent);
  background:color-mix(in oklab,var(--accent) 12%,var(--bg-2));
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 35%,transparent);
}
.wallet-item .wi-ic{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.wallet-item .wi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-item .wi-check{width:18px;height:18px;flex:none;color:var(--accent);opacity:0;transform:scale(.7);transition:.14s}
.wallet-item .wi-check svg{width:100%;height:100%}
.wallet-item.sel .wi-check{opacity:1;transform:none}

/* foot — status as a clean key/value grid */
.wallet-panel .wp-foot{
  padding:13px 16px;
  border-top:1px solid var(--line);
  background:color-mix(in oklab,var(--bg-2) 55%,transparent);
}
.wallet-panel .badge-row{
  display:grid;grid-template-columns:auto 1fr;gap:9px 12px;align-items:center;
}
.wallet-panel .badge-row .k{font-size:11.5px;color:var(--muted)}
.wallet-panel .badge-row .badge{
  justify-self:end;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width:720px){
  /* status pill is redundant with the trigger — hide it */
  .appbar-status{display:none}

  /* mobile: trigger collapses to a single round wallet icon.
     Connected state shows as a green icon + green ring (no label needed). */
  .wallet-trigger{padding:0;width:44px;height:44px;justify-content:center;border-radius:50%}
  .wallet-trigger .wt-label,
  .wallet-trigger .wt-caret{display:none}
  .wallet-trigger .wt-ic{width:20px;height:20px}
  .wallet-ctl.connected .wallet-trigger{
    box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 22%,transparent);
  }

  /* light scrim so the dropdown reads as a focused layer (tap to close) */
  .wallet-ctl.open::before{
    content:"";position:fixed;inset:0;z-index:55;
    background:color-mix(in oklab,#05070d 50%,transparent);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    animation:wpScrim .2s ease;
  }
  @keyframes wpScrim{from{opacity:0}to{opacity:1}}

  /* compact dropdown card anchored under the wallet icon (top-right).
     Capped width + right rail keep it tidy — never full-bleed, never overflows. */
  .wallet-panel{
    position:fixed;top:calc(env(safe-area-inset-top) + 58px);
    right:14px;left:auto;bottom:auto;
    width:min(330px, calc(100vw - 28px));max-width:none;
    max-height:calc(100dvh - 90px);overflow-y:auto;
    border-radius:16px;
    -webkit-overflow-scrolling:touch;
  }
  /* shrink the header: smaller tile, drop the subtitle */
  .wallet-panel .wp-head{padding:12px 14px;gap:10px}
  .wallet-panel .wp-ic{width:32px;height:32px;border-radius:9px}
  .wallet-panel .wp-ic svg{width:17px;height:17px}
  .wallet-panel .wp-head h2{font-size:13.5px}
  .wallet-panel .wp-head p{display:none}
  /* tighter body + capped list so it doesn't dominate the screen */
  .wallet-panel .wp-body{padding:13px 14px}
  .wallet-panel .wp-body .field{margin-bottom:11px}
  .wallet-panel .wp-foot{padding:11px 14px}
  .wallet-list{max-height:38vh;gap:5px}
  .wallet-item{padding:8px 10px;font-size:13px}
  .wallet-item .wi-ic{width:28px;height:28px;font-size:11px}

  /* taller tap targets on touch */
  .wallet-panel .btn{min-height:48px;font-size:14px}
}

/* ============================================================
   Modal pratinjau transfer
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:color-mix(in oklab,#05070d 62%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:ovIn .15s ease;
}
.modal-overlay[hidden]{display:none}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(560px, calc(100vw - 32px));
  max-height:calc(100dvh - 48px);display:flex;flex-direction:column;
  background:var(--card-solid);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;
  animation:wpIn .18s cubic-bezier(.2,.7,.3,1);
}
.modal-head{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--accent) 7%,transparent);
}
.modal-head h2{flex:1;margin:0;font-size:16px;font-weight:650;letter-spacing:-.02em}
.modal-x{
  width:34px;height:34px;flex:none;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);color:var(--muted);
  display:grid;place-items:center;transition:.15s;
}
.modal-x:hover{color:var(--text);border-color:var(--line-2)}
.modal-x svg{width:17px;height:17px}
.modal-body{padding:16px 18px;overflow-y:auto}
.modal-body table{margin:6px 0 12px}
.modal-foot{
  display:flex;gap:11px;padding:14px 18px;border-top:1px solid var(--line);
  background:color-mix(in oklab,var(--bg-2) 55%,transparent);
}
@media (max-width:560px){
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn{width:100%}
}

/* ---------- Pilih wallet via deeplink (Solana, mobile) ---------- */
.wallet-apps{margin-bottom:14px;padding-top:12px;border-top:1px solid var(--line)}
.wallet-apps[hidden]{display:none}
.wa-label{font-size:11.5px;color:var(--muted);margin-bottom:9px;line-height:1.4}
.wa-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.wa-btn{
  appearance:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--text);font-family:var(--sans);font-size:12.5px;font-weight:560;transition:.14s;
}
.wa-btn:hover{border-color:var(--accent);color:var(--accent-2)}
.wa-btn .wi-ic{
  width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:11px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}