:root{
  --bg0:#05070c;
  --bg1:#070a12;
  --card0: rgba(255,255,255,.06);
  --card1: rgba(255,255,255,.03);
  --line: rgba(148,163,184,.18);
  --line2: rgba(148,163,184,.28);
  --text:#eaf0ff;
  --muted:#9aa6b2;

  --accent:#60a5fa;
  --accent2:#a78bfa;
  --good:#34d399;
  --bad:#fb7185;
}

*{box-sizing:border-box}

/* ✅ Mobile background cutoff fix */
html,body{min-height:100%}

html{
  background:#05070c;
}

body{
  margin:0;
  min-height:100svh; /* stable viewport height on mobile */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(1000px 640px at 92% 0%, rgba(167,139,250,.20), transparent 56%),
    radial-gradient(900px 600px at 55% 115%, rgba(52,211,153,.10), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, #060813);
}

body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode: overlay;
}

.page{
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 22px 22px 44px;
}

/* Topbar: soft floating pill (no sharp bar) */
.topbar{
  position: relative;
  z-index: 3;
  margin: 4px auto 0;
}
.topbarInner{
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.14));
  backdrop-filter: blur(14px);
  box-shadow:
    0 22px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.logoMark{
  width: 14px;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:
    0 0 0 6px rgba(96,165,250,.08),
    0 16px 60px rgba(96,165,250,.14);
}
.logoText{
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .2px;
  color: rgba(234,240,255,.94);
}

.toplink{
  font-size: 12.5px;
  color: rgba(234,240,255,.90);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(255,255,255,.03);
  transition: .15s ease;
}
.toplink:hover{
  transform: translateY(-1px);
  border-color: rgba(148,163,184,.26);
  background: rgba(255,255,255,.05);
}

/* Hero */
.hero{
  padding-top: 28px;
}
.heroInner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: center;
}
@media (max-width: 960px){
  .heroInner{ grid-template-columns: 1fr; }
}

.heroTitle{
  margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
  letter-spacing: -0.8px;
  line-height: 1.03;
  color: rgba(234,240,255,.98);
}
.heroTitle .accent{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heroLead{
  margin: 14px 0 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(154,166,178,.92);
  max-width: 56ch;
}

/* Quick receive */
.quickReceive{
  margin-top: 16px;
  max-width: 520px;
}
.qrTitleRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.qrTitle{
  font-size: 13px;
  font-weight: 850;
  color: rgba(234,240,255,.92);
}
.qrHint{
  font-size: 12.5px;
  color: rgba(154,166,178,.92);
}

.qrForm{
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:stretch;
  flex-wrap:wrap;
}

.qrInputWrap{
  flex: 1 1 260px;
  min-width: 240px;
  display:flex;
  align-items:center;
  gap:10px;

  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.qrIcon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(234,240,255,.88);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.12);
}
.qrIcon svg{ width: 16px; height: 16px; }

.qrInput{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  color: rgba(234,240,255,.92);
  font-size: 13px;
  letter-spacing: .2px;
}
.qrInput::placeholder{
  color: rgba(154,166,178,.75);
}

.qrBtn{
  border:0;
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 820;
  color: #071018;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 18px 60px rgba(96,165,250,.16);
  transition: .15s ease;
}
.qrBtn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.qrBtn:active{ transform: translateY(0px); }

.qrTiny{
  margin-top: 10px;
  font-size: 12.2px;
  color: rgba(154,166,178,.90);
}

.inlineLink{
  color: rgba(234,240,255,.90);
  text-decoration: none;
  border-bottom: 1px solid rgba(148,163,184,.22);
  padding-bottom: 1px;
}
.inlineLink:hover{
  border-bottom-color: rgba(148,163,184,.45);
}

/* Hero meta */
.heroMeta{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 560px;
}

.metaItem{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.metaIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(0,0,0,.14);
  color: rgba(234,240,255,.86);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
}
.metaIcon svg{ width: 18px; height: 18px; }

.metaTitle{
  font-size: 13px;
  font-weight: 820;
  color: rgba(234,240,255,.92);
  margin-bottom: 2px;
}
.metaText{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(154,166,178,.92);
}

