/* Allezroma Payments — окно оплаты (фрейм).
   Канон дизайн-системы: артефакты волны 1 проекта payments в Open Design
   (Frontend/WEB/frame/design-system/screens/). Токены стабильны. */
:root{
  --bg:            #f2f3f7;
  --surface:       #ffffff;
  --fg:            #1b1b2e;
  --fg-2:          rgba(27,27,46,.64);
  --fg-3:          rgba(27,27,46,.42);
  --border:        rgba(27,27,46,.10);
  --border-strong: rgba(27,27,46,.18);
  --accent:        #6366f1;
  --accent-strong: oklch(55% .205 276);
  --accent-hover:  oklch(50% .205 276);
  --accent-ink:    oklch(48% .19 276);
  --accent-tint:   rgba(99,102,241,.10);
  --accent-ring:   rgba(99,102,241,.28);
  --mint:          #34d399;
  --mint-ink:      oklch(50% .12 165);
  --mint-deep:     oklch(58% .13 165);
  --mint-hover:    oklch(53% .13 165);
  --mint-tint:     rgba(52,211,153,.16);
  --red:           oklch(55% .21 27);
  --red-ink:       oklch(50% .19 27);
  --red-tint:      oklch(55% .21 27 / .10);
  --amber-ink:     oklch(52% .12 70);
  --amber-tint:    oklch(78% .13 85 / .22);
  --field-error:   oklch(58% .22 27);
  --shadow-sm: 0 1px 2px rgba(27,27,46,.05), 0 1px 3px rgba(27,27,46,.06);
  --r-lg: 16px; --r-md: 12px; --r-sm: 10px; --r-full: 999px;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--fg);background:var(--bg);font-size:14px;line-height:1.5;min-height:100vh}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--accent-strong);text-decoration:none}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--font-mono)}
.small{font-size:12px}

.stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px 16px 36px;gap:12px}
.frame{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.screen{display:none}
.screen.is-active,.frame.is-active{display:flex}

.window-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:.01em}
.brand .logo{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--accent),oklch(62% .19 300));display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.net-chip{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--r-full);background:var(--accent-tint);color:var(--accent-ink)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px}
.title-block h1{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.title-block p{margin-top:3px;font-size:13.5px;color:var(--fg-2)}

.addr-grid{display:grid;grid-template-columns:168px 1fr;gap:20px;align-items:center}
.qr{width:168px;height:168px;border-radius:var(--r-md);border:1px solid var(--border);background:#fff;padding:10px;display:grid;place-items:center}
.qr svg,.qr canvas{width:100%;height:100%;display:block}
.addr-side{min-width:0;display:flex;flex-direction:column;gap:10px}
.addr-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.address{font-family:var(--font-mono);font-size:15.5px;font-weight:600;letter-spacing:.01em;line-height:1.45;word-break:break-all}
.address.is-short{word-break:normal;white-space:nowrap;overflow:hidden}
.addr-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-md);font-weight:600;font-size:14px;transition:background .15s,color .15s,border-color .15s}
.btn .icon{width:17px;height:17px;flex:none}
.btn-block{width:100%}
.btn-primary{background:var(--accent-strong);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border:1px solid var(--border-strong);color:var(--fg);background:transparent}
.btn-ghost:hover{background:rgba(27,27,46,.05)}
.btn-success{background:var(--mint-deep);color:oklch(24% .05 165);box-shadow:var(--shadow-sm)}
.btn-success:hover{background:var(--mint-hover)}
.btn.is-copied{background:var(--mint-deep);color:oklch(24% .05 165)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.text-btn{min-height:44px;padding:0 6px;font-size:12.5px;font-weight:600;color:var(--accent-strong);display:inline-flex;align-items:center}
.text-btn:hover{color:var(--accent-hover)}

.notice{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-md);padding:13px 15px;background:var(--amber-tint);border:1px solid oklch(78% .13 85 / .45)}
.notice .icon{width:18px;height:18px;flex:none;margin-top:1px;color:var(--amber-ink)}
.notice p{font-size:13px;line-height:1.5}
.notice p strong{font-weight:600}

