.topup-trigger { gap: 7px; min-height: 42px; padding: 0 13px; font-size: 11px; }
.topup-trigger > svg { width: 15px; height: 15px; flex: none; }
.topup-soon { padding: 4px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); font: 600 9px/1 var(--font-body); }
body.underlabs-topup-open { overflow: hidden; }
dialog.underlabs-topup-dialog { position: fixed; inset: 0; width: min(510px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 28px 30px 26px; color: var(--text); font-family: var(--font-body); overflow: auto; overscroll-behavior: contain; border-radius: 32px; }
dialog.underlabs-topup-dialog[open] { animation: topupIn .32s cubic-bezier(.2,.8,.2,1) both; }
dialog.underlabs-topup-dialog::backdrop { background: #000b; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: topupBackdrop .25s ease both; }
dialog.underlabs-topup-dialog.is-closing { animation: topupOut .18s ease both; }
dialog.underlabs-topup-dialog.is-closing::backdrop { animation: topupBackdropOut .18s ease both; }
.topup-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topup-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); background: #ffffff08; font-size: 10px; font-weight: 600; }
.topup-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c6c9d2; box-shadow: 0 0 9px #ffffff40; }
.topup-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #ffffff08; color: var(--text-soft); cursor: pointer; transition: background .2s, transform .2s; }
.topup-close svg { width: 17px; height: 17px; }
.topup-close:hover { background: var(--glass-2); transform: rotate(90deg); }
.topup-emblem { display: grid; place-items: center; width: 50px; height: 50px; margin: 22px 0 18px; border: 1px solid var(--line-strong); border-radius: 17px; background: linear-gradient(145deg,#ffffff21,#ffffff05); box-shadow: inset 0 1px #ffffff38; }
.topup-emblem svg { width: 25px; height: 25px; }
.underlabs-topup-dialog h2 { margin: 0 0 12px; font: 700 25px/1.35 var(--font-display); }
.topup-intro { margin: 0 0 22px; color: var(--text-soft); font-size: 12px; line-height: 1.8; }
.topup-balance { display: flex; justify-content: space-between; gap: 15px; margin: 0 0 20px; padding: 12px 0; border-block: 1px solid var(--line); color: var(--text-dim); font-size: 12px; }
.topup-balance span { color: var(--text); font-weight: 600; }
.topup-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 12px; }
.topup-label-row label { color: var(--text-soft); font-weight: 600; }
.topup-label-row > span { color: var(--text-dim); font-size: 11px; }
.topup-amount-wrap { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 20px; background: #0003; box-shadow: inset 0 1px 8px #0003; transition: border-color .2s, box-shadow .2s; }
.topup-amount-wrap:focus-within { border-color: #ffffff8c; box-shadow: 0 0 0 3px #ffffff0a,inset 0 1px 8px #0003; }
.topup-amount-wrap.has-error { border-color: #e89b9b99; }
.topup-amount-wrap input { display: block; flex: 1; width: 0; min-width: 0; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; color: var(--text); font: 600 32px/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.underlabs-topup-dialog .topup-amount-wrap input[type=text] { font-size: 32px !important; }
.topup-amount-wrap input::placeholder { color: var(--text-dim); }
.topup-amount-wrap > span { color: var(--text-dim); font-size: 27px; }
.topup-help { margin: 8px 0 0; color: var(--text-dim); font-size: 10px; line-height: 1.6; }
.topup-error { margin: 7px 0 0; color: #efb2b2; font-size: 11px; line-height: 1.6; }
.topup-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 17px; }
.topup-preset { min-height: 40px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff06; color: var(--text-soft); font: 600 12px/1.4 var(--font-body); cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.topup-preset:hover { background: #ffffff14; border-color: var(--line-strong); transform: translateY(-1px); }
.topup-preset.is-selected { color: #111; background: #eee; border-color: #fff9; box-shadow: inset 0 1px #fff; }
.topup-total { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin: 24px 0 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 12px; }
.topup-total output { color: var(--text); font: 600 18px/1.5 var(--font-body); }
.topup-pay { width: 100%; min-height: 47px; font-size: 12px; }
.topup-pay:disabled { opacity: .4; cursor: not-allowed; }
.topup-note { margin: 12px 0 0; text-align: center; color: var(--text-dim); font-size: 10px; line-height: 1.8; }
.topup-close:focus-visible,.topup-preset:focus-visible { outline: 2px solid var(--text-soft); outline-offset: 3px; }
@keyframes topupIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes topupOut { to { opacity: 0; transform: translateY(9px) scale(.98); } }
@keyframes topupBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes topupBackdropOut { to { opacity: 0; } }
@media(max-width:1200px) { .topup-soon { display: none; } .nav:has(.topup-trigger) { gap: 12px; } .nav:has(.topup-trigger) .nav-links { gap: 13px; font-size: 13px; } }
@media(min-width:721px) and (max-width:1050px) { .nav:has(.topup-trigger) .nav-desktop-only { display: none !important; } .topup-trigger { padding-inline: 11px; } }
@media(max-width:720px) { .topup-trigger { padding-inline: 11px; font-size: 10px; } }
@media(max-width:600px) { .nav:has(.topup-trigger) .brand-name { display: none; } dialog.underlabs-topup-dialog { padding: 22px 20px; border-radius: 26px; max-height: calc(100dvh - 24px); } .underlabs-topup-dialog h2 { font-size: 21px; } .topup-emblem { margin-block: 18px 14px; width: 44px; height: 44px; border-radius: 14px; } .topup-intro { margin-bottom: 18px; } }
@media(prefers-reduced-motion:reduce) { dialog.underlabs-topup-dialog,dialog.underlabs-topup-dialog::backdrop,.underlabs-topup-dialog *, .topup-trigger { animation: none !important; transition: none !important; } }