/* Hero visual */
.heroVisual{
  position: relative;
  min-height: 320px;
  isolation: isolate;
}
.gridGlow{
  position:absolute;
  inset: 30px 0 0 0;
  background:
    radial-gradient(600px 340px at 55% 35%, rgba(96,165,250,.14), transparent 62%),
    radial-gradient(520px 340px at 40% 55%, rgba(167,139,250,.12), transparent 62%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.10));
  opacity: 1;
  z-index: 0;
}
.orb{ position:absolute; border-radius: 999px; opacity:.95; z-index:0; }
.orb.o1{
  width: 220px; height: 220px; left: 20px; top: 10px;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.85), rgba(96,165,250,.05) 70%);
}
.orb.o2{
  width: 260px; height: 260px; right: 10px; top: 30px;
  background: radial-gradient(circle at 35% 35%, rgba(167,139,250,.78), rgba(167,139,250,.05) 72%);
}
.orb.o3{
  width: 200px; height: 200px; right: 90px; bottom: 0px;
  background: radial-gradient(circle at 40% 40%, rgba(52,211,153,.38), rgba(52,211,153,.04) 70%);
}
.stat{
  position:absolute;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 80px rgba(0,0,0,.45);
  z-index: 1;
}
.statK{ font-size: 11.5px; color: rgba(154,166,178,.95); }
.statV{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 850;
  color: rgba(234,240,255,.92);
  letter-spacing: .2px;
}
.stat.s1{ left: 26px; bottom: 40px; }
.stat.s2{ right: 26px; top: 92px; }
.stat.s3{ right: 96px; bottom: 18px; }

@media (max-width: 960px){
  .heroVisual{ min-height: 260px; }
}

/* Strip */
.heroStrip{
  margin-top: 22px;
  border-top: 1px solid rgba(148,163,184,.10);
  border-bottom: 1px solid rgba(148,163,184,.10);
  background: rgba(0,0,0,.10);
}
.stripInner{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
  padding: 12px 0;
  justify-content: center;
}
.stripItem{ font-size: 12.5px; color: rgba(234,240,255,.86); }
.dotSep{ width: 4px; height: 4px; border-radius: 99px; background: rgba(148,163,184,.40); }

/* THE ONLY BOX: app card */
.card{
  width: min(680px, 100%);
  margin: 26px auto 0;
  background: linear-gradient(180deg, var(--card0), var(--card1));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 26px 100px rgba(0,0,0,.55);
}

.hdr{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.brand{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.dot{
  width:10px; height:10px; margin-top:6px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(96,165,250,.12);
}

h2{ font-size: 14px; margin: 0; letter-spacing:.2px; }
p{ margin: 3px 0 0 0; font-size: 12.5px; color: var(--muted); }

.link{
  font-size: 12.5px;
  color: rgba(234,240,255,.86);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,0,0,.12);
  transition: .15s ease;
}
.link:hover{border-color: var(--line2); transform: translateY(-1px);}

.drop{
  position:relative;
  border: 1px dashed var(--line2);
  border-radius: 12px;
  background: rgba(0,0,0,.14);
  padding: 18px;
  cursor:pointer;
  transition: .14s ease;
}
.drop.hover{
  border-color: rgba(96,165,250,.60);
  box-shadow: 0 0 0 6px rgba(96,165,250,.10);
  transform: translateY(-1px);
}
.drop input[type="file"]{ display:none; }

.dropInner{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  justify-content:center;
  text-align:center;
  user-select:none;
}
.dropTitle{ font-weight: 800; font-size: 13px; color: rgba(234,240,255,.92); }
.dropSub{ font-size: 12.5px; color: var(--muted); }

.actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.btn{
  border:0;
  cursor:pointer;
  color: #071018;
  font-weight: 850;
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 60px rgba(96,165,250,.18);
  transition: .14s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.btn.ghost{
  background: rgba(0,0,0,.16);
  border: 1px solid var(--line);
  color: rgba(234,240,255,.92);
  box-shadow:none;
}
.btn.small{ padding: 9px 10px; border-radius: 10px; color: #071018; }
.btn.copied{ filter: saturate(1.15); }

.options{
  margin-top: 12px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.opt{
  display:flex;
  gap:8px;
  align-items:center;
  font-size: 12.5px;
  color: var(--muted);
  user-select:none;
}
.opt input{ accent-color: var(--accent); }

/* Progress */
.progressWrap{ margin-top: 12px; }
.progressBar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.progressBar.small{ height: 8px; }
.progressFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  transition: width .18s ease;
}
@keyframes shimmer{
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.progressMeta{
  margin-top: 8px;
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  color: var(--muted);
}

.status{
  margin-top: 10px;
  font-size: 12.5px;
  min-height: 18px;
  color: var(--muted);
  transition: .2s ease;
}
.status.good{ color: var(--good); }
.status.bad{ color: var(--bad); }

.panel{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.12);
}
.panelTitle{ font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.list{ display:flex; flex-direction:column; gap:8px; }
.li{ display:flex; justify-content:space-between; gap:12px; }
.name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 70%; }

.muted{ color: var(--muted); }
.tiny{ font-size: 12px; margin-top: 8px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.secretWrap{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.14);
  animation: pop .18s ease-out;
}
@keyframes pop{
  from { transform: translateY(6px); opacity: .0; }
  to { transform: translateY(0); opacity: 1; }
}
.secretTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.secretLabel{ font-size: 12px; color: var(--muted); }
.secretRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.secret{
  display:block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  font-size: 14px;
  letter-spacing: .3px;
  color: rgba(234,240,255,.92);
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.14);
  color: var(--muted);
}
.badge.ok{ border-color: rgba(52,211,153,.25); color: var(--good); }
.check{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(52,211,153,.12);
}

.live{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.10);
}
.liveRow{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.12);
  color: var(--muted);
}
.pill.good{ border-color: rgba(52,211,153,.25); color: var(--good); }

