@import url('./tokens.css');

/* One device and one screen scale, shared by web scenes and export previews. */
.danta-device {
  position: relative;
  width: 350px;
  aspect-ratio: 390 / 800;
  border: 9px solid #0d1712;
  border-radius: 50px;
  box-sizing: border-box;
  background: #0d1712;
  box-shadow: 0 35px 80px #08281930, inset 0 0 0 1px #ffffff30;
  overflow: hidden;
  container-type: inline-size;
  color: var(--dui-ink);
  font-family: var(--dui-font);
}
.dui-viewport { position:relative; height:100%; overflow:hidden; border-radius:40px; background:var(--dui-paper); }
.dui-island { position:absolute; z-index:20; top:9px; left:50%; width:28%; height:22px; border-radius:40px; background:#0d1712; transform:translateX(-50%); }
.dui-status { position:absolute; inset:0 0 auto; z-index:12; display:flex; align-items:center; justify-content:space-between; height:11cqw; padding:1cqw 5.1cqw 0; font-size:3cqw; line-height:1; background:var(--dui-paper); }
.dui-status>span { display:flex; align-items:center; gap:1.2cqw; }
.dui-status svg { width:4.4cqw; height:3cqw; }
.dui-status svg:last-child { width:6cqw; }
.dui-home-indicator { position:absolute; z-index:12; bottom:2.5cqw; left:35%; width:30%; height:1cqw; border-radius:10px; background:var(--dui-ink); }
.danta-device[data-current-screen="inicio"] .dui-status { background:var(--dui-ink); color:white; }
.danta-device .phone-state, .dui-preview-screen { position:absolute; inset:11cqw 0 6cqw; overflow:hidden; padding:0; background:var(--dui-paper); }
.danta-device .phone-state { transition:opacity .38s ease, transform .62s ease; }
.danta-ui { height:100%; font:400 4.102564cqw/1.4 var(--dui-font); color:var(--dui-ink); background:var(--dui-paper); text-align:left; letter-spacing:normal; }
.danta-ui *, .danta-ui *::before, .danta-ui *::after { box-sizing:border-box; }
.danta-ui :is(h2,h3,p) { margin:0; padding:0; font-family:inherit; letter-spacing:normal; }
.danta-ui h2 { font-size:1.5em; line-height:1.2; font-weight:700; color:inherit; }
.danta-ui h3 { font-size:1.375em; line-height:1.2; font-weight:700; color:inherit; }
.danta-ui strong, .danta-ui b { font-weight:700; }
.danta-ui small { font-size:.8125em; line-height:1.35; }
.dui-icon { width:1.5em; height:1.5em; display:inline-block; flex:none; vertical-align:middle; }
.dui-mark { display:inline-block; width:2em; height:2em; flex:none; background:currentColor; mask:url('../assets/danta-mark-prod.png') center/contain no-repeat; }
.dui-scanner-icon { position:relative; }
.dui-scanner-icon .dui-mark { position:absolute; width:76%; height:76%; left:9%; top:12%; }
.dui-scanner-icon>svg { position:absolute; inset:0; width:100%; height:100%; }
.dui-page { display:flex; flex-direction:column; min-height:0; }
.dui-page-content { flex:1; min-height:0; overflow:hidden; }
.dui-page-padding { padding:.875em 1.25em 1em; }
.dui-heading { display:flex; align-items:center; gap:.75em; min-height:2.5em; margin-bottom:1em; }
.dui-heading h2 { flex:1; min-width:0; }
.dui-heading>.dui-icon:last-child { margin-left:auto; }
.dui-nav { flex:none; display:flex; align-items:stretch; margin:.375em .625em 0; padding:.45em .1em; border:1px solid var(--dui-line); border-radius:1.75em; background:white; box-shadow:0 -.4em 1em var(--dui-paper); }
.dui-nav-item { flex:1; display:flex; align-items:center; flex-direction:column; gap:.25em; min-width:0; color:var(--dui-muted); }
.dui-nav-item>i { display:flex; align-items:center; justify-content:center; width:3.15em; height:2.45em; border-radius:1.125em; }
.dui-nav .dui-icon { width:1.7em; height:1.7em; }
.dui-nav-item small { font-size:.75em; }
.dui-nav-item.is-selected { color:var(--dui-ink); font-weight:700; }
.dui-nav-item.is-selected>i { background:var(--dui-soft); }
.dui-home-header { padding:.875em 1.25em 1.25em; border-radius:0 0 2em 2em; background:var(--dui-ink); color:white; }
.dui-greeting { display:flex; align-items:center; gap:.75em; }
.dui-greeting>strong { flex:1; font-size:1.375em; }
.dui-greeting>.dui-icon { width:1.4em; height:1.4em; }
.dui-profile { display:grid; place-items:center; width:2.25em; height:2.25em; background:var(--dui-soft); color:var(--dui-ink); border-radius:50%; }
.dui-balance-label { display:flex; align-items:center; justify-content:space-between; gap:1em; margin-top:1.5em; color:#d7e9de; font-size:.875em; }
.dui-balance { display:block; font-size:2.5em; line-height:1.15; letter-spacing:-.025em; margin-top:.25em; white-space:nowrap; }
.dui-home-money { display:flex; align-items:stretch; gap:.75em; margin-top:1.25em; font-size:.875em; }
.dui-cashback-action { flex:1; display:flex; align-items:center; gap:.4em; padding:.85em .9em; border-radius:1.57em; color:var(--dui-ink); background:var(--dui-soft); white-space:nowrap; }
.dui-recharge-action { display:flex; align-items:center; gap:.4em; padding:.85em .8em; border:1px solid #9abba8; border-radius:1.57em; white-space:nowrap; }
.dui-recharge-action .dui-icon { width:1.125em; height:1.125em; }
.dui-home-body { padding:1.5em 1.25em 1.25em; }
.dui-favorites { display:flex; justify-content:space-between; gap:.75em; padding-top:1.75em; margin-bottom:1.25em; }
.dui-favorites>span { display:flex; flex-direction:column; align-items:center; gap:.75em; min-width:0; }
.dui-favorites small { white-space:nowrap; }
.dui-avatar { position:relative; width:3.5em; height:3.5em; display:grid; place-items:center; border-radius:50%; background:var(--dui-soft); flex:none; }
.dui-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dui-avatar--silver { outline:3px solid #98a4ae; outline-offset:3px; }
.dui-avatar--gold { outline:3px solid #c29c28; outline-offset:3px; }
.dui-avatar>.dui-avatar-crown { position:absolute; z-index:1; top:-1.08em; left:calc(50% - .7em); width:1.4em; height:1.4em; color:#98a4ae; filter:drop-shadow(0 2px 0 var(--dui-paper)); }
.dui-avatar--gold>.dui-avatar-crown { color:#c29c28; }
.dui-home-actions { display:flex; gap:.75em; }
.dui-home-actions>div { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:.5em; padding:1.15em .7em; border-radius:1.5em; background:var(--dui-ink); color:white; font-size:.875em; }
.dui-home-actions .dui-icon { width:1.75em; height:1.75em; }
.dui-referral, .dui-promo-preview { display:flex; align-items:center; gap:.875em; margin-top:1.5em; padding:1.1em; border:1px solid var(--dui-line); border-radius:1.375em; background:white; }
.dui-referral>div, .dui-promo-preview>div { display:grid; flex:1; gap:.2em; }
.dui-referral>div small, .dui-promo-preview small { color:var(--dui-muted); }
.dui-referral>.dui-icon { color:var(--dui-muted); }
.dui-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1em; margin-top:1.5em; }
.dui-section-heading h3 { font-size:1.25em; }
.dui-promo-preview { margin-top:1em; }
.dui-promo-preview .dui-avatar { width:2.5em; height:2.5em; }
.dui-send .dui-heading { margin-bottom:1em; }
.dui-send-balance { padding:1em 1.125em; background:var(--dui-soft); border-radius:1.5em; }
.dui-send-balance>strong { display:block; font-size:1em; line-height:1.4; }
.dui-send-balance>div { display:flex; align-items:center; gap:.5em; margin-top:.8em; padding:.6em 0; font-size:.875em; }
.dui-send-balance>div .dui-icon { width:1.2em; height:1.2em; }
.dui-send-balance>div .dui-icon:last-child { margin-left:auto; }
.danta-ui .dui-label { margin:1em 0 .4em; font-size:.875em; font-weight:700; }
.dui-segments { display:flex; border:1px solid var(--dui-muted); border-radius:2em; overflow:hidden; }
.dui-segments>span { display:flex; flex:1; align-items:center; justify-content:center; gap:.4em; padding:.5em .45em; font-size:.85em; }
.dui-segments>span+span { border-left:1px solid var(--dui-muted); }
.dui-segments .is-selected { background:var(--dui-soft); }
.dui-segments .dui-icon { width:1.15em; height:1.15em; }
.dui-recipient { display:flex; align-items:center; gap:.7em; padding:.8em; margin-top:.75em; background:white; border:1px solid var(--dui-line); border-radius:1.375em; }
.dui-recipient>div { display:grid; flex:1; gap:.15em; }
.dui-recipient .dui-avatar { width:2.5em; height:2.5em; }
.dui-recipient small { color:var(--dui-muted); font-size:.75em; }
.dui-recipient>.dui-icon { width:1.1em; height:1.1em; color:var(--dui-muted); }
.dui-amount { border:2px solid var(--dui-ink); border-radius:.6em; padding:.4em .6em; background:white; font-size:1.6em; font-weight:700; line-height:1.2; }
.dui-comment { position:relative; margin-top:1.35em; padding:.7em 1em; border:1px solid var(--dui-muted); border-radius:1em; background:white; font-size:.875em; }
.dui-comment>span { position:absolute; top:-.7em; left:.8em; padding:0 .3em; font-size:.85em; background:var(--dui-paper); color:var(--dui-muted); }
.dui-comment>small { float:right; font-size:.75em; color:var(--dui-muted); }
.dui-benefit { display:flex; align-items:center; gap:.5em; margin:1em 0; padding:.75em; border:1px solid var(--dui-line); border-radius:1em; background:var(--dui-soft); font-size:.75em; }
.dui-benefit>div { flex:1; display:grid; gap:.3em; }
.dui-benefit>.dui-icon { color:#8898a4; }
.dui-benefit small { font-size:.85em; }
.dui-benefit>strong { font-size:1.15em; }
.dui-primary { display:flex; align-items:center; justify-content:center; gap:.75em; min-height:3em; padding:.65em 1.2em; border-radius:2em; background:var(--dui-ink); color:white; font-weight:700; }
.dui-primary .dui-icon { width:1.2em; height:1.2em; }
.dui-scanner>.dui-heading { padding:.9em 1em; margin:0; }
.dui-scanner h2 { font-size:1.15em; }
.dui-camera { position:relative; display:flex; flex:1; flex-direction:column; justify-content:center; align-items:center; gap:2em; background:radial-gradient(ellipse at center,#46564d,#16251e); color:white; }
.dui-scan-instruction { font-size:.875em; }
.danta-ui .dui-scan-frame { position:relative; flex:none; width:78%; height:auto; aspect-ratio:1; margin:0; border:2px solid #ffffff50; border-radius:1em; overflow:hidden; background:#314b3e; }
.dui-scan-frame>i { position:absolute; z-index:5; width:2.5em; height:2.5em; border:3px solid white; }
.dui-scan-frame>i:nth-child(1) { top:-2px; left:-2px; border-width:3px 0 0 3px; border-radius:1em 0 0; }
.dui-scan-frame>i:nth-child(2) { top:-2px; right:-2px; border-width:3px 3px 0 0; border-radius:0 1em 0 0; }
.dui-scan-frame>i:nth-child(3) { bottom:-2px; right:-2px; border-width:0 3px 3px 0; border-radius:0 0 1em; }
.dui-scan-frame>i:nth-child(4) { bottom:-2px; left:-2px; border-width:0 0 3px 3px; border-radius:0 0 0 1em; }
.danta-ui .dui-scan-frame .scan-target { position:absolute; top:50%; left:50%; display:grid; justify-items:center; gap:.3em; width:77%; padding:.8em; font-size:.9em; border-radius:.8em; background:white; color:var(--dui-ink); transform:translate(-50%,-50%); opacity:1; filter:none; }
.dui-scan-frame .scan-target small { padding:.2em; background:white; color:var(--dui-ink); font-size:.6em; }
.dui-scan-frame .scan-line { position:absolute; z-index:6; top:15%; left:5%; right:5%; height:2px; background:#79e9ab; box-shadow:0 0 12px #79e9ab; opacity:1; animation:dui-scan 2.4s ease-in-out infinite paused; }
.phone-state.is-active .dui-scan-frame .scan-line, .dui-preview-screen .dui-scan-frame .scan-line { animation-play-state:running; }
.dui-scan-frame .scan-found { position:absolute; z-index:7; inset:auto .5em .5em; display:flex; align-items:center; border-radius:.75em; color:var(--dui-ink); background:var(--dui-soft); opacity:0; transform:translateY(.5em); transition:opacity .3s,transform .3s; }
.dui-scan-frame .scan-found strong { font-size:1em; }
.is-scan-complete .dui-scan-frame .scan-found { opacity:1; transform:none; }
@keyframes dui-scan { 0%,100% { top:15%; } 50% { top:83%; } }
.dui-scan-frame danta-branded-qr { display:block; width:100%; }
.danta-ui .dui-scan-frame .scan-found { gap:.3em; padding:.6em; font-size:.75em; }
.danta-ui .dui-scan-frame .scan-found .dui-icon { width:1.4em; height:1.4em; }
.dui-scan-tools { position:absolute; bottom:1em; display:flex; justify-content:space-between; width:100%; padding:0 1em; gap:.6em; }
.dui-scan-tools>span { display:flex; align-items:center; justify-content:center; flex:1; gap:.4em; padding:.7em .5em; border-radius:2em; color:var(--dui-ink); background:var(--dui-soft); }
.dui-scan-tools .dui-icon { width:1.1em; height:1.1em; }
.dui-scan-tools small { font-size:.8em; }
.dui-reward { padding:.625em .625em .2em; gap:.625em; }
.dui-reward-card { flex:1; min-height:0; display:flex; align-items:center; flex-direction:column; padding:1.25em 1.1em .9em; overflow:hidden; border-radius:2em 2em 0 0; background:#123b30; color:#f3f8ed; text-align:center; }
.dui-reward-card h2 { font-size:1.7em; line-height:1.15; }
.dui-reward-card>p { font-size:.8125em; color:#c6e2d4; margin:.6em 0 1.1em; }
.dui-earned { font-size:1em; margin-bottom:.3em; }
.dui-reward-card>small { font-size:.75em; color:#d4e6db; }
.dui-accumulation { align-self:stretch; display:flex; flex-direction:column; gap:.35em; padding:1.1em; margin:1.5em 0 .6em; background:#1b5140; border:1px solid #42705a; border-radius:1.75em; }
.dui-accumulation strong { font-size:2.75em; line-height:1.15; }
.dui-accumulation small { color:#d4e6db; }
.dui-reward-card .dui-completed { display:flex; align-items:center; gap:.3em; margin:.35em 0 .1em; }
.dui-completed .dui-icon { width:1em; height:1em; }
.dui-reward-orbit { width:11em; height:11em; position:relative; display:grid; place-items:center; flex-shrink:1; min-height:8em; margin:.75em 0 .4em; color:#a9b8c3; }
.dui-tier-mark { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.3em; width:7.5em; height:7.5em; border:4px solid currentColor; border-radius:50%; }
.dui-tier-mark>.dui-icon { width:1.75em; height:1.75em; }
.dui-tier-mark>.dui-mark { width:3.3em; height:3.3em; }
.dui-tracks { position:absolute; inset:0; border-radius:50%; }
.dui-tracks>span { position:absolute; left:calc(50% - .44em); top:calc(50% - .44em); width:.88em; height:.88em; transform:rotate(calc(var(--track)*20deg)) translateY(-5.1em) rotate(90deg); opacity:.5; }
.dui-tracks svg { width:100%; height:100%; }
.phone-state.is-active .dui-tracks, .dui-preview-screen .dui-tracks { animation:dui-orbit 28s linear infinite; }
.dui-reward-tier { margin:.2em 0 .35em; color:#c4d2db; font-size:1.3em; }
.dui-continue { flex:none; }
@keyframes dui-orbit { to { transform:rotate(360deg); } }
@media(max-width:900px) {
  .phone-shell.danta-device { width:min(280px,68vw); border-width:7px; border-radius:38px; }
  .phone-shell .dui-viewport { border-radius:31px; }
  .phone-shell .dui-island { height:17px; top:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .danta-device *, .danta-device *::before, .danta-device *::after { animation:none!important; transition:none!important; }
}