/* /assets/css/app.css
   ✅ Versión consolidada y funcional (sin duplicados)
   ✅ Mantiene TODO lo que ya te funciona (chat, tokens, overflow)
   ✅ Credit Card PRO + full responsive
   ✅ Botones (copiar / link / abrir) como FOOTER de la tarjeta (abajo del todo)

   NOTA: Este archivo reemplaza tu app.css completo.
*/

/* =========================
   Variables
   ========================= */
:root{
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Dark */
  --bg:#05070b;
  --bg2: rgba(11,16,32,.78);
  --bg3: rgba(11,16,32,.55);
  --line: rgba(26,37,80,.65);

  --text:#e7ecff;
  --muted:#93a4d9;

  --ok:#38d39f;
  --danger:#ff4a6b;

  --bubble-me: rgba(74,163,255,.16);
  --bubble-me-border: rgba(74,163,255,.30);
  --bubble-in: rgba(6,10,20,.42);
  --bubble-in-border: rgba(56,211,159,.22);

  --bubble-system: rgba(12,18,34,.55);
  --bubble-system-border: rgba(147,164,217,.22);

  --topbar-bg: linear-gradient(180deg, rgba(11,16,32,.94), rgba(11,16,32,.60));
  --composer-bg: rgba(8,12,24,.35);

  --orb-glow: rgba(74,163,255,.35);

  /* Composer */
  --composer-pill-bg: rgba(6,10,20,.62);
  --composer-pill-border: rgba(26,37,80,.60);
  --composer-btn-bg: rgba(74,163,255,.18);
  --composer-btn-border: rgba(74,163,255,.45);

  /* Mobile keyboard safe height */
  --app-h: 100dvh;

  /* Header buttons */
  --hdr-btn-bg: rgba(8,12,24,.38);
  --hdr-btn-border: rgba(26,37,80,.58);
  --hdr-btn-bg-hover: rgba(8,12,24,.55);

  /* word highlight */
  --hl-bg: rgba(255,255,255,.12);
  --hl-bg-light: rgba(43,108,255,.10);

  /* Credit-card sizing */
  --cc-aspect: 1.586;         /* 85.60mm / 53.98mm */
  --cc-radius: 28px;
  --cc-pad: 18px;
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --bg2: rgba(255,255,255,.88);
  --bg3: rgba(255,255,255,.72);
  --line: rgba(18,24,38,.14);

  --text:#0b1020;
  --muted: rgba(11,16,32,.62);

  --bubble-me: rgba(43,108,255,.12);
  --bubble-me-border: rgba(43,108,255,.20);
  --bubble-in: rgba(255,255,255,.92);
  --bubble-in-border: rgba(18,24,38,.10);

  --bubble-system: rgba(255,255,255,.92);
  --bubble-system-border: rgba(18,24,38,.12);

  --topbar-bg: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  --composer-bg: rgba(255,255,255,.72);

  --orb-glow: rgba(43,108,255,.22);

  --composer-pill-bg: rgba(255,255,255,.92);
  --composer-pill-border: rgba(18,24,38,.12);
  --composer-btn-bg: rgba(43,108,255,.10);
  --composer-btn-border: rgba(43,108,255,.18);

  --hdr-btn-bg: rgba(255,255,255,.85);
  --hdr-btn-border: rgba(18,24,38,.12);
  --hdr-btn-bg-hover: rgba(255,255,255,.95);
}

/* =========================
   Base
   ========================= */
html, body { height:100%; overflow-x:hidden; }
body{
  margin:0;
  color: var(--text);
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(74,163,255,.18), transparent 55%),
    radial-gradient(700px 500px at 90% 20%, rgba(43,108,255,.14), transparent 55%),
    radial-gradient(900px 600px at 50% 90%, rgba(74,163,255,.10), transparent 55%),
    var(--bg);
}
html[data-theme="light"] body{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(43,108,255,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 20%, rgba(74,163,255,.08), transparent 60%),
    radial-gradient(900px 600px at 50% 90%, rgba(43,108,255,.06), transparent 60%),
    var(--bg);
}

*, *::before, *::after { box-sizing:border-box; }
.container-fluid { max-width: 100vw; }

.bt-app{
  height: var(--app-h);
  display:flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  max-width: 100vw;
  transform: translateY(0);
  will-change: transform;
}

