/* ==========================================================
   Gram Wallet — UI styles
   Font: Manrope (SIL OFL 1.1), self-hosted
   ========================================================== */

@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  color-scheme: dark;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  color: #f5f9fc;
  background: #101820;
  font-synthesis: none;
  --blue: #2ca6f7;
  --blue-hover: #49b6ff;
  --card-radius: 18px;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
[hidden] { display: none !important; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; }
button { cursor: pointer; border: 0; color: inherit; }
button:disabled { opacity: .45; cursor: wait; }
button:active:not(:disabled) { transform: scale(.97); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible { outline: 3px solid #bbebff; outline-offset: 4px; }
button { transition: transform .13s, background .13s; }
a { color: #59baff; }

/* ---------- Entry gate (shown outside Telegram) ---------- */
.entry-gate {
  min-height: 100svh;
  max-width: 420px;
  margin: auto;
  padding: 60px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.entry-gate > img { border-radius: 19px; margin-bottom: 28px; filter: grayscale(1); }
.entry-gate h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.7px; }
.entry-gate p { color: #a4b2bd; font-size: 15px; line-height: 1.7; }

/* ---------- Wallet layout ---------- */
.wallet {
  max-width: 540px;
  margin: auto;
  padding: calc(16px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}

/* ---------- Top bar ---------- */
.topbar {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f6fbff;
  text-decoration: none;
  font-size: 25px;
  letter-spacing: -1.15px;
  font-weight: 700;
}
.brand img { border-radius: 9px; }
.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #202a35;
  font-size: 23px;
  display: grid;
  place-items: center;
  letter-spacing: 2px;
}
.topbar .icon-button { color: #b4c6d4; }
.topbar .icon-button:hover { background: #28343f; color: #e4f1fa; }

/* ---------- Notice banner ---------- */
.notice {
  margin: 0 0 18px;
  padding: 13px 16px;
  background: #1e303d;
  color: #c6e6f9;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
   BANK CARD
   Reference: physical graphite card, thin intersecting arcs,
   silver chip on the left, username at bottom-left.
   ============================================================ */

.bank-card {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.586;  /* ISO/IEC 7810 ID-1 */
  border-radius: var(--card-radius);
  /* Three-stop graphite gradient: light left edge → dark centre → slightly lighter right */
  background: linear-gradient(118deg,
    #2e332e 0%,
    #1e2220 40%,
    #191c1a 72%,
    #1d2120 100%
  );
  box-shadow:
    0 22px 42px #00000070,
    0 8px 18px #00000050,
    inset 0 1px 0 #d0d8cc22,  /* hairline gloss on top */
    inset 0 -1px 0 #00000088; /* bottom shadow inside */
}

/* Brushed / cross-hatch micro-texture, clipped to lower portion */
.bank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    128deg,
    transparent 0px,
    transparent 1.0px,
    #b0bcaf14 1.1px,
    transparent 1.9px
  );
  clip-path: ellipse(95% 75% at 62% 95%);
  opacity: .75;
  pointer-events: none;
}

/* Film grain / noise overlay */
.bank-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Intersecting arc lines — two ellipses crossing through the card face */
.card-arcs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
/* Arc 1: sweeps from bottom-left across upper-right */
.card-arcs::before {
  content: "";
  position: absolute;
  width: 128%;
  height: 185%;
  border: 1px solid #a8b5aa28;
  border-radius: 50%;
  left: 3%;
  top: -92%;
  transform: rotate(-20deg);
}
/* Arc 2: crosses arc 1, sweeps from upper-left through lower-right */
.card-arcs::after {
  content: "";
  position: absolute;
  width: 145%;
  height: 165%;
  border: 1px solid #8c9e9220;
  border-radius: 50%;
  left: -20%;
  top: 30%;
  transform: rotate(-24deg);
}

/* EMV chip — silver appearance, left-side placement */
.metal-chip {
  position: absolute;
  top: 29%;
  left: 6.5%;
  z-index: 2;
  width: clamp(38px, 10.5cqw, 53px);
  height: clamp(30px, 8.1cqw, 42px);
  border-radius: 6px;
  padding: 0;
  display: grid;
  place-items: center;
  /* Metallic silver gradient with subtle brushing */
  background:
    repeating-linear-gradient(
      162deg,
      transparent 0 2px,
      #ffffff22 2.2px,
      #3c484830 2.8px
    ),
    linear-gradient(130deg,
      #9eadae,
      #f0f4f1 30%,
      #a4b0b0 56%,
      #e8ede8 78%,
      #a8b2b0
    );
  box-shadow:
    inset 0 1px 1px #ffffffd0,
    inset 0 -1px 1px #00000030,
    0 2px 6px #00000055;
  color: #6a7870;
  cursor: pointer;
}
.metal-chip::before { content: ""; position: absolute; inset: -8px; }
.metal-chip svg { width: 90%; height: 90%; }

/* Balance amount — absolute position within card */
.balance-line {
  position: absolute;
  left: 6.5%;
  top: 52%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 88%;
  white-space: nowrap;
  margin: 0;
}
.balance-line strong {
  font-size: clamp(24px, 8.2cqw, 41px);
  font-weight: 520;
  letter-spacing: -1.6px;
  font-variant-numeric: tabular-nums;
  max-width: 67%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.balance-line .ticker {
  font-size: clamp(20px, 6.4cqw, 32px);
  font-weight: 420;
  letter-spacing: -1.1px;
  color: #bec9c2;
}
.balance-line .gem {
  width: clamp(22px, 7cqw, 34px);
  height: clamp(22px, 7cqw, 34px);
  flex-shrink: 0;
  filter: grayscale(.8) drop-shadow(0 2px 3px #00000055);
}

/* Fiat estimate below balance */
.fiat {
  position: absolute;
  left: 6.5%;
  top: 71%;
  z-index: 2;
  font-size: clamp(11px, 3.3cqw, 15px);
  color: #a5b5ae;
  font-variant-numeric: tabular-nums;
  font-weight: 450;
  margin: 0;
  min-height: 18px;
}

/* Card bottom row: owner username + privacy toggle */
.card-bottom {
  position: absolute;
  bottom: 7%;
  left: 6.5%;
  right: 6.5%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.card-bottom #owner {
  font-family: Manrope, sans-serif;
  font-size: clamp(13px, 3.7cqw, 18px);
  font-weight: 480;
  letter-spacing: -.3px;
  text-transform: none;
  text-shadow: 0 1px 3px #000000aa;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ddeae3;
}
.quiet-button {
  background: none;
  display: grid;
  place-items: center;
  padding: 5px;
  color: #aabfb5;
  opacity: .85;
  min-height: 36px;
  min-width: 36px;
}

/* ---------- Action buttons row ---------- */
.actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.primary {
  background: var(--blue);
  border-radius: 100px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 620;
  min-height: 38px;
  letter-spacing: -.3px;
}
.actions .primary { flex: 1; padding: 10px 10px; }
.actions .primary span { margin-right: 5px; font-size: 16px; font-weight: 400; }
.primary:hover { background: var(--blue-hover); }

/* ---------- Address pill ---------- */
.address-pill {
  margin: 19px auto 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: #a6b8c8;
  font-size: 12px;
  padding: 8px 12px;
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: #50d6a4; }

/* ---------- History section ---------- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
h1 { font-size: 19px; letter-spacing: -.5px; font-weight: 660; margin: 0; }
.text-button {
  background: none;
  color: #84bddf;
  font-size: 12px;
  padding: 10px 0 10px 10px;
  font-weight: 550;
}
.text-button span { font-size: 19px; margin-left: 4px; }

/* ---------- Empty state ---------- */
.empty-state {
  border-radius: 23px;
  background: #17232e;
  padding: 30px 15px;
  text-align: center;
  min-height: 209px;
}
.empty-icon {
  font-size: 26px;
  width: 52px;
  height: 52px;
  margin: auto;
  color: #73bdf0;
  border-radius: 50%;
  background: #223747;
  position: relative;
  padding-right: 12px;
  padding-top: 2px;
}
.empty-icon span { position: absolute; right: 8px; top: 15px; }
.empty-state h2 { font-size: 16px; font-weight: 520; margin: 18px 0 8px; }
.empty-state p { font-size: 13px; line-height: 1.7; color: #8ea3b5; margin: 0; }

/* ---------- Footer ---------- */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #698292;
  font-size: 11px;
  margin-top: 38px;
}

/* ---------- Transaction list items ---------- */
.transaction {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 15px;
  margin-bottom: 8px;
  border-radius: 20px;
  background: #192530;
  width: 100%;
  text-align: left;
}
.tx-icon {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #273e4c;
  color: #9bd8ff;
  font-size: 24px;
}
.tx-copy { flex: 1; min-width: 0; }
.tx-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-copy small { display: block; margin-top: 5px; color: #94a8ba; font-size: 11px; }
.tx-value {
  font-size: 14px;
  white-space: nowrap;
  color: #f5f9fc;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
.tx-value.in { color: #64d897; }

/* Pending transfer warning */
.pending-item {
  background: #343220;
  border: 1px solid #6d6235;
  padding: 13px 16px;
  border-radius: 15px;
  color: #f4e2a3;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ---------- Bottom sheet (dialog) ---------- */
dialog {
  padding: 32px 25px 30px;
  border: 1px solid #ffffff0d;
  border-radius: 30px 30px 0 0;
  background: #18232e;
  color: #f5f9fc;
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: min(100%, 540px);
  max-height: 90svh;
  overflow-y: auto;
  box-shadow: 0 -10px 70px #0005;
}
dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
dialog[open] { animation: sheet-in .2s ease-out; }
.sheet-handle {
  position: absolute;
  width: 32px;
  height: 4px;
  background: #ffffff25;
  border-radius: 4px;
  top: 10px;
  left: calc(50% - 16px);
}
.close-sheet {
  position: absolute;
  right: 17px;
  top: 21px;
  width: 32px;
  height: 32px;
  font-size: 24px;
  letter-spacing: 0;
  background: #2b3641;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
dialog h2 {
  font-size: 24px;
  font-weight: 660;
  letter-spacing: -.6px;
  margin: 10px 40px 10px 0;
}
dialog p { font-size: 14px; line-height: 1.6; color: #a6b8c8; }
dialog label { display: block; font-size: 13px; color: #b7c9d8; margin: 20px 0 9px; }

/* ---------- Form inputs ---------- */
input, textarea {
  display: block;
  background: #101a24;
  width: 100%;
  border: 1px solid #334452;
  color: #fff;
  border-radius: 14px;
  padding: 15px;
  min-height: 50px;
}
textarea { resize: vertical; min-height: 80px; }
input::placeholder, textarea::placeholder { color: #708697; }

/* ---------- Utility ---------- */
.wide { display: block; width: 100%; margin-top: 23px; }
.error { color: #ffadac !important; min-height: 20px; }
.hint { font-size: 12px !important; color: #92aabc !important; }

/* ---------- QR code modal ---------- */
.qr-container {
  margin: 25px auto;
  background: #fff;
  padding: 12px;
  border-radius: 20px;
  width: 225px;
  height: 225px;
  display: grid;
  place-items: center;
  color: #536c7c;
  text-align: center;
}
.qr-container img { width: 100%; height: 100%; }
.full-address {
  word-break: break-all;
  text-align: center;
  background: #101a24;
  padding: 15px;
  border-radius: 13px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  color: #c9dcea;
}

/* ---------- Transfer confirmation sheet ---------- */
.detail { padding: 15px 0; border-bottom: 1px solid #ffffff12; }
.detail small { display: block; color: #8ea3b5; margin-bottom: 8px; }
.detail div { overflow-wrap: anywhere; line-height: 1.6; font-size: 14px; }
.big-amount { font-size: 32px; margin: 28px 0; color: #f5f9fc; }
.check-label { display: flex; gap: 11px; align-items: start; line-height: 1.5; }
.check-label input {
  width: 19px;
  height: 19px;
  min-height: 19px;
  margin: 3px 0;
  accent-color: var(--blue);
}
.check-label span { flex: 1; }
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.subtle { color: #a6b8c8; background: #253747; border-radius: 12px; padding: 12px; }
.loading { opacity: .65; }

/* ---------- Toast notification ---------- */
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  width: max-content;
  background: #e9f6ff;
  color: #18303f;
  border-radius: 15px;
  padding: 14px 20px;
  box-shadow: 0 8px 30px #0005;
  font-size: 14px;
  z-index: 4;
}

/* ---------- Animations ---------- */
@keyframes sheet-in {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---------- Responsive: wide screens (≥ 700 px) ---------- */
@media (min-width: 700px) {
  .wallet { padding-top: 32px; }
  .topbar { margin-bottom: 30px; }
  .empty-state { padding: 35px 15px; }
  dialog { bottom: 24px; border-radius: 30px; }
}

/* ---------- Responsive: narrow (≤ 370 px) — covers 320 px ---------- */
@media (max-width: 370px) {
  .wallet { padding-left: 14px; padding-right: 14px; }
  .balance-line strong { letter-spacing: -1.2px; }
  .actions .primary { font-size: 14px; letter-spacing: -.25px; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-contrast: more) {
  .hint, footer { color: #b5d1e4 !important; }
  .fiat, .balance-line .ticker { color: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  dialog::backdrop { backdrop-filter: none; background: #000d; }
}