/* ============================================================================
   Mandioca v2 — the product interface, rebuilt in the page's dark treatment.
   Content follows the real Dashboard, Move money and Wallets screens one for
   one: same navigation, same headings, same columns, same status vocabulary.
   Built in HTML rather than dropped in as screenshots because the real UI is
   light-themed and would fight a near-black page — and because this costs a
   few kilobytes instead of three megabytes.
   ========================================================================== */

.pui {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 236px 1fr;
  font-size: 13px;
  line-height: 1.35;
  color: #E6EBE8;
  background: #0B0F0E;
}

/* window chrome */
.pui__chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 34px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  background: #0E1312;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 6;
}
.pui__chrome b { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }

/* ── sidebar ──────────────────────────────────────────────────────────── */
.pui__side {
  padding: 46px 13px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  background: #090D0C;
  display: flex; flex-direction: column; gap: 20px;
}
.pui__brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 6px;
}
/* the real lockup, sized so it stays legible once the tablet is tilted away */
.pui__brand img { height: 26px; width: auto; flex: none; }
.pui__brand i {
  margin-left: auto; width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.pui__nav { display: flex; flex-direction: column; gap: 2px; }
.pui__nav a {
  display: flex; align-items: center; gap: 10px;
  height: 33px; padding: 0 11px;
  border-radius: 7px;
  color: #79837D; font-size: 12.5px; text-decoration: none;
}
.pui__nav a svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* the sidebar follows the screen on show, driven by one attribute */
.pui[data-on="0"] .n-dash,
.pui[data-on="1"] .n-move,
.pui[data-on="2"] .n-wal { background: rgba(217, 223, 45, 0.12); color: var(--lime); }
.pui[data-on="1"] .sub-move,
.pui[data-on="2"] .sub-move { display: flex; }
.pui__nav a .chev { margin-left: auto; width: 12px; height: 12px; }

/* the expanded Move money sub-menu, exactly as the product shows it */
/* collapsed by default; the [data-on] rule above opens it on the two screens
   where the real product shows it expanded. Declaring `display:none` up there
   instead would lose to this rule, which is further down at equal specificity. */
.pui__sub { display: none; flex-direction: column; gap: 1px; padding: 3px 0 3px 30px; }
.pui__sub a {
  display: flex; align-items: center; gap: 8px;
  height: 27px; color: #626B66; font-size: 11.5px; text-decoration: none;
}
.pui__sub a svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.pui__sub a.on { color: var(--lime); }

.pui__sidefoot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.pui__sidefoot a {
  display: flex; align-items: center; gap: 9px;
  height: 31px; padding: 0 11px;
  color: #6B746F; font-size: 12px; text-decoration: none;
}
.pui__sidefoot a svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pui__av {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.1);
  display: grid; place-items: center;
  font-size: 8px; font-style: normal; color: #9AA39D;
}

/* ── main ─────────────────────────────────────────────────────────────── */
.pui__main { position: relative; padding: 46px 24px 0; overflow: hidden; }
.pui__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 15px;
}
.pui__head h4 {
  margin: 0 0 3px;
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
}
.pui__head h4 svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pui__head p { margin: 0; font-size: 12px; color: #6B746F; }
.pui__flag {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
}
.pui__fab {
  position: absolute; right: 18px; bottom: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  background: #1D4C63;
  display: grid; place-items: center;
  z-index: 4;
}
.pui__fab svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.6; }

/* the three screens live in the same box and cross-fade */
.scr {
  position: absolute; inset: 46px 24px 0;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.3, 0.6, 0.25, 1);
  pointer-events: none;
}
.scr.on { opacity: 1; }