/* =========================
   Header shell
   ========================= */
.bt-topbar{
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Orb */
.bt-orb-slot{
  width:44px;height:44px;border-radius:999px;overflow:hidden;
  box-shadow: 0 0 26px var(--orb-glow);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
  flex: 0 0 auto;
}
html[data-theme="light"] .bt-orb-slot{
  border: 1px solid rgba(18,24,38,.10);
  background: rgba(255,255,255,.70);
}
.bt-orb-slot > canvas{ width:100% !important; height:100% !important; display:block; }

/* Pills */
.bt-pill{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(8,12,24,.10);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
}
html[data-theme="dark"] .bt-pill{ background: rgba(8,12,24,.40); }

.bt-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 12px rgba(147,164,217,.25);
}
.bt-dot.ok{ background: var(--ok); box-shadow: 0 0 12px rgba(56,211,159,.35); }
.bt-dot.bad{ background: var(--danger); box-shadow: 0 0 12px rgba(255,74,107,.35); }

/* =========================
   Header PRO (ÚNICA DEFINICIÓN)
   ========================= */
.bt-hdr{display:flex;flex-direction:column;gap:10px;}

.bt-hdr-row1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.bt-hdr-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:0 1 auto;
}

.bt-brandtext{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.bt-brand-title{
  font-weight:950;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bt-brand-sub{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.9;
}

.bt-hdr-mid{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:center;
}

.bt-hdr-metrics{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
}

.bt-pill-compact{ padding:8px 10px; }

.bt-hdr-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
  flex-wrap:nowrap;
}

/* Header buttons */
.bt-hdr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  border: 1px solid var(--hdr-btn-border);
  background: var(--hdr-btn-bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 12px;
  line-height: 1;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.bt-hdr-btn:hover{ background: var(--hdr-btn-bg-hover); filter: brightness(1.04); }
.bt-hdr-btn:active{ transform: translateY(1px); }
.bt-hdr-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.bt-hdr-btn i{ font-size: 16px; }

.bt-hdr-btn-primary{
  border-color: rgba(74,163,255,.55);
  box-shadow: 0 0 0 1px rgba(74,163,255,.12), 0 10px 26px rgba(74,163,255,.12);
}

/* Hint row */
.bt-hdr-hintrow{ display:flex; justify-content:flex-end; }
.bt-hdr-hint{ display:flex;align-items:center;gap:10px;min-width:0;opacity:.85; }
.bt-hint-dot{ width:8px;height:8px;border-radius:999px;background:rgba(74,163,255,.9);box-shadow:0 0 14px rgba(74,163,255,.25); }
.bt-hint-txt{ font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

.bt-hdr-btn-more{ display:none; }

.bt-hdr-btn.bt-topup-hot{
  box-shadow: 0 0 0 1px rgba(250,204,21,.22), 0 0 18px rgba(250,204,21,.18);
}
.bt-hdr-btn.bt-topup-critical{
  box-shadow: 0 0 0 1px rgba(255,74,107,.28), 0 0 22px rgba(255,74,107,.22);
}

/* Token pill */
.bt-tokenpill{
  padding: 8px 10px;
  gap: 6px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 190px;
}
.bt-tokenpill-top{
  display:flex;
  align-items:center;
  gap: 8px;
  line-height: 1;
}
.bt-tokenpill-mini{
  font-family: var(--mono);
  font-size: 11px;
  opacity: .75;
  margin-left: 2px;
}
.bt-tokenbar{
  width: 100%;
  min-width: 150px;
  height: 6px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
html[data-theme="light"] .bt-tokenbar{
  border: 1px solid rgba(18,24,38,.10);
  background: rgba(18,24,38,.06);
}
.bt-tokenbar-fill{
  width: 0%;
  height: 100%;
  display:block;
  border-radius: 999px;
  transform: translateZ(0);
  transition: width .25s ease;
  background: linear-gradient(90deg, rgba(56,211,159,.9), rgba(74,163,255,.9));
}
.bt-tokenbar.low .bt-tokenbar-fill{
  background: linear-gradient(90deg, rgba(250,204,21,.95), rgba(74,163,255,.85));
}
.bt-tokenbar.critical .bt-tokenbar-fill{
  background: linear-gradient(90deg, rgba(255,74,107,.95), rgba(250,204,21,.85));
}

@media (max-width: 992px){
  .bt-hdr-right{ gap:8px; }
  .bt-hdr-btn{ padding:9px 11px; }
  .bt-brand-sub{ display:none; }
}

@media (max-width: 576px){
  .bt-brand-sub{ display:none; }
  .bt-hdr-hintrow{ display:none; }

  .bt-hdr-row1{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:10px;
  }

  .bt-hdr-left{ min-width:0; }
  .bt-hdr-mid{ justify-content:center; min-width:0; }
  .bt-hdr-right{ justify-content:flex-end; gap:8px; }

  .bt-hdr-btn-action{ display:none !important; }
  .bt-hdr-btn-more{ display:inline-flex !important; }
  .bt-hdr-btn-txt{ display:none; }

  .bt-pill-compact{ padding:7px 9px; }
  .bt-tokenpill{ padding:7px 9px; min-width:160px; }
  .bt-tokenpill-mini{ display:none; }
  .bt-tokenbar{ height:5px; min-width:120px; }

  .bt-orb-slot{ width:40px; height:40px; }
}

/* =========================
   Chat
   ========================= */
.bt-chat{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg2), var(--bg3));
  overflow: hidden;
}

.bt-messages{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  overflow-x:hidden;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.bt-composer{
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--composer-bg);
  padding: 12px;
  backdrop-filter: blur(12px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* =========================
   Bubbles
   ========================= */
.bt-msg{
  max-width: min(860px, 92%);
  position: relative;
  padding: 12px 12px 10px 12px;
  line-height: 1.45;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.bt-msg .bt-body{ white-space: pre-wrap; }

.bt-msg.user{
  align-self:flex-end;
  background: var(--bubble-me);
  border:1px solid var(--bubble-me-border);
  border-top-right-radius: 8px;
}
.bt-msg.assistant{
  align-self:flex-start;
  background: var(--bubble-in);
  border:1px solid var(--bubble-in-border);
  border-top-left-radius: 8px;
}
.bt-msg.system{
  align-self:flex-start;
  background: var(--bubble-system);
  border:1px solid var(--bubble-system-border);
  border-top-left-radius: 8px;
}

.bt-msg.user::after{
  content:"";position:absolute;right:-6px;bottom:10px;width:12px;height:12px;
  background: var(--bubble-me);
  border-right:1px solid var(--bubble-me-border);
  border-bottom:1px solid var(--bubble-me-border);
  transform: rotate(45deg);
  border-bottom-right-radius:3px;
}
.bt-msg.assistant::before{
  content:"";position:absolute;left:-6px;bottom:10px;width:12px;height:12px;
  background: var(--bubble-in);
  border-left:1px solid var(--bubble-in-border);
  border-bottom:1px solid var(--bubble-in-border);
  transform: rotate(-45deg);
  border-bottom-left-radius:3px;
}
.bt-msg.system::before{
  content:"";position:absolute;left:-6px;bottom:10px;width:12px;height:12px;
  background: var(--bubble-system);
  border-left:1px solid var(--bubble-system-border);
  border-bottom:1px solid var(--bubble-system-border);
  transform: rotate(-45deg);
  border-bottom-left-radius:3px;
}

.bt-meta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  opacity: .92;
  align-items:center;
}

.bt-word{ padding: 0 1px; border-radius: 6px; }
.bt-word.on{ background: var(--hl-bg); }
html[data-theme="light"] .bt-word.on{ background: var(--hl-bg-light); }

/* =========================
   Composer bar
   ========================= */
.bt-composerbar{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--composer-pill-border);
  background:var(--composer-pill-bg);
  border-radius:999px;
  padding:8px 10px;
  max-width:100%;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.bt-composerbar .bt-input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-family:var(--mono);
  font-size:16px;
  padding:6px 2px;
}
.bt-iconbtn{
  flex:0 0 auto;
  width:42px;height:42px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--composer-btn-border);
  background:var(--composer-btn-bg);
  color:var(--text);
}
.bt-iconbtn:hover{filter:brightness(1.08);}
.bt-iconbtn:disabled{opacity:.55;cursor:not-allowed;}

@media (max-width: 576px){
  .bt-composer{ padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bt-messages{ padding: 12px; }
  .bt-msg{ max-width: 94%; }
  .bt-iconbtn{ width: 40px; height: 40px; }
}

/* =========================
   Persistencia UI
   ========================= */
.bt-remember{
  margin-top: 8px;
  display:flex;
  justify-content:flex-start;
}
.bt-remember-label{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  user-select:none;
}
.bt-remember-label input{
  width: 18px;
  height: 18px;
  accent-color: rgba(74,163,255,.9);
}

/* =========================
   Card (QR) - CREDIT CARD PRO + FOOTER ACTIONS
   ========================= */
.sa-card-wrap{
  max-width: 860px;
  width: 100%;
  display:flex;
  justify-content:center;
}

/* Card shell */
.sa-card{
  position: relative;
  width: min(560px, 96%);
  aspect-ratio: var(--cc-aspect);
  border-radius: var(--cc-radius);
  padding: var(--cc-pad);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(74,163,255,.08);
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(800px 520px at 85% 30%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.74));
  color: rgba(255,255,255,.90);
  transform: translateZ(0);
}

/* highlight sweep */
.sa-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(74,163,255,.14), transparent 55%),
    radial-gradient(700px 460px at 100% 30%, rgba(56,211,159,.08), transparent 60%),
    linear-gradient(120deg, transparent 35%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 55%, transparent 65%);
  opacity:.65;
  mix-blend-mode: screen;
  pointer-events:none;
  transform: translateX(-35%);
  animation: saCardSweep 7.5s linear infinite;
}