.qrBox{ margin-top: 12px; display:flex; flex-direction:column; gap:8px; }
.qrBox img{
  width: 180px;
  height: 180px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
}

/* Footer */
.footer{ margin-top: 22px; padding-top: 18px; }
.footerInner{
  width: min(980px, 100%);
  margin: 0 auto;
  border-top: 1px solid rgba(148,163,184,.12);
  padding-top: 14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footerName{ font-size: 13px; font-weight: 850; color: rgba(234,240,255,.92); }
.footerTag{ margin-top: 4px; font-size: 12.5px; color: rgba(154,166,178,.92); }
.footerRight{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(154,166,178,.92);
  font-size: 12.5px;
}
.footerLink{
  color: rgba(234,240,255,.88);
  text-decoration:none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(0,0,0,.10);
}
.cursor{
  display:inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 4px;
  background: linear-gradient(var(--accent), var(--accent2));
  box-shadow:
    0 0 6px rgba(96,165,250,.8),
    0 0 14px rgba(167,139,250,.6);
  transform: translateY(0.08em);
  animation: terminalBlink 0.9s steps(1, end) infinite,
             glowPulse 2.2s ease-in-out infinite;
}

@keyframes terminalBlink{
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

@keyframes glowPulse{
  0%, 100% {
    box-shadow:
      0 0 6px rgba(96,165,250,.8),
      0 0 14px rgba(167,139,250,.6);
  }
  50% {
    box-shadow:
      0 0 10px rgba(96,165,250,1),
      0 0 22px rgba(167,139,250,.9);
  }

/* ===== Terminal headline styling ===== */
.terminalTitle{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: -0.2px;
}

.terminalLine{
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
  box-shadow:
    0 28px 90px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow:
    0 0 10px rgba(96,165,250,.12),
    0 0 18px rgba(167,139,250,.10);
}

/* scanlines + subtle shimmer */
.terminalLine:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 12px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.04),
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity: .12;
  mix-blend-mode: overlay;
}

.terminalLine:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 12px;
  pointer-events:none;
  background: radial-gradient(700px 120px at 20% 0%, rgba(96,165,250,.25), transparent 60%),
              radial-gradient(600px 120px at 80% 100%, rgba(167,139,250,.18), transparent 60%);
  opacity: .45;
  filter: blur(6px);
  z-index: -1;
}

/* Terminal caret */
.cursor{
  display:inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 6px;
  background: linear-gradient(var(--accent), var(--accent2));
  box-shadow:
    0 0 6px rgba(96,165,250,.85),
    0 0 14px rgba(167,139,250,.65);
  transform: translateY(0.08em);
  animation: terminalBlink 0.9s steps(1, end) infinite,
             glowPulse 2.2s ease-in-out infinite;
}

@keyframes terminalBlink{
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

@keyframes glowPulse{
  0%, 100% {
    box-shadow:
      0 0 6px rgba(96,165,250,.85),
      0 0 14px rgba(167,139,250,.65);
  }
  50% {
    box-shadow:
      0 0 10px rgba(96,165,250,1),
      0 0 22px rgba(167,139,250,.92);
  }


}



.footerLink:hover{ border-color: rgba(148,163,184,.26); }
.footerDot{ width: 4px; height: 4px; border-radius: 99px; background: rgba(148,163,184,.45); }
.footerSmall{ color: rgba(154,166,178,.90); }