/* ── shared furniture ─────────────────────────────────────────────────── */
.pane {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: #0E1211;
  padding: 14px 15px;
  display: flex; flex-direction: column; gap: 11px;
  min-height: 0;
}
.pane__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pane__h b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.pane__h span { font-size: 11px; color: #626B66; }
.pane__h a { font-size: 11px; color: var(--lime); text-decoration: none; }

.cap { font-size: 11.5px; color: #6B746F; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.pill--ok   { background: rgba(46, 190, 140, 0.15); color: #46CFA0; }
.pill--wait { background: rgba(226, 160, 48, 0.15); color: #E2A030; }
.pill--prog { background: rgba(74, 150, 220, 0.15); color: #62A8E4; }
.pill--no   { background: rgba(224, 78, 78, 0.15); color: #EE7676; }

/* ── screen 1 · dashboard ─────────────────────────────────────────────── */
.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.bcard {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: linear-gradient(158deg, #141917, #0E1211);
  padding: 13px 14px 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.bcard > span { font-size: 11px; color: #6B746F; }
.bcard b {
  font-size: 20px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bcard b small { font-size: 10.5px; font-weight: 500; color: #6B746F; letter-spacing: 0; }
.bcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 10.5px; color: #626B66;
}
.bcard__net { display: inline-flex; align-items: center; gap: 5px; }
.bcard__net u { width: 12px; height: 12px; border-radius: 50%; background: rgba(217, 223, 45, 0.25); }
.bcard__mark {
  position: absolute; right: 12px; top: 11px;
  height: 17px; width: auto;
  opacity: 0.16;
}

.dgrid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 11px; height: 340px; flex: none; }

table.t { width: 100%; border-collapse: collapse; }
table.t th {
  text-align: left; padding: 0 0 8px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: #545C57;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
table.t td {
  padding: 8px 0; font-size: 11.5px; color: #9AA39D;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.t tr:last-child td { border-bottom: 0; }
table.t .id { color: #E6EBE8; font-weight: 500; }
table.t .id i { display: block; font-style: normal; font-size: 10px; color: #545C57; font-weight: 400; }
.ar { width: 13px; height: 13px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar--in  { stroke: #46CFA0; }
.ar--out { stroke: #EE7676; }
.tok { display: inline-flex; align-items: center; gap: 5px; }
.tok em { width: 11px; height: 11px; border-radius: 50%; flex: none; font-style: normal; }
.tok em.t { background: #2A9D8F; }
.tok em.co { background: linear-gradient(180deg, #FCD34D 40%, #2563EB 40% 70%, #DC2626 70%); }
.tok em.us { background: linear-gradient(180deg, #E5E7EB 50%, #DC2626 50%); }
.dot {
  display: inline-block; width: 15px; height: 15px; border-radius: 5px;
}
.dot--ok { background: rgba(46, 190, 140, 0.22); }
.dot--wait { background: rgba(226, 160, 48, 0.22); }
.dot--prog { background: rgba(74, 150, 220, 0.22); }
.dot--no { background: rgba(224, 78, 78, 0.22); }
.eye { width: 14px; height: 14px; fill: none; stroke: #626B66; stroke-width: 1.4; }

/* the bar chart, values printed above the bars as the product does */
.bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; min-height: 0; padding-top: 16px; }
.bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bars s { text-decoration: none; font-size: 9.5px; color: #8C948F; font-variant-numeric: tabular-nums; }
.bars i {
  width: 100%; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #D9DF2D, #AEB425);
}
.bars u { font-size: 9.5px; color: #545C57; text-decoration: none; }
.bars__base { height: 1px; background: rgba(255, 255, 255, 0.07); }

/* ── screen 2 · move money ────────────────────────────────────────────── */
.tabs {
  display: flex; justify-content: center; gap: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}
.tabs span { padding: 0 2px 9px; font-size: 12px; color: #545C57; }
.tabs span.on { color: #fff; box-shadow: inset 0 -2px 0 var(--lime); }

.mgrid { display: grid; grid-template-columns: 1fr 0.82fr; gap: 16px; height: 470px; flex: none; }
.mform { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.fx {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px; background: #0E1211;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.fx__t { font-size: 10.5px; color: #6B746F; }
.fx__r { display: flex; align-items: center; gap: 9px; }
.fx__ccy {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #E6EBE8;
  padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.fx__ccy em { width: 13px; height: 13px; border-radius: 50%; flex: none; font-style: normal; }
.fx__v { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fx__hint { margin-left: auto; font-size: 10.5px; color: #545C57; }
.fx__max {
  font-size: 9.5px; letter-spacing: 0.04em; color: var(--lime);
  background: rgba(217, 223, 45, 0.12); padding: 3px 7px; border-radius: 5px;
}
.fx__swap {
  align-self: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.09); background: #0E1211;
  display: grid; place-items: center; margin: -4px 0;
}
.fx__swap svg { width: 12px; height: 12px; fill: none; stroke: #8C948F; stroke-width: 1.5; }

.sel {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px;
  background: #0E1211;
  font-size: 12px; color: #6B746F;
}
.sel b { font-weight: 400; color: #E6EBE8; margin-left: auto; }
.sel svg { width: 12px; height: 12px; flex: none; fill: none; stroke: #545C57; stroke-width: 1.5; }
.sel--up { border-style: dashed; border-color: rgba(217, 223, 45, 0.28); }
.sel--up b { color: var(--lime); }
.mnote { margin: -4px 0 0; font-size: 10px; color: #545C57; }
.mrate {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: 9px;
  background: rgba(224, 78, 78, 0.1);
  font-size: 11px; color: #EE9090;
}
.mrate svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mrate b { color: #fff; font-variant-numeric: tabular-nums; }
/* the product's own action button is deep blue, not lime — and at the near
   edge of the tilt a solid lime slab would swallow the whole frame */
.mgo {
  height: 36px; border-radius: 9px; border: 0;
  background: #1D4C63; color: #EAF3F6;
  font: inherit; font-size: 12.5px; font-weight: 600;
  display: grid; place-items: center;
}

.mside { display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.mnotes { display: flex; flex-direction: column; gap: 6px; }
.mnotes b {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: #46CFA0;
}
.mnotes b svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mnotes p { margin: 0; font-size: 10.5px; color: #6B746F; line-height: 1.55; }
.mnews { flex: 1; min-height: 0; }
.mnews p { margin: 0 0 5px; font-size: 10.5px; color: #79837D; line-height: 1.55; }
.mnews ul { margin: 0 0 6px; padding-left: 14px; font-size: 10.5px; color: #79837D; }
.mnews__dots { display: flex; gap: 4px; margin-top: auto; }
.mnews__dots i { width: 16px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); }
.mnews__dots i.on { background: rgba(217, 223, 45, 0.5); }

/* ── screen 3 · wallets ───────────────────────────────────────────────── */
.wgrid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 11px; height: 500px; flex: none; }
.wleft { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.wsel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wsel > div {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px;
  background: #0E1211; padding: 11px 12px;
}
.wsel > div.on { border-color: rgba(217, 223, 45, 0.35); background: rgba(217, 223, 45, 0.05); }
.wsel em { width: 20px; height: 20px; border-radius: 50%; background: #2A9D8F; flex: none; font-style: normal; }
.wsel b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wsel small { font-size: 9.5px; color: #6B746F; margin-left: 4px; }
.wsel span { display: block; font-size: 9.5px; color: #545C57; }

.wfil { display: flex; gap: 7px; }
.wfil span {
  display: inline-flex; align-items: center; gap: 6px;
  height: 29px; padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 8px;
  font-size: 11px; color: #626B66;
}
.wfil span.wide { flex: 1; }
.wfil svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.wpag {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 9px;
  font-size: 10.5px; color: #545C57;
}
.wpag u { text-decoration: none; padding: 3px 7px; border: 1px solid rgba(255,255,255,0.07); border-radius: 5px; }

.wadd { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.waddr {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.waddr svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #626B66; stroke-width: 1.4; }
.waddr div { min-width: 0; }
.waddr b { display: block; font-size: 11.5px; font-weight: 500; }
.waddr span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #626B66; }
.waddr span em { width: 9px; height: 9px; border-radius: 50%; flex: none; font-style: normal; }
.waddr span em.e { background: #6C7BE0; }
.waddr span em.t { background: #D0444C; }
.waddr .hash { margin-left: auto; font-size: 9.5px; color: #4A524D; }
.wmore {
  margin-top: auto; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: grid; place-items: center;
  font-size: 11px; color: #626B66;
}

/* ── the phone: the same product, the same light, a narrower frame ────── */
.fone {
  position: absolute; inset: 0;
  border-radius: 26px; overflow: hidden;
  background: #0B0F0E;
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex; flex-direction: column;
  font-size: 12px; color: #E6EBE8;
}
.fone__bar {
  height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.fone__bar i { width: 62px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.fone__body { flex: 1; padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.fone__h { display: flex; align-items: center; gap: 8px; }
.fone__h svg { width: 15px; height: 15px; fill: none; stroke: var(--lime); stroke-width: 2.2; }
.fone__h b { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; }
.fone__h u { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.07); }
.fone h5 { margin: 4px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.fone h5 + p { margin: 2px 0 0; font-size: 11px; color: #6B746F; }