@keyframes saCardSweep{
  0%   { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

html[data-theme="light"] .sa-card{
  border: 1px solid rgba(18,24,38,.12);
  box-shadow:
    0 18px 55px rgba(11,16,32,.10),
    0 0 0 1px rgba(43,108,255,.06);
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(43,108,255,.10), transparent 62%),
    radial-gradient(800px 520px at 85% 30%, rgba(74,163,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  color: rgba(11,16,32,.88);
}
html[data-theme="light"] .sa-card::before{
  opacity:.35;
  mix-blend-mode: normal;
}

.sa-card__glow{
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(74,163,255,.22), transparent 60%),
    radial-gradient(520px 260px at 92% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 380px at 50% 120%, rgba(56,211,159,.10), transparent 65%);
  pointer-events:none;
  opacity:.95;
  mix-blend-mode: screen;
}
html[data-theme="light"] .sa-card__glow{
  opacity:.55;
  mix-blend-mode: normal;
}

/* Main panel */
.sa-number{
  --qrw: 152px;
  --qrh: 182px;
  --qrPad: 12px;

  /* Footer height (buttons) */
  --ftH: 52px;

  margin-top: 4px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  position: relative;

  /* Reserve space for QR (right) + Footer (bottom) */
  padding-right: calc(var(--qrw) + (var(--qrPad) * 2) + 2px);
  padding-bottom: calc(var(--ftH) + 12px);

  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

html[data-theme="light"] .sa-number{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

/* Secure chip */
.sa-secchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .6px;
  opacity: .94;
  margin-bottom: 2px;
  max-width: 100%;
}
.sa-secchip i{ font-size: 16px; opacity:.92; }
.sa-secchip__dot{
  width:6px;height:6px;border-radius:999px;
  background: rgba(255,255,255,.30);
  opacity:.95;
}
html[data-theme="light"] .sa-secchip{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}
html[data-theme="light"] .sa-secchip__dot{
  background: rgba(18,24,38,.18);
}

/* Row: code only (actions go to footer) */
.sa-number__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

.sa-number__left{
  min-width:0;
  flex: 1 1 auto;
}

.sa-number__label{
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  opacity:.78;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.sa-number__value{
  display:block;
  margin-top: 6px;
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: 2.4px;
  font-size: clamp(14px, 2.2vw, 16px);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* ===== Footer actions (abajo del todo) ===== */
.sa-actions{
  display:flex;
  gap: 10px;
  align-items:center;
}
.sa-actions--inline{
  position: absolute;
  left: 14px;
  bottom: 14px;

  /* que no se meta debajo del QR */
  right: calc(var(--qrw) + (var(--qrPad) * 2) + 2px);

  height: var(--ftH);
  display:flex;
  align-items:center;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .sa-actions--inline{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

.sa-iconbtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: inherit;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sa-iconbtn:hover{ filter: brightness(1.06); }
.sa-iconbtn:active{ transform: translateY(1px); }
.sa-iconbtn i{ font-size: 18px; }
html[data-theme="light"] .sa-iconbtn{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

/* QR block (bottom-right) */
.sa-qr-in{
  position:absolute;
  right: var(--qrPad);
  bottom: var(--qrPad);
  width: var(--qrw);
  height: var(--qrh);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.42);
  box-shadow: 0 22px 46px rgba(0,0,0,.32);
  padding: 10px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  gap: 8px;
  overflow:hidden;
  transform: translateZ(0);
  z-index: 2;
}
html[data-theme="light"] .sa-qr-in{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 34px rgba(11,16,32,.10);
}

.sa-qr-in::before{
  content:"";
  position:absolute;
  left:10px; right:10px;
  top:10px;
  height: 106px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  opacity: .32;
  pointer-events:none;
}
html[data-theme="light"] .sa-qr-in::before{
  border: 1px dashed rgba(18,24,38,.14);
  opacity: .26;
}

.sa-qr-in__inner{
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.10) 45%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.10) 55%,
    transparent 65%
  );
  opacity: .55;
  transform: translateX(-30%) rotate(8deg);
  animation: saShimmer 5.5s linear infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
html[data-theme="light"] .sa-qr-in__inner{
  opacity: .35;
  mix-blend-mode: normal;
}

@keyframes saShimmer{
  0%   { transform: translateX(-35%) rotate(8deg); }
  100% { transform: translateX(35%) rotate(8deg); }
}

.sa-qr-in .sa-qr-img{
  width: 100%;
  height: 106px;
  object-fit: contain;
  display:block;
  filter: grayscale(100%) brightness(0.95);
  opacity: .93;
  border-radius: 14px;
}
html[data-theme="light"] .sa-qr-in .sa-qr-img{
  filter: none;
  opacity: .98;
}

.sa-qr-in__label{
  width: 100%;
  text-align:center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  opacity: .78;
  user-select:none;
  margin-top: -2px;
  text-transform: uppercase;
}

.sa-qr-in__warn{
  width: 100%;
  text-align:center;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.25;
  opacity: .78;
  user-select:none;
  padding-top: 2px;
}

@media (prefers-reduced-motion: reduce){
  .sa-qr-in__inner{ animation: none; }
  .sa-card::before{ animation: none; }
}

/* ===== Responsive card ===== */
@media (max-width: 640px){
  .sa-card{
    width: min(520px, 96%);
    border-radius: 26px;
    padding: 16px;
  }
  .sa-number{
    --qrw: 138px;
    --qrh: 170px;
    --ftH: 50px;
    padding: 12px;
    padding-right: calc(var(--qrw) + 26px);
    padding-bottom: calc(var(--ftH) + 12px);
    border-radius: 18px;
    gap: 9px;
  }
  .sa-actions--inline{
    left: 12px;
    bottom: 12px;
    right: calc(var(--qrw) + 26px);
    height: var(--ftH);
    padding: 7px 9px;
    border-radius: 14px;
  }
  .sa-qr-in::before{ height: 98px; border-radius: 14px; }
  .sa-qr-in .sa-qr-img{ height: 98px; border-radius: 12px; }
}

/* Tiny phones: allow height grow + keep footer safe */
@media (max-width: 420px){
  .sa-card{
    aspect-ratio: auto;
    width: min(520px, 96%);
  }
  .sa-number{
    --qrw: 132px;
    --qrh: 168px;
    --ftH: 50px;
    padding-right: calc(var(--qrw) + 22px);
    padding-bottom: calc(var(--ftH) + 10px);
  }
  .sa-actions--inline{
    right: calc(var(--qrw) + 22px);
  }
  .sa-iconbtn{ width: 42px; height: 42px; }
}

/* =========================
   Header PRO - ajustes finales
   ========================= */
.bt-brand-title, .bt-brand-sub { max-width: 42vw; }

.bt-hdr-left { flex: 0 1 auto; min-width: 0; }
.bt-hdr-mid  { flex: 1 1 auto; min-width: 0; }
.bt-hdr-right{ flex: 0 1 auto; min-width: 0; }

.bt-tokenpill { max-width: 360px; }

@media (max-width: 576px){
  .bt-hdr-metrics{ gap:8px; }
  #pillStatus{ max-width: 44vw; }
  #statusText{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
  .bt-tokenpill{ max-width: 48vw; }
}