.pipeline{list-style:none;display:flex;margin-top:4px}
.pipeline .step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;min-width:0}
.pipeline .step:not(:first-child)::before{content:"";position:absolute;top:14px;right:50%;width:100%;height:2px;background:var(--border);border-radius:2px}
.pipeline .step.is-current:not(:first-child)::before{background:var(--accent)}
.pipeline .step.is-done:not(:first-child)::before{background:var(--mint)}
.step-dot{position:relative;z-index:1;width:29px;height:29px;border-radius:var(--r-full);display:grid;place-items:center;flex:none;background:var(--surface);border:2px solid var(--border-strong);color:var(--fg-3)}
.step-dot .icon{width:14px;height:14px}
.step.is-done .step-dot{background:var(--mint);border-color:var(--mint);color:oklch(24% .05 165)}
.step.is-current .step-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.step.is-current .step-dot::after{content:"";position:absolute;inset:-6px;border-radius:var(--r-full);border:2px solid var(--accent-ring);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.75);opacity:1}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
.step-name{font-size:12.5px;font-weight:700;line-height:1.25}
.step.is-next .step-name{color:var(--fg-3);font-weight:600}
.step-sub{font-size:11.5px;color:var(--fg-3);line-height:1.35}
.step.is-current .step-sub{color:var(--accent-ink)}
.pipe-context{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.pipe-note{font-size:12.5px;color:var(--fg-2);text-align:center}
.pipe-note--gap{margin-top:8px}
.confirm-row{display:flex;align-items:center;gap:12px}
.confirm-row .bar{flex:1;height:6px;border-radius:3px;background:rgba(27,27,46,.08);overflow:hidden}
.confirm-row .bar i{display:block;height:100%;width:0%;border-radius:3px;background:var(--accent);transition:width .6s ease}
.confirm-row .count{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.credited-banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:var(--r-md);background:var(--mint-tint);color:var(--mint-ink);font-family:var(--font-display);font-weight:800;font-size:16px}
.hash-row{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-mono);font-size:12px;color:var(--fg-3);flex-wrap:wrap}
.hash-row a{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-body);font-weight:600}
.hash-row .icon{width:13px;height:13px}

.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;padding:2px 4px}
.section-title h2{font-family:var(--font-display);font-size:15px;font-weight:700}
.section-title span{font-size:12px;color:var(--fg-3)}
.ops{list-style:none}
.ops li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;min-height:60px}
.ops li + li{border-top:1px solid var(--border)}
.ops .empty{padding:16px 2px;color:var(--fg-3);font-size:13px;text-align:center}
.op-left{min-width:0;display:flex;flex-direction:column;gap:3px}
.op-type{font-weight:600;font-size:13.5px}
.op-time{font-size:12px;color:var(--fg-3)}
.op-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.op-amount{font-family:var(--font-display);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.op-amount.in{color:var(--mint-ink)}
.op-amount.out{color:var(--fg)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);font-size:11px;font-weight:600;white-space:nowrap}
.badge .icon{width:11px;height:11px}
.badge-done{background:var(--mint-tint);color:var(--mint-ink)}
.badge-progress{background:var(--accent-tint);color:var(--accent-ink)}
.badge-fail{background:var(--red-tint);color:var(--red-ink)}

.state-hero{padding:36px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.state-icon{width:64px;height:64px;border-radius:var(--r-full);display:grid;place-items:center;margin-bottom:10px}
.state-icon .icon{width:28px;height:28px}
.state-icon.red{background:var(--red-tint);color:var(--red-ink)}
.state-icon.mint{background:var(--mint-tint);color:var(--mint-ink)}
.state-hero h2{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.01em}
.state-hero--mint h2{color:var(--mint-ink)}
.state-hero .sub{font-size:13.5px;color:var(--fg-2);max-width:34ch}
.state-hero .btn{margin-top:18px;min-width:180px}

/* Поля формы вывода */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.input{min-height:46px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--surface);font-size:15px;color:var(--fg);width:100%}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.field-hint{font-size:12px;color:var(--fg-3)}
.field-error{font-size:12.5px;color:var(--field-error)}
.wd-summary{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.wd-summary .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13.5px}
.wd-summary .row > span{color:var(--fg-2)}
.wd-summary .row b{text-align:right;word-break:break-all}
.wd-buttons{display:flex;gap:10px}
.wd-buttons .btn{flex:1}

.sk-block{border-radius:var(--r-sm);background:linear-gradient(100deg,rgba(27,27,46,.07) 40%,rgba(27,27,46,.12) 50%,rgba(27,27,46,.07) 60%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-80% 0}}
.sk-head{height:22px;width:55%}
.sk-sub{height:13px;width:35%;margin-top:8px}
.sk-addr-grid{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.sk-qr{width:150px;height:150px;border-radius:var(--r-md)}
.sk-line{height:15px;border-radius:6px}
.sk-rows{display:flex;flex-direction:column}
.sk-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0}

.window-foot{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--fg-3);font-size:11.5px;padding:2px 0 0}
.window-foot .icon{width:12px;height:12px}

@media (max-width:430px){
  .addr-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .addr-side{align-items:center;width:100%}
  .addr-actions{justify-content:center}
  .title-block h1{font-size:22px}
  .step-name{font-size:11.5px}
  .qr{width:158px;height:158px}
  .stage{padding:16px 12px 32px}
}
@media (max-width:380px){.step-sub{font-size:10.5px}}