@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@600;700;800&family=Roboto+Flex:opsz,wdth,wght,GRAD@8..144,25..151,400..1000,-200..150&display=swap";:root{color-scheme:light;font-family:var(--font-sans);color:#07111f;background:#f6f7f9;font-synthesis:none;text-rendering:optimizeLegibility;--font-sans: "Inter", "SF Pro Text", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--c-bg: #f6f7f9;--c-surface: #ffffff;--c-surface-soft: #f0f3f6;--c-ink: #07111f;--c-ink-soft: #222b38;--c-muted: #737b88;--c-muted-2: #9ba2ad;--c-line: rgba(7, 17, 31, .1);--c-line-soft: rgba(7, 17, 31, .06);--c-blue: #2d96f6;--c-blue-soft: #eaf5ff;--c-green: #11985f;--c-green-soft: #e9f8f0;--c-pink: #f23878;--c-purple: #8057ff;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--shadow: 0 18px 60px rgba(7, 17, 31, .08)}.premium-card-scene.minimal{width:min(420px,92vw);perspective:none}.premium-card.minimal-card{border:1px solid rgba(255,255,255,.1);border-radius:25px;background:radial-gradient(circle at 92% 8%,rgba(78,156,255,.22),transparent 30%),linear-gradient(145deg,#151d29,#0a111b 58%,#05090f);box-shadow:0 28px 70px #07111f40,inset 0 1px #ffffff14;color:#fff;transform:none}.premium-card.minimal-card:before{inset:auto -12% -46% 22%;width:92%;height:82%;border:1px solid rgba(255,255,255,.07);border-radius:50%;background:transparent;opacity:1;mix-blend-mode:normal;transform:rotate(-12deg);animation:none}.premium-card.minimal-card:after{inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 27% 100%);opacity:1;mix-blend-mode:normal}.minimal-card .brand-mark img{filter:brightness(0) invert(1);opacity:.94}.minimal-card .premium-card-top,.minimal-card .premium-card-bottom,.minimal-card .card-secret{color:#fff;transform:none}.minimal-card .card-secret small{color:#ffffff75}.minimal-card .card-secret b{color:#fff;font-weight:610}.minimal-card>.card-secret:not(.compact) b{font-size:clamp(18px,4vw,24px);letter-spacing:.085em}.minimal-card .card-secret.compact:first-child{flex:1.9 1 0}.minimal-card .card-secret.compact b{font-size:11px;letter-spacing:.035em}.card-network-word{color:#fffffff0;font-size:17px!important;font-style:italic;font-weight:800!important;letter-spacing:-.04em}.card-network-word.mastercard{font-size:13px!important;font-style:normal;letter-spacing:-.02em}.mini-premium-card.minimal-card{min-height:176px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:radial-gradient(circle at 90% 10%,rgba(78,156,255,.2),transparent 32%),linear-gradient(145deg,#151d29,#070c13);color:#fff;box-shadow:0 22px 50px #07111f38}.mini-premium-card.minimal-card:before{display:none}.mini-premium-card.minimal-card small{color:#ffffff80}.mini-card-top{display:flex;align-items:center;justify-content:space-between}.mini-card-top>span{font-size:15px;font-style:italic;font-weight:800}.kyc-form{display:grid;gap:16px}.kyc-note{display:grid;gap:3px;border:1px solid rgba(7,17,31,.08);border-radius:16px;background:#f7f9fb;padding:14px 16px}.kyc-note b{font-size:14px}.kyc-note span{color:var(--c-muted);font-size:12px;line-height:1.45}.kyc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.kyc-grid .span-2{grid-column:1 / -1}.kyc-consent{display:flex;align-items:flex-start;gap:10px;color:var(--c-muted);font-size:12px;line-height:1.45;cursor:pointer}.kyc-consent input{width:17px;height:17px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--c-ink)}.kyc-loading{min-height:220px;display:grid;place-items:center;align-content:center;gap:10px;color:var(--c-muted);font-weight:700}.kyc-summary{min-height:60px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid rgba(7,17,31,.08);border-radius:16px;background:#f7f9fb;padding:10px 12px}.kyc-summary>span{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#e7f7ee;color:#108553;font-weight:900}.kyc-summary b,.kyc-summary small{display:block}.kyc-summary b{font-size:13px}.kyc-summary small{overflow:hidden;color:var(--c-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.kyc-summary button{border:0;background:transparent;color:var(--c-muted);font-size:12px;font-weight:750}.issue-pay-button{min-height:50px}.error-note{color:#b42318!important}@media(max-width:560px){.kyc-grid{grid-template-columns:1fr}.kyc-grid .span-2{grid-column:auto}.premium-card.minimal-card{border-radius:21px}}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100vh;margin:0}body{background:radial-gradient(circle at 0 0,rgba(45,150,246,.1),transparent 32vw),radial-gradient(circle at 100% 10%,rgba(17,152,95,.09),transparent 26vw),var(--c-bg);color:var(--c-ink);font-family:var(--font-sans);font-feature-settings:"cv11","ss01";font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.62}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font-display);letter-spacing:0}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-page{min-height:100vh;display:grid;place-items:center;gap:12px;color:var(--c-muted);font-weight:750}.btn,.primary-button,.ghost-button,.link-button{min-height:44px;border:1px solid transparent;border-radius:999px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--c-surface);color:var(--c-ink);font-size:14px;font-weight:760;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.btn:hover,.primary-button:hover,.ghost-button:hover,.link-button:hover{transform:translateY(-1px)}.btn-primary,.primary-button{background:var(--c-ink);color:#fff;box-shadow:0 12px 32px #07111f29}.btn-secondary,.ghost-button{border-color:var(--c-line);background:var(--c-surface);color:var(--c-ink)}.btn.wide,.wide{width:100%}.btn.compact{min-height:38px;padding:0 14px}.icon-button{width:44px;height:44px;border:1px solid var(--c-line);border-radius:14px;display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink)}.brand-row,.logo-line{display:flex;align-items:center;gap:12px}.brand-mark{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:0;background:transparent;border:0;box-shadow:none;transform:none}.brand-mark.compact{width:30px;height:30px;border-radius:0}.brand-mark img{width:100%;height:100%;object-fit:contain;transform:none}.brand-mark.compact img{width:100%;height:100%}.brand-mark span{display:none}.eyebrow{margin:0 0 8px;color:var(--c-muted-2);font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.small-pill,.pill{min-height:28px;display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:0 12px;background:var(--c-blue-soft);color:#1973c7;font-size:12px;font-weight:800}.pill.succeeded,.pill.active{background:var(--c-green-soft);color:var(--c-green)}.pill.canceled,.pill.provider_error{background:#fff0f3;color:var(--c-pink)}.auth-page{min-height:100vh;padding:28px;display:grid;place-items:center}.auth-card{width:min(1080px,100%);display:grid;grid-template-columns:minmax(0,1.1fr) 420px;gap:16px;border:1px solid var(--c-line);border-radius:32px;background:#ffffffc7;box-shadow:var(--shadow);overflow:hidden}.auth-product,.auth-panel{min-width:0;padding:34px}.auth-product{display:flex;flex-direction:column;gap:22px;background:linear-gradient(135deg,rgba(45,150,246,.08),transparent 42%),linear-gradient(315deg,rgba(17,152,95,.1),transparent 42%),var(--c-surface)}.auth-product h1{max-width:620px;margin:8px 0 0;font-size:clamp(40px,5.6vw,76px);line-height:.9;font-weight:980;letter-spacing:0;font-stretch:82%}.auth-product p{max-width:560px;margin:0;color:var(--c-muted);font-size:17px;line-height:1.5;font-weight:650}.mini-card-preview,.card-visual{position:relative;overflow:hidden;border-radius:24px;color:#fff;background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.38),transparent 18%),radial-gradient(circle at 15% 85%,rgba(45,150,246,.54),transparent 26%),linear-gradient(135deg,#07111f,#101a2a 58%,#0f9b62 140%);box-shadow:0 24px 60px #07111f2e}.mini-card-preview{width:min(420px,100%);min-height:220px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.mini-card-preview:after,.card-visual:after{content:"";position:absolute;inset:-60px;opacity:.32;background-image:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.22) 45%,transparent 55%),radial-gradient(circle,rgba(255,255,255,.38) 1px,transparent 1.5px);background-size:auto,15px 15px;transform:rotate(-9deg)}.mini-card-preview>*,.card-visual>*{position:relative;z-index:1}.mini-card-preview div,.card-top,.card-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.mini-card-preview strong,.card-number{font-size:clamp(24px,3vw,36px);letter-spacing:.08em;font-weight:850}.mini-card-preview small,.card-bottom small{display:block;margin-bottom:4px;color:#ffffff94;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.auth-points,.mini-list{display:grid;gap:10px}.auth-points span,.mini-list span{display:flex;align-items:center;gap:9px;color:var(--c-ink-soft);font-size:14px;font-weight:760}.auth-points svg,.mini-list svg{color:var(--c-green)}.auth-panel{background:var(--c-surface);display:grid;align-content:center;gap:18px;border-left:1px solid var(--c-line-soft)}.auth-panel h2{margin:0;font-size:30px;line-height:1.1;letter-spacing:0}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:999px;background:var(--c-surface-soft);border:1px solid var(--c-line-soft)}.mode-switch button{min-height:38px;border:0;border-radius:999px;background:transparent;color:var(--c-muted);font-weight:800}.mode-switch button.active{background:var(--c-surface);color:var(--c-ink);box-shadow:0 8px 20px #07111f12}.auth-form{display:grid;gap:12px}.auth-form label,.input-label,.admin-settings label{display:grid;gap:8px;color:var(--c-muted);font-size:13px;font-weight:800}.input-shell,.input-label input,.input-label select,.admin-settings input,.admin-settings select,.promo-box div{min-height:48px;display:flex;align-items:center;gap:10px;border:1px solid var(--c-line);border-radius:15px;background:#fbfcfd;color:var(--c-muted);padding:0 14px}.input-shell input,.promo-box input,.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--c-ink);font-weight:740}.input-label input,.input-label select,.admin-settings input,.admin-settings select{width:100%;color:var(--c-ink);outline:none;font-weight:760}.auth-submit{width:100%;margin-top:4px}.auth-divider{display:flex;align-items:center;gap:10px;color:var(--c-muted-2);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:var(--c-line)}.google-frame{min-height:48px;display:grid;place-items:center}.provider-loading{display:inline-flex;align-items:center;gap:8px;color:var(--c-muted);font-size:13px;font-weight:760}.auth-footnote,.note,.lead{margin:0;color:var(--c-muted);line-height:1.5;font-size:14px;font-weight:650}.error{padding:10px 12px;border-radius:13px;background:#fff1f4;color:#d51d55;font-size:13px;font-weight:750}.app-shell{min-height:100vh;display:grid;grid-template-columns:238px minmax(0,1fr)}.app-shell aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:24px;padding:24px 18px;border-right:1px solid var(--c-line);background:#ffffffb8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.logo-line b{display:block;font-size:18px}.logo-line small{color:var(--c-muted);font-size:12px;font-weight:780}.app-shell nav{display:grid;gap:8px}.app-shell nav button,.logout{min-height:48px;display:flex;align-items:center;gap:12px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--c-muted);padding:0 14px;text-align:left;font-weight:790}.app-shell nav button.active{border-color:var(--c-line);background:var(--c-surface);color:var(--c-ink);box-shadow:0 10px 26px #07111f0d}.logout{margin-top:auto}.workspace{min-width:0;width:min(1280px,100%);margin:0 auto;padding:28px clamp(18px,3vw,40px) 56px}.workspace>header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.workspace h1{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.06;letter-spacing:0;font-weight:760}.user-chip{min-height:44px;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--c-line);border-radius:999px;padding:0 14px;background:var(--c-surface);color:var(--c-muted);font-size:14px;font-weight:780}.content-grid{display:grid;gap:16px}.content-grid.two{grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);align-items:start}.panel{min-width:0;border:1px solid var(--c-line);border-radius:20px;background:#ffffffdb;box-shadow:0 12px 40px #07111f0a;padding:20px}.dashboard-stack{display:grid;gap:16px}.dashboard-section{scroll-margin-top:20px}.dashboard-overview{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;background:linear-gradient(120deg,#2d96f614,#11985f17),#ffffffe6}.dashboard-overview h2{margin-bottom:6px;font-size:24px;font-weight:700}.dashboard-overview p{max-width:560px;margin:0;color:var(--c-muted);line-height:1.45;font-weight:650}.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(126px,1fr));gap:8px}.quick-actions button{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);color:var(--c-ink);padding:0 14px;font-size:14px;font-weight:750;box-shadow:0 8px 22px #07111f0d}.quick-actions button:first-child{background:var(--c-ink);border-color:var(--c-ink);color:#fff}.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:#07111f57;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.modal-card{width:min(980px,100%);max-height:min(86vh,900px);overflow:auto;border:1px solid var(--c-line);border-radius:28px;background:var(--c-bg);box-shadow:0 32px 100px #07111f38;padding:18px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px 8px 18px}.modal-title-row{display:flex;align-items:center;gap:10px}.modal-head h2{margin:0;font-size:28px;line-height:1.1}.modal-head p:not(.eyebrow){margin:0;color:var(--c-muted);font-size:14px;font-weight:650}.modal-head .icon-button{border-radius:999px;font-size:24px;line-height:1}.modal-card .content-grid.two{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr)}.modal-card .panel{box-shadow:none}.panel h2{margin:0 0 8px;font-size:24px;line-height:1.1;letter-spacing:0}.panel-subtitle{margin:-2px 0 0;color:var(--c-muted);font-size:13px;font-weight:600}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.issue-box{display:grid;gap:18px}.preview-panel{display:grid;gap:20px}.order-lines{display:grid;gap:8px;padding:14px;border-radius:18px;background:var(--c-surface-soft)}.order-lines span{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--c-muted);font-size:13px;font-weight:780}.order-lines small{font-size:13px}.order-lines b{color:var(--c-ink);font-size:15px}.order-lines .discount b{color:var(--c-green)}.order-lines .total{padding-top:8px;border-top:1px solid var(--c-line)}.order-lines .total b{font-size:22px}.promo-box{display:grid;gap:8px}.promo-box>span{display:inline-flex;align-items:center;gap:8px;color:var(--c-muted);font-size:13px;font-weight:850}.promo-box .good{color:var(--c-green)}.promo-box .bad{color:var(--c-pink)}.card-panel,.details-panel,.topup-panel,.payment-panel{display:grid;gap:16px}.cards-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px}.cards-tabs button{min-height:36px;flex:0 0 auto;border:1px solid var(--c-line);border-radius:999px;padding:0 12px;background:var(--c-surface);color:var(--c-muted);font-size:13px;font-weight:800}.cards-tabs button.active{background:var(--c-ink);border-color:var(--c-ink);color:#fff}.card-visual{min-height:238px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}.card-status{border-radius:999px;padding:5px 10px;background:#ffffff21;font-size:12px;font-weight:850}.chip{width:48px;height:36px;border-radius:11px;background:linear-gradient(135deg,#fffc,#ffffff3d),#dbe7f0;box-shadow:inset 0 0 0 1px #ffffff5c}.status-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px}.status-strip span{min-height:44px;display:flex;align-items:center;gap:9px;border:1px solid var(--c-line);border-radius:14px;padding:0 12px;background:var(--c-surface);color:var(--c-muted);font-size:14px;font-weight:760}.copy-grid{display:grid;gap:10px}.copy-field{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--c-line);border-radius:16px;background:var(--c-surface);color:var(--c-ink);padding:0 14px;text-align:left;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.details-modal-grid .copy-field{min-height:48px;border-radius:13px;padding:8px 12px}.details-modal-grid .copy-field small{margin-bottom:2px;font-size:10px}.details-modal-grid .copy-field b{font-size:14px}.copy-field small{display:block;margin-bottom:3px;color:var(--c-muted-2);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.copy-field b{display:block;max-width:100%;color:var(--c-ink);font-size:15px;font-weight:720;word-break:break-word}.copy-field .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.02em}.copy-field.muted b{color:var(--c-muted-2)}.card-network-badge{flex:0 0 auto;min-width:42px;height:25px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--c-line);border-radius:999px;background:#fff;color:#123177;font-size:10px;font-weight:950;letter-spacing:.04em;box-shadow:0 8px 18px #07111f0d}.card-network-badge.mastercard{position:relative;gap:0;min-width:45px;background:#fff}.card-network-badge.mastercard i{width:16px;height:16px;display:block;border-radius:999px;background:#eb001b}.card-network-badge.mastercard i+i{margin-left:-5px;background:#f79e1b;mix-blend-mode:multiply}.input-label.amount input{font-size:30px;line-height:1;font-weight:900}.quote-card{display:grid;gap:4px;padding:18px;border-radius:20px;background:linear-gradient(120deg,#2d96f61c,#11985f1f),var(--c-surface);border:1px solid var(--c-line)}.topup-simple{width:min(520px,100%);display:grid;gap:16px;margin:0 auto}.topup-simple-head{display:grid;gap:5px}.topup-simple-head h2{margin:0;font-size:30px;line-height:1}.topup-simple-head p{margin:0;color:var(--c-muted);font-size:14px;font-weight:650}.topup-simple-body{display:grid;gap:12px}.input-label.compact input,.input-label.compact select{min-height:42px}.quote-card.compact{min-height:108px;align-content:center;padding:16px}.quote-card.compact strong{font-size:34px}.quote-card.compact small{max-width:360px}.quote-card span,.quote-card small{color:var(--c-muted);font-size:13px;font-weight:760}.quote-card strong{font-size:42px;line-height:1}.payment-methods{display:grid;gap:10px}.payment-methods button{min-height:52px;display:flex;align-items:center;gap:12px;border:1px solid var(--c-line);border-radius:17px;background:var(--c-surface);color:var(--c-ink);padding:0 14px;text-align:left;font-weight:730}.payment-methods button svg:last-child{margin-left:auto}.instructions-panel{display:grid;gap:18px}.search-box{min-width:min(360px,100%);min-height:44px;display:flex;align-items:center;gap:9px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);padding:0 14px;color:var(--c-muted)}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--c-ink)}.category-pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.category-pills button{min-height:34px;flex:0 0 auto;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);color:var(--c-muted);padding:0 13px;font-size:13px;font-weight:650}.category-pills button.active{background:var(--c-ink);border-color:var(--c-ink);color:#fff}.service-picker-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:16px;align-items:start}.service-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;max-height:440px;overflow:auto;padding-right:4px}.service-card{min-height:74px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid var(--c-line);border-radius:16px;background:var(--c-surface);color:var(--c-ink);padding:10px;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.service-card:hover{transform:translateY(-1px);border-color:#07111f2e;box-shadow:0 14px 32px #07111f12}.service-card.active{border-color:#07111f3d;background:linear-gradient(135deg,#fffffffa,#f6fafff0),var(--c-surface);box-shadow:inset 0 0 0 1px #07111f0a,0 16px 38px #07111f14}.service-card span{min-width:0}.service-card b{display:block;margin-bottom:3px;overflow:hidden;color:var(--c-ink);font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.service-card small{display:block;overflow:hidden;color:var(--c-muted);font-size:12px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.service-card em{align-self:start;max-width:92px;overflow:hidden;border-radius:999px;padding:5px 8px;background:var(--c-surface-soft);color:var(--c-muted);font-size:10.5px;font-style:normal;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.service-logo{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:var(--service-accent);font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:0;box-shadow:none}.service-logo.with-image{background:transparent;box-shadow:none}.service-logo img{width:100%;height:100%;object-fit:contain;border-radius:7px}.service-logo>span{transform:translateY(-.5px)}.service-logo.small{width:34px;height:34px;border-radius:0;font-size:13px}.service-empty{min-height:160px;grid-column:1 / -1;display:grid;place-items:center;align-content:center;gap:8px;border:1px dashed var(--c-line);border-radius:20px;color:var(--c-muted);text-align:center;padding:24px}.service-empty b{color:var(--c-ink);font-weight:700}.instruction-body{position:sticky;top:18px;min-height:320px;border:1px solid var(--c-line);border-radius:20px;background:#fbfcfd;padding:22px}.selected-service-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.selected-service-head>span{min-width:0}.selected-service-head small{display:block;margin-bottom:3px;color:var(--c-muted-2);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.instruction-body h3{margin:0;font-size:24px;font-weight:700}.selected-service-head p{margin:3px 0 0;color:var(--c-muted);font-size:14px;font-weight:500}.instruction-body ol{margin:0;padding-left:22px;color:var(--c-ink-soft);line-height:1.6;font-weight:500}.instruction-body li+li{margin-top:9px}.referral-hero{display:grid;gap:14px}.referral-hero p{color:var(--c-muted);line-height:1.5;font-weight:660}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-grid div,.metric{min-height:96px;display:grid;align-content:center;gap:7px;border:1px solid var(--c-line);border-radius:18px;background:#fbfcfd;padding:16px}.stat-grid .span{grid-column:1 / -1}.stat-grid small,.metric small{color:var(--c-muted-2);font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.stat-grid strong,.metric strong{font-size:28px;line-height:1}.stat-grid b{word-break:break-all}.admin-stack{display:grid;gap:16px}.admin-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.admin-settings{display:grid;gap:12px}.table-panel{overflow:hidden}.table{display:grid;gap:8px}.tr{display:grid;grid-template-columns:90px minmax(160px,1fr) minmax(130px,.8fr) 110px 90px;gap:12px;align-items:center;min-height:48px;border:1px solid var(--c-line);border-radius:14px;background:#fbfcfd;padding:0 12px;color:var(--c-muted);font-size:13px;font-weight:720}.tr b{color:var(--c-ink)}.pay-home{min-height:100vh;padding:22px clamp(16px,3vw,44px) 58px;background:radial-gradient(circle at 12% 0%,rgba(45,150,246,.12),transparent 32vw),radial-gradient(circle at 88% 10%,rgba(190,242,255,.72),transparent 28vw),linear-gradient(180deg,#fbfcfd,#f6f8fb)}.pay-home-topbar{width:min(1120px,100%);min-height:52px;margin:0 auto 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}.pay-brand .brand-mark,.premium-card-top .brand-mark{background:transparent;border:0;box-shadow:none;transform:none}.pay-brand .brand-mark img,.premium-card-top .brand-mark img{transform:none}.pay-brand,.pay-home-actions{display:flex;align-items:center;gap:10px}.pay-brand b{display:block;font-size:18px;line-height:1.05}.pay-brand small{display:block;color:var(--c-muted);font-size:12px;font-weight:760}.pay-home-actions button{min-height:38px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--c-line);border-radius:999px;background:#ffffffc7;color:var(--c-ink-soft);padding:0 13px;font-size:13px;font-weight:760;box-shadow:0 8px 22px #07111f0a}.pay-card-screen{width:min(880px,100%);margin:0 auto;display:grid;justify-items:center;text-align:center}.pay-card-screen h1{margin:0 0 18px;font-size:clamp(32px,4.6vw,54px);line-height:.96;font-weight:860}.pay-card-center{width:min(560px,100%);display:grid;justify-items:center;gap:14px}.premium-card-scene{--rx: 0deg;--ry: 0deg;--mx: 50%;--my: 45%;position:relative;width:min(430px,92vw);perspective:1200px;transform-style:preserve-3d;will-change:transform}.premium-card-scene:after{content:"";position:absolute;top:18px;right:-128px;bottom:18px;width:140px;z-index:6}.premium-card{position:relative;isolation:isolate;width:100%;aspect-ratio:1.586 / 1;overflow:hidden;display:grid;align-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.88);border-radius:24px;padding:24px;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.96),transparent 24%),radial-gradient(ellipse at 16% 28%,rgba(69,171,255,.25),transparent 22%),radial-gradient(ellipse at 82% 32%,rgba(119,219,255,.22),transparent 20%),radial-gradient(ellipse at 30% 82%,rgba(154,174,255,.18),transparent 23%),radial-gradient(ellipse at 88% 84%,rgba(255,255,255,.62),transparent 18%),conic-gradient(from 136deg at 44% 55%,#fff0,#40a8ff24,#ffffff94,#86c8ff33,#b2a6ff1c,#fff0),linear-gradient(113deg,#fbfdff,#d7e0e7 16%,#fff,#c9d9e2,#f8fcff,#dbe8ef 72%,#fff);box-shadow:0 26px 70px #1a548c26,inset 0 1px 1px #fffffffa,inset 0 -1px #3c82be1f;color:#07111f;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:box-shadow .2s ease;will-change:transform;backface-visibility:hidden}.premium-card-scene.drawing .premium-card{transform:rotateX(0) rotateY(0)}.premium-card:before,.premium-card:after,.mini-premium-card:before{content:"";position:absolute;inset:-34%;pointer-events:none}.premium-card:before,.mini-premium-card:before{z-index:-1;opacity:.78;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.82),transparent 9%),radial-gradient(circle at 34% 32%,rgba(69,177,255,.34),transparent 14%),radial-gradient(circle at 62% 26%,rgba(151,171,255,.16),transparent 13%),radial-gradient(circle at 78% 62%,rgba(255,255,255,.34),transparent 14%),radial-gradient(circle at 28% 72%,rgba(87,214,255,.18),transparent 12%),radial-gradient(ellipse at 54% 78%,rgba(90,132,255,.13),transparent 18%),repeating-linear-gradient(104deg,#fff0 0 34px,#ffffff94,#ffffff94 50px,#36abff38 56px 74px,#97caff2e 82px 98px,#ffffffa8,#ffffffa8 126px,#fff0 144px 196px),repeating-linear-gradient(14deg,rgba(255,255,255,.2) 0 2px,rgba(7,17,31,.025) 2px 4px,transparent 4px 9px);mix-blend-mode:overlay;transform:rotate(-7deg);animation:cardShine 12s ease-in-out infinite alternate}.premium-card:after{z-index:-1;opacity:.36;background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,rgba(7,17,31,.026) 0 1px,transparent 1px 8px),linear-gradient(105deg,transparent 0 34%,rgba(255,255,255,.88) 43%,transparent 55%),radial-gradient(ellipse at 76% 18%,rgba(53,155,255,.12),transparent 26%);mix-blend-mode:soft-light;transform:none}.premium-card-glow{position:absolute;inset:0;z-index:-1;background:linear-gradient(150deg,rgba(255,255,255,.22),transparent 24%),radial-gradient(circle at 70% 72%,rgba(126,221,255,.3),transparent 30%)}@keyframes cardShine{0%{background-position:0 0,0 0}to{background-position:120px 0,32px 0}}.premium-card-top,.premium-card-bottom{position:absolute;z-index:3;transform:translateZ(22px);display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.premium-card-top{top:24px;left:24px;right:24px}.premium-card-bottom{left:24px;right:24px;bottom:34px}.premium-card-top span{font-size:16px;font-weight:780}.premium-card-top b{border-radius:999px;padding:5px 10px;background:#ffffff9e;font-size:12px;box-shadow:inset 0 0 0 1px #07111f12}.premium-chip{display:none}.card-secret{position:relative;z-index:3;transform:translateZ(24px);min-width:0;border:0;border-radius:0;background:transparent;color:var(--c-ink);padding:0;text-align:left;-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.premium-card>.card-secret:not(.compact){position:absolute;left:24px;right:24px;top:142px}.card-secret:hover{transform:none;background:transparent;box-shadow:none}.card-secret small{display:block;margin-bottom:3px;color:#07111f6b;font-size:8.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.card-secret b{display:block;font-size:clamp(15px,3.6vw,21px);line-height:1.08;font-weight:760;letter-spacing:.04em;transition:filter .18s ease,opacity .18s ease}.card-secret.compact{flex:1 1 0;min-height:32px}.card-secret.compact b{overflow:hidden;font-size:10.5px;letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}.card-draw-tools{position:absolute;z-index:8;top:50%;right:-118px;display:grid;gap:7px;padding:4px;border-radius:17px;background:#ffffffd1;border:1px solid rgba(7,17,31,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px #07111f1f;opacity:0;pointer-events:none;transform:translate(14px,-50%) scale(.96);transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}.card-draw-tools button{min-height:31px;border:0;border-radius:13px;background:transparent;color:#07111f9e;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:10px;font-weight:850;transition:background .18s ease,color .18s ease,transform .18s ease}.card-draw-tools button:hover{transform:translate(-1px)}.premium-card-scene:hover .card-draw-tools,.premium-card-scene:focus-within .card-draw-tools,.premium-card-scene.drawing .card-draw-tools{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}.card-draw-tools button.active{background:#000000e6;color:#fff}.card-drawing-canvas{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;touch-action:none}.card-drawing-canvas.active{z-index:40;transform:translateZ(80px);pointer-events:auto;cursor:crosshair}.card-secret.revealed{animation:revealPop .24s ease-out}@keyframes revealPop{0%{transform:scale(.985);opacity:.76}to{transform:scale(1);opacity:1}}.details-trigger{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--c-line);border-radius:999px;background:#ffffffd6;color:var(--c-ink);padding:0 18px;font-size:14px;font-weight:820;box-shadow:0 12px 34px #07111f12}.details-trigger.primary{background:var(--c-ink);color:#fff}.pay-card-tabs{display:flex;gap:7px;overflow-x:auto;max-width:100%;padding:2px 0}.pay-card-tabs button{min-height:32px;flex:0 0 auto;border:1px solid var(--c-line);border-radius:999px;background:#fff;color:var(--c-muted);padding:0 11px;font-size:12px;font-weight:760}.pay-card-tabs button.active{background:var(--c-ink);border-color:var(--c-ink);color:#fff}.pay-balance{display:grid;gap:0;margin-top:2px}.pay-balance small{color:var(--c-muted);font-size:12px;font-weight:820;text-transform:uppercase;letter-spacing:.08em}.pay-balance strong{font-size:34px;line-height:1;font-weight:860}.pay-main-buttons{width:min(430px,100%);display:grid;grid-template-columns:1fr 1fr;gap:10px}.pay-main-buttons button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--c-line);border-radius:16px;background:#fff;color:var(--c-ink);font-size:14px;font-weight:820;box-shadow:0 14px 34px #07111f0f}.pay-main-buttons button:first-child{background:var(--c-ink);border-color:var(--c-ink);color:#fff}.pay-home-note{max-width:520px;margin:18px auto 0;color:var(--c-muted);font-size:14px;font-weight:650}.card-loading{width:min(430px,92vw);aspect-ratio:1.586 / 1;display:grid;place-items:center;align-content:center;gap:10px;border:1px solid var(--c-line);border-radius:24px;background:#ffffffb8;color:var(--c-muted);font-weight:800}.details-modal-grid{display:grid;gap:10px}.simple-purchase{display:grid;gap:16px}.mini-premium-card{position:relative;overflow:hidden;min-height:190px;display:grid;align-content:space-between;border:1px solid rgba(255,255,255,.8);border-radius:22px;padding:22px;background:linear-gradient(118deg,#fffffff5,#d5efffd1,#fffffff0),conic-gradient(from 210deg,#2d96f66b,#fff,#aaf5ff9e,#ffffffeb);box-shadow:0 18px 45px #1a548c21;color:var(--c-ink)}.mini-premium-card>*{position:relative;z-index:1}.mini-premium-card span{font-weight:820}.mini-premium-card b{font-size:28px;letter-spacing:.08em}.mini-premium-card small{color:var(--c-muted);font-weight:780}.history-list{display:grid;gap:10px}.history-loading,.history-item{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--c-line);border-radius:16px;background:#fff;padding:0 14px}.history-loading{justify-content:center;color:var(--c-muted);font-weight:760}.history-item b,.history-item small{display:block;text-align:left}.history-item small{color:var(--c-muted);font-size:12px;font-weight:650}.history-item strong{white-space:nowrap}.services-home{width:min(1040px,100%);margin:30px auto 0;display:grid;gap:16px;border:1px solid var(--c-line);border-radius:28px;background:#ffffffb8;box-shadow:0 20px 70px #07111f0f;padding:clamp(16px,2.6vw,28px)}.services-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:18px;align-items:end}.services-head h2{margin:0 0 5px;font-size:clamp(26px,3vw,38px)}.services-head p:not(.eyebrow){margin:0;color:var(--c-muted);font-weight:650}.service-search{min-height:46px;display:flex;align-items:center;gap:9px;border:1px solid var(--c-line);border-radius:999px;background:#fff;color:var(--c-muted);padding:0 14px}.service-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--c-ink);font-weight:760}.service-filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.service-filter-row button{min-height:34px;flex:0 0 auto;border:1px solid var(--c-line);border-radius:999px;background:#fff;color:var(--c-muted);padding:0 13px;font-size:13px;font-weight:760}.service-filter-row button.active{background:var(--c-ink);border-color:var(--c-ink);color:#fff}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.service-tile{min-height:62px;display:flex;align-items:center;gap:12px;border:0;border-radius:16px;background:transparent;color:var(--c-ink);padding:10px;text-align:left;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.service-tile:hover,.service-tile.active{transform:translateY(-1px);background:#ffffffb8;box-shadow:0 12px 28px #07111f0e}.service-tile span{min-width:0}.service-tile b,.service-tile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-tile b{font-size:15px;font-weight:760}.service-tile small{color:var(--c-muted);font-size:12px;font-weight:600}.service-guide{display:grid;gap:16px;border:1px solid var(--c-line);border-radius:22px;background:#fff;padding:18px}.service-guide ol{margin:0;padding-left:22px;color:var(--c-ink-soft);font-weight:610}.service-guide li+li{margin-top:7px}.guide-fullscreen{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(16px,4vw,42px);background:radial-gradient(circle at 16% 12%,rgba(45,150,246,.16),transparent 34vw),#f7fafceb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.guide-fullscreen-card{width:min(720px,100%);display:grid;gap:20px;border:1px solid rgba(7,17,31,.08);border-radius:30px;background:#ffffffdb;padding:clamp(22px,4vw,42px);box-shadow:0 34px 100px #07111f29}.guide-fullscreen-card h2{margin:0;font-size:clamp(34px,5vw,58px);line-height:.95}.guide-fullscreen-card ol{display:grid;gap:13px;margin:0;padding-left:28px;color:var(--c-ink-soft);font-size:18px;font-weight:650}.guide-close{position:fixed;top:22px;right:22px;width:46px;height:46px;border:1px solid rgba(7,17,31,.08);border-radius:999px;background:#ffffffe0;color:var(--c-ink);font-size:28px;line-height:1;box-shadow:0 14px 34px #07111f17}@media(max-width:1160px){.app-shell{grid-template-columns:1fr}.app-shell aside{position:static;height:auto;padding:18px;border-right:0;border-bottom:1px solid var(--c-line)}.app-shell nav{display:flex;overflow-x:auto}.app-shell nav button{flex:0 0 auto}.logout{display:none}.content-grid.two,.modal-card .content-grid.two,.auth-card,.service-picker-layout{grid-template-columns:1fr}.instruction-body{position:static}.dashboard-overview{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(4,minmax(120px,1fr));overflow-x:auto}.admin-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.services-head{grid-template-columns:1fr}}@media(max-width:720px){.pay-home{padding:14px 12px 42px}.pay-home-topbar{display:grid;justify-items:center;margin-bottom:22px}.pay-home-actions{width:100%;justify-content:center;flex-wrap:wrap}.pay-home-actions button{min-height:36px;padding:0 11px;font-size:12px}.pay-card-screen h1{margin-bottom:18px;font-size:36px}.premium-card{border-radius:21px;padding:18px}.premium-card-bottom{gap:7px}.card-secret{border-radius:13px;padding:6px 8px}.card-secret b{font-size:22px}.card-secret.compact b{font-size:11px}.pay-main-buttons{grid-template-columns:1fr}.services-home{margin-top:36px;border-radius:22px}.services-grid{grid-template-columns:1fr}.auth-page{padding:12px;place-items:start center}.auth-card,.panel{border-radius:20px}.auth-product,.auth-panel,.panel{padding:18px}.auth-product h1{font-size:40px}.workspace{padding:20px 14px 40px}.workspace>header{display:grid}.workspace h1{font-size:36px}.user-chip{width:100%;justify-content:center}.section-head,.status-strip{grid-template-columns:1fr;display:grid}.card-visual{min-height:220px;padding:20px}.card-number,.mini-card-preview strong{font-size:22px}.stat-grid,.admin-metrics{grid-template-columns:1fr}.tr{grid-template-columns:1fr;gap:5px;padding:12px}.search-box{min-width:0}.quick-actions{grid-template-columns:1fr 1fr}.quick-actions button{min-height:42px;padding:0 10px;font-size:13px}.modal-backdrop{padding:8px;align-items:end}.modal-card{width:100%;max-height:92vh;border-radius:22px;padding:12px}.modal-head{padding:6px 4px 14px}.modal-head h2{font-size:24px}}.pay-home{background:#050606;padding:18px clamp(16px,3vw,44px) 58px}.pay-home-topbar{width:min(1120px,100%);min-height:48px;margin-bottom:18px;color:#fff}.pay-home-topbar .brand-mark img{filter:brightness(0) invert(1)}.pay-home-actions button{min-height:38px;border-color:#ffffff1a;background:#121214;color:#ffffffc7;box-shadow:none}.pay-home-actions button:hover{border-color:#adff14;background:#adff14;color:#071008}.pay-card-screen{position:relative;isolation:isolate;width:min(1120px,100%);min-height:610px;overflow:hidden;align-content:center;border:1px solid rgba(255,255,255,.07);border-radius:32px;background:radial-gradient(ellipse at 50% 48%,rgba(173,255,20,.82),rgba(99,170,0,.2) 25%,transparent 51%),radial-gradient(circle at 50% 48%,rgba(36,88,57,.52),transparent 65%),#000a14;padding:clamp(42px,6vw,72px) 20px}.pay-card-screen:before,.pay-card-screen:after{content:"";position:absolute;z-index:-1;pointer-events:none}.pay-card-screen:before{width:680px;height:680px;top:50%;left:50%;border:1px solid rgba(173,255,20,.13);border-radius:44% 56% 52% 48%;transform:translate(-50%,-50%) rotate(18deg)}.pay-card-screen:after{width:430px;height:740px;top:-65px;left:calc(50% - 215px);background:linear-gradient(90deg,transparent,rgba(173,255,20,.2),transparent);filter:blur(24px);transform:rotate(12deg)}.pay-card-screen h1{position:relative;z-index:2;max-width:820px;margin-bottom:24px;color:#fff;font-family:"Roboto Flex",var(--font-display);font-size:clamp(50px,7vw,86px);font-variation-settings:"GRAD" -200,"wdth" 25,"opsz" 144;font-weight:950;line-height:.86;text-transform:uppercase}.pay-card-center{position:relative;z-index:2}.premium-card-scene.minimal{width:min(424px,86vw)}.premium-card.minimal-card{border:1px solid rgba(255,255,255,.5);border-radius:24px;background:#adff14;box-shadow:0 30px 70px #000a1475,0 0 0 1px #adff1433;color:#000a14}.premium-card.minimal-card:before{inset:auto -12% -48% 18%;border-color:#000a1421}.premium-card.minimal-card:after{background:linear-gradient(118deg,rgba(255,255,255,.32),transparent 26% 100%)}.minimal-card .brand-mark img{filter:brightness(0);opacity:.94}.minimal-card .premium-card-top,.minimal-card .premium-card-bottom,.minimal-card .card-secret,.minimal-card .card-secret b,.minimal-card .card-network-word{color:#000a14}.minimal-card .card-secret small{color:#000a1485}.minimal-card>.card-secret:not(.compact) b{font-family:var(--font-mono);font-size:clamp(18px,4vw,23px);font-weight:700}.details-trigger{min-height:44px;border:1px solid rgba(255,255,255,.62);background:#ffffffe6;color:#000a14;box-shadow:0 14px 34px #000a1440;backdrop-filter:blur(14px)}.details-trigger.primary{border-color:#adff14;background:#adff14;color:#071008}.pay-card-tabs button{border-color:#ffffff24;background:#121214e0;color:#ffffff9e}.pay-card-tabs button.active{border-color:#adff14;background:#adff14;color:#071008}.pay-balance small{color:#ffffff85}.pay-balance strong{color:#fff;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -120,"wdth" 55,"opsz" 80;font-size:42px;font-weight:900}.pay-main-buttons button{min-height:52px;border:0;border-radius:999px;box-shadow:none}.pay-main-buttons button:first-child{background:#adff14;color:#071008}.pay-main-buttons button:last-child{background:#fff;color:#000a14}.card-loading{border-color:#ffffff1f;background:#0f0f11c7;color:#ffffff9e}.services-home{margin-top:28px;background:#fff}.modal-backdrop{background:#000a14b8;backdrop-filter:blur(12px)}.modal-card{border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 28px 90px #000a1461}.modal-head h2{font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -200,"wdth" 35,"opsz" 96;font-size:clamp(36px,5vw,54px);font-weight:950;line-height:.88;text-transform:uppercase}.modal-card .btn-primary{background:#000a14;color:#fff;box-shadow:none}.modal-card .issue-pay-button{background:#adff14;color:#071008}.mini-premium-card.minimal-card{border-color:#d9ff91;background:#adff14;color:#000a14;box-shadow:0 18px 46px #000a142e}.mini-premium-card.minimal-card small{color:#000a1485}.mini-premium-card.minimal-card .brand-mark img{filter:brightness(0)}.auth-page{background:#050606;padding:clamp(16px,3vw,38px)}.auth-card{width:min(1080px,100%);overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:32px;background:#fff;box-shadow:none}.auth-product{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 52% 52%,rgba(173,255,20,.88),rgba(73,130,0,.24) 27%,transparent 56%),#000a14;color:#fff}.auth-product:after{content:"";position:absolute;z-index:-1;width:460px;height:680px;top:-110px;left:50%;background:linear-gradient(90deg,transparent,rgba(173,255,20,.25),transparent);filter:blur(28px);transform:translate(-50%) rotate(13deg)}.auth-product .brand-row{color:#fff}.auth-product .brand-mark img{filter:brightness(0) invert(1)}.auth-product .small-pill{background:#adff14;color:#071008}.auth-product h1{max-width:540px;color:#fff;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -200,"wdth" 25,"opsz" 144;font-size:clamp(58px,7vw,86px);font-weight:950;line-height:.84;text-transform:uppercase}.auth-product>p{color:#ffffffb8}.auth-product .mini-card-preview{border:1px solid rgba(255,255,255,.55);background:#adff14;color:#000a14;box-shadow:0 24px 60px #000a1457}.auth-product .mini-card-preview small{color:#000a148c}.auth-points span{border-color:#ffffff1f;background:#ffffff14;color:#ffffffc2}.auth-panel{background:#fff}.auth-panel h2{font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -150,"wdth" 55,"opsz" 72;font-size:38px;font-weight:900}.auth-panel .mode-switch{background:#f1f2f3}.auth-panel .mode-switch button.active{background:#000a14;color:#fff}.auth-panel .auth-submit{background:#adff14;color:#071008;box-shadow:none}@media(max-width:720px){.pay-home{padding:12px 10px 38px}.pay-home-topbar{margin-bottom:12px}.pay-home-actions button{background:#121214}.pay-card-screen{min-height:570px;border-radius:24px;padding:38px 12px}.pay-card-screen h1{max-width:340px;margin-bottom:22px;font-size:clamp(48px,16vw,66px)}.premium-card-scene.minimal{width:min(365px,88vw)}.premium-card.minimal-card{border-radius:20px}.minimal-card .premium-card-top{top:18px;right:18px;left:18px}.minimal-card>.card-secret:not(.compact){top:104px;right:18px;left:18px}.minimal-card>.card-secret:not(.compact) b{font-size:17px;letter-spacing:.055em}.minimal-card .premium-card-bottom{right:18px;bottom:18px;left:18px}.minimal-card .card-secret.compact{min-height:25px;padding:0}.minimal-card .card-secret.compact b{font-size:9px}.pay-main-buttons{grid-template-columns:1fr 1fr;gap:8px}.pay-main-buttons button{min-height:48px;padding:0 12px;font-size:13px}.services-home{margin-top:14px}.modal-head h2{font-size:38px}.auth-card{border-radius:24px}.auth-product h1{font-size:58px}}body:has(.pay-home),body:has(.auth-page){background:#050606}.pay-home{background:radial-gradient(circle at 7% 32%,rgba(173,255,20,.1),transparent 24vw),radial-gradient(circle at 96% 74%,rgba(54,104,255,.1),transparent 28vw),linear-gradient(180deg,#050606,#080b0a 55%,#050606)}.auth-page{background:radial-gradient(circle at 8% 20%,rgba(173,255,20,.11),transparent 25vw),radial-gradient(circle at 94% 84%,rgba(54,104,255,.1),transparent 28vw),#050606}.pay-card-screen{min-height:570px}.topup-plus-icon{width:21px;height:21px;display:inline-grid;place-items:center;flex:0 0 auto;border:1.8px solid currentColor;border-radius:50%;font-family:var(--font-sans);font-size:18px;font-weight:700;line-height:1}.card-network-mark{min-width:46px;height:28px;display:inline-flex;align-items:center;justify-content:flex-end}.card-network-mark.visa{color:#1434cb;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-style:italic;font-weight:900;letter-spacing:-.08em;transform:skew(-7deg)}.card-network-mark.mastercard i{width:25px;height:25px;display:block;border-radius:50%}.card-network-mark.mastercard i:first-child{background:#eb001b}.card-network-mark.mastercard i:last-child{margin-left:-9px;background:#f79e1b;mix-blend-mode:multiply}.modal-backdrop{z-index:150;overflow-y:auto;padding:18px;background:#000a14b3;backdrop-filter:blur(9px)}.modal-card{position:relative;width:min(500px,calc(100vw - 36px));max-height:min(760px,calc(100dvh - 36px));overflow-y:auto;scrollbar-width:none;border:1px solid #fff;border-radius:16px;background:#fff;padding:38px 28px 24px;box-shadow:0 0 32px #000a1457}.modal-card::-webkit-scrollbar{display:none}.modal-card.modal-wide{width:min(1040px,calc(100vw - 36px))}.modal-head{display:block;margin:0 0 22px;padding:0;text-align:center}.modal-title-row{justify-content:center}.modal-head h2{color:#000a14;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -200,"wdth" 25,"opsz" 144;font-size:56px;font-weight:950;line-height:.86;text-transform:uppercase}.modal-head p:not(.eyebrow){max-width:390px;margin:10px auto 0;color:#697078;font-size:13px;font-weight:650;line-height:1.3}.modal-head .icon-button{position:absolute;z-index:5;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;background:#000a140e;color:#000a1499;font-size:21px;font-weight:400;box-shadow:none;transition:background .15s,transform .15s}.modal-head .icon-button:hover{background:#000a141a;transform:rotate(3deg)}.modal-card .btn,.modal-card .payment-methods button{min-height:50px;border-radius:9px;font-family:"Roboto Flex",var(--font-sans);font-variation-settings:"wdth" 120;font-weight:820}.modal-card .btn-primary{background:#000a14;color:#fff}.topup-simple{width:100%;gap:14px}.topup-simple-head{text-align:center}.topup-simple-head p{max-width:390px;margin:0 auto;color:#697078;font-size:12px;font-weight:600}.topup-amount-shell{position:relative}.input-label.amount .topup-amount-shell input{min-height:76px;border:1px solid rgba(0,10,20,.12);border-radius:12px;background:#f5f7f8;padding:0 58px 0 18px;color:#000a14;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -120,"wdth" 75,"opsz" 72;font-size:38px;font-weight:900}.input-label.amount .topup-amount-shell input:focus{border-color:#000a14;box-shadow:0 0 0 3px #000a140f}.topup-amount-shell>span{position:absolute;top:50%;right:19px;color:#000a14;font-size:29px;font-weight:800;transform:translateY(-50%);pointer-events:none}.quote-card.compact{min-height:116px;border:0;border-radius:12px;background:#000a14;padding:18px}.quote-card.compact span,.quote-card.compact small{color:#ffffff94}.quote-card.compact strong{color:#adff14;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -120,"wdth" 65,"opsz" 80;font-size:40px;font-weight:900}.payment-methods{gap:8px}.modal-card .payment-methods button{border:1px solid #000a14;background:#000a14;color:#fff;padding:0 15px}.modal-card .payment-methods button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px -20px #000a14a6}.modal-card .promo-box>span{color:#697078}.modal-card .promo-box>div{border-radius:10px;background:#f5f7f8}.guide-modal{display:grid;gap:14px}.guide-modal .selected-service-head{margin:0;border:1px solid rgba(0,10,20,.08);border-radius:12px;background:#f5f7f8;padding:13px}.guide-modal .selected-service-head h3{color:#000a14;font-size:20px;font-weight:800}.guide-modal .selected-service-head small{color:#899099;font-size:10px}.guide-steps{display:grid;gap:8px}.guide-step{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:11px;border:1px solid rgba(0,10,20,.08);border-radius:12px;background:#fff;padding:13px}.guide-step>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#000a14;color:#adff14;font-size:12px;font-weight:900}.guide-step p{margin:3px 0 0;color:#252c35;font-size:14px;font-weight:650;line-height:1.42}@media(max-width:720px){.modal-backdrop{align-items:center;padding:10px}.modal-card,.modal-card.modal-wide{width:min(100%,500px);max-height:calc(100dvh - 20px);border-radius:15px;padding:38px 14px 14px}.modal-head{margin-bottom:18px;padding:0 22px}.modal-head h2{font-size:42px}.modal-head p:not(.eyebrow){margin-top:8px;font-size:12px}.topup-simple-head p{font-size:11px}.input-label.amount .topup-amount-shell input{min-height:68px;font-size:34px}.quote-card.compact{min-height:106px}.guide-step{grid-template-columns:28px minmax(0,1fr);gap:9px;padding:11px}.guide-step>span{width:28px;height:28px}.guide-step p{font-size:13px}}html,body,#root{min-width:100%;min-height:100%;background:#eef1ec}body:has(.pay-home),body:has(.auth-page){background-color:#eef1ec;background-image:linear-gradient(rgba(7,16,8,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(7,16,8,.028) 1px,transparent 1px),radial-gradient(circle at 7% 7%,rgba(94,145,255,.1),transparent 31vw),radial-gradient(circle at 94% 92%,rgba(173,255,20,.1),transparent 34vw);background-size:34px 34px,34px 34px,auto,auto;background-attachment:fixed}.pay-home,.auth-page{width:100%;min-height:100dvh;background:transparent}.pay-home-topbar{color:#071008}.pay-home-topbar .brand-mark img{filter:none}.pay-home-actions button{border-color:#0710081a;background:#ffffffd6;color:#071008;box-shadow:0 10px 26px -22px #071008b3;backdrop-filter:blur(12px)}.pay-home-actions button:hover{border-color:#071008;background:#071008;color:#fff}.pay-card-screen{box-shadow:0 36px 90px -54px #071008ad}.services-home{box-shadow:0 28px 80px -58px #07100873}.auth-page{padding:24px}.auth-card{width:min(410px,100%);display:block;border:1px solid rgba(7,16,8,.08);border-radius:18px;background:#fff;box-shadow:0 32px 90px -46px #07100880}.auth-product{display:none}.auth-panel{display:grid;gap:16px;border:0;background:#fff;padding:38px 28px 24px}.auth-panel>div:nth-child(2){text-align:center}.auth-panel .eyebrow{margin:0 0 7px;color:#7b838a;font-size:10px;font-weight:820;letter-spacing:.12em;text-transform:uppercase}.auth-panel h2{color:#000a14;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -200,"wdth" 25,"opsz" 144;font-size:56px;font-weight:950;line-height:.86;text-transform:uppercase}.auth-intro{margin:10px 0 0;color:#697078;font-size:13px;font-weight:620}.auth-panel .mode-switch{order:3;border:0;border-radius:10px;background:#f3f5f6;padding:4px}.auth-panel .mode-switch button{min-height:38px;border-radius:8px;font-size:12px}.auth-panel .mode-switch button.active{background:#fff;color:#000a14;box-shadow:0 8px 20px -16px #000a14b3}.auth-form{order:4;gap:10px}.auth-form label{gap:6px;color:#697078;font-size:11px;font-weight:720}.auth-panel .input-shell{min-height:48px;border:1px solid rgba(0,10,20,.13);border-radius:10px;background:#fff;padding:0 13px;color:#7b838a;transition:border-color .15s,box-shadow .15s}.auth-panel .input-shell:focus-within{border-color:#40aeea;box-shadow:0 0 0 3px #40aeea1f}.auth-panel .input-shell input{font-size:14px;font-weight:650}.auth-panel .auth-submit{min-height:48px;display:grid;grid-template-columns:18px 1fr 18px;align-items:center;gap:8px;border-radius:10px;background:#000a14;color:#fff;padding:0 13px;font-size:13px;font-weight:820}.auth-panel .auth-submit svg:last-child{justify-self:end}.auth-panel .auth-divider{order:5;color:#9aa0a5;font-size:9px}.auth-panel .google-frame{order:6;min-height:44px}.auth-panel .google-slot,.auth-panel .google-slot>div,.auth-panel .google-slot iframe{width:100%!important;max-width:100%!important}.auth-panel .auth-footnote{order:7;color:#899097;font-size:9px;line-height:1.35;text-align:center}.topup-simple-body{gap:13px}.topup-live-result{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(0,10,20,.09);border-radius:11px;background:#f5f7f8;padding:0 16px}.topup-live-result span{color:#697078;font-size:12px;font-weight:700}.topup-live-result strong{color:#000a14;font-size:24px;font-weight:900}.topup-next-button{width:100%;min-height:52px;display:grid;grid-template-columns:1fr 20px;align-items:center;border:0;border-radius:10px;background:#000a14;color:#fff;padding:0 15px;font-family:"Roboto Flex",var(--font-sans);font-size:14px;font-weight:820;cursor:pointer;transition:transform .15s,opacity .15s}.topup-next-button span{justify-self:center;padding-left:20px}.topup-next-button svg{justify-self:end}.topup-next-button:hover:not(:disabled){transform:translateY(-1px)}.topup-next-button:disabled{cursor:not-allowed;opacity:.42}.topup-step-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.topup-step-toolbar button{border:0;background:transparent;color:#46515a;padding:4px 0;font-size:11px;font-weight:760;cursor:pointer}.topup-step-toolbar span{color:#9aa0a5;font-size:10px;font-weight:760;text-transform:uppercase}.topup-total-card{overflow:hidden;border-radius:13px;background:#000a14;color:#fff}.topup-total-main{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px}.topup-total-main span{color:#ffffff94;font-size:12px;font-weight:720}.topup-total-main strong{color:#adff14;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -120,"wdth" 65,"opsz" 80;font-size:36px;font-weight:920}.topup-total-rows{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.1);padding:10px 18px 13px}.topup-total-rows>div{min-height:27px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#ffffff8f;font-size:11px;font-weight:650}.topup-total-rows b{color:#fff;font-size:12px}.topup-total-rows .discount b,.topup-total-rows .topup-card-credit b{color:#adff14}.topup-total-rows .topup-card-credit{margin-top:6px;border-top:1px solid rgba(255,255,255,.09);padding-top:8px}.payment-method-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:2px}.payment-method-heading b{color:#000a14;font-size:15px}.payment-method-heading span{color:#8a9198;font-size:10px;font-weight:650}.payment-method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.modal-card .payment-method-grid .payment-method-card{min-height:66px;display:grid;grid-template-columns:38px minmax(0,1fr) 17px;gap:10px;border:1px solid rgba(0,10,20,.1);border-radius:11px;background:#f5f7f8;color:#000a14;padding:9px 11px}.modal-card .payment-method-grid .payment-method-card:last-child{grid-column:1 / -1}.modal-card .payment-method-grid .payment-method-card:hover:not(:disabled){border-color:#000a14;background:#fff;box-shadow:0 12px 26px -22px #000a14b3}.modal-card .payment-method-grid .payment-method-card.is-disabled{opacity:.5;cursor:not-allowed}.payment-method-copy{min-width:0;display:grid;gap:2px;text-align:left}.payment-method-copy b{overflow:hidden;color:#000a14;font-size:13px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.payment-method-copy small{overflow:hidden;color:#7c848c;font-size:9px;font-weight:650;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.payment-brand{width:36px;height:36px;display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden;border-radius:10px}.payment-brand svg{width:25px;height:25px}.payment-brand-sbp{background:#fff;border:1px solid rgba(0,10,20,.08)}.payment-brand-sbp svg{width:29px;height:29px}.payment-brand-card{background:#000a14;color:#fff}.payment-brand-tbank{background:#ffdd2d;color:#101010;font-family:Arial,sans-serif;font-size:20px;font-weight:950}.payment-brand-sber{background:#21a038;color:#fff;border-radius:50%}.payment-brand-crypto{background:#168acd;color:#fff;border-radius:50%}.saved-payment-methods{display:grid;gap:7px;border-top:1px solid rgba(0,10,20,.08);padding-top:11px}.saved-payment-methods>span{color:#8a9198;font-size:10px;font-weight:740}.saved-payment-methods button{min-height:48px;display:flex;align-items:center;gap:10px;border:1px solid rgba(0,10,20,.1);border-radius:10px;background:#fff;color:#000a14;padding:0 12px;font-weight:750}.saved-payment-methods button svg:last-child{margin-left:auto}@media(max-width:720px){body:has(.pay-home),body:has(.auth-page){background-size:28px 28px,28px 28px,auto,auto}.pay-home-topbar{color:#071008}.pay-home-actions button{background:#ffffffdb;color:#071008}.auth-page{padding:12px}.auth-card{border-radius:16px}.auth-panel{padding:34px 18px 18px}.auth-panel h2{font-size:clamp(44px,14vw,56px)}.payment-method-grid{grid-template-columns:1fr}.modal-card .payment-method-grid .payment-method-card:last-child{grid-column:auto}.topup-total-main strong{font-size:32px}}.user-menu-wrap{position:relative;z-index:40}.user-avatar-button{position:relative;width:44px;height:44px;display:grid;place-items:center;overflow:visible;border:3px solid rgba(255,255,255,.9);border-radius:50%;background:#000a14;color:#fff;padding:0;font-size:13px;font-weight:900;box-shadow:0 12px 30px -20px #000a14cc;cursor:pointer}.user-avatar-button img,.user-dropdown-profile img{width:100%;height:100%;display:block;border-radius:inherit;object-fit:cover}.user-avatar-button i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border:2px solid #eef1ec;border-radius:50%;background:#adff14}.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:min(330px,calc(100vw - 24px));display:grid;gap:10px;border:1px solid rgba(0,10,20,.09);border-radius:17px;background:#fffffffa;padding:12px;color:#000a14;box-shadow:0 28px 70px -34px #000a14bf;backdrop-filter:blur(18px)}.user-dropdown-profile{min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;border-radius:12px;background:#f3f5f4;padding:10px}.user-dropdown-profile>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#000a14;color:#fff;font-size:12px;font-weight:900}.user-dropdown-profile div{min-width:0;display:grid;gap:2px}.user-dropdown-profile b,.user-dropdown-profile small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown-profile b{font-size:14px}.user-dropdown-profile small{color:#778087;font-size:10px}.user-dropdown-links{display:grid;gap:3px}.user-dropdown-links button,.user-logout{min-height:42px;display:grid;grid-template-columns:20px minmax(0,1fr) 16px;align-items:center;gap:9px;border:0;border-radius:9px;background:transparent;color:#192129;padding:0 10px;text-align:left;font-size:12px;font-weight:760;cursor:pointer}.user-dropdown-links button:hover,.user-logout:hover{background:#f2f4f3}.user-dropdown-links button svg:last-child{color:#a0a6ab}.user-preference-block{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(0,10,20,.07);padding-top:9px}.user-preference-block>span{color:#727b83;font-size:10px;font-weight:760}.preference-segment{display:flex;gap:3px;border-radius:8px;background:#f0f2f1;padding:3px}.preference-segment button{min-height:28px;border:0;border-radius:6px;background:transparent;color:#7a8289;padding:0 9px;font-size:9px;font-weight:820;cursor:pointer}.preference-segment button.active{background:#fff;color:#000a14;box-shadow:0 6px 16px -12px #000a14b3}.theme-segment button{font-size:9px}.user-logout{grid-template-columns:20px 1fr;border-top:1px solid rgba(0,10,20,.07);border-radius:0 0 9px 9px;color:#c43d49;padding-top:5px}.auth-provider-page{padding:18px}.auth-choice-card{width:min(410px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;scrollbar-width:none;border:1px solid rgba(0,10,20,.08);border-radius:18px;background:#fff;padding:38px 28px 22px;box-shadow:0 32px 90px -46px #07100880}.auth-choice-card::-webkit-scrollbar{display:none}.auth-choice-head{margin-bottom:20px;text-align:center}.auth-wordmark{display:block;margin-bottom:8px;color:#8a9197;font-size:9px;font-weight:860;letter-spacing:.14em;text-transform:uppercase}.auth-choice-head h1{margin:0;color:#000a14;font-family:"Roboto Flex",var(--font-display);font-variation-settings:"GRAD" -200,"wdth" 25,"opsz" 144;font-size:56px;font-weight:950;line-height:.86;text-transform:uppercase}.auth-choice-head p,.auth-email-head p{margin:10px 0 0;color:#697078;font-size:12px;font-weight:650}.auth-provider-stack{display:grid;gap:9px}.auth-provider-native{min-height:48px;display:grid;place-items:center;overflow:hidden;border-radius:9px}.auth-provider-native>div,.auth-provider-native iframe{width:100%!important;max-width:100%!important}#auth-google-provider:empty{display:none}.telegram-native{position:relative;min-height:48px;border:1px solid #000a14;background:#000a14;color:#fff;padding:0 13px}.telegram-native>span{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:820;pointer-events:none}.telegram-native>span:before{content:"\2197";width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#2aabee;color:#fff;font-size:13px}.telegram-native>div{position:absolute;z-index:2;inset:0;overflow:hidden;opacity:.001}.auth-provider-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.auth-provider-pair button{position:relative;min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #000a14;border-radius:9px;background:#000a14;color:#fff;padding:0 10px;font-size:11px;font-weight:820;cursor:pointer}.auth-provider-pair button:disabled{border-color:#e3e6e7;background:#f3f5f5;color:#8b9297;cursor:not-allowed}.auth-provider-pair button small{position:absolute;top:3px;right:5px;font-size:7px;text-transform:uppercase}.provider-yandex,.provider-qr{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#fff;color:#e32636;font-style:normal;font-size:13px;font-weight:950}.provider-qr{color:#000a14}.auth-choice-card .auth-email-entry{width:100%;min-height:48px;display:grid;grid-template-columns:25px minmax(0,1fr) 17px;align-items:center;gap:8px;border:1px solid #000a14;border-radius:9px;background:#000a14;color:#fff;padding:0 13px;font-size:12px;font-weight:820;cursor:pointer}.auth-choice-card .auth-email-entry svg{margin-left:auto}.auth-choice-switch{display:flex;justify-content:center;gap:6px;margin-top:14px;color:#7a8288;font-size:10px;font-weight:650}.auth-choice-switch button,.auth-back{border:0;background:transparent;color:#000a14;padding:0;font-size:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.auth-choice-error{margin:10px 0 0;border-radius:8px;background:#fff0f2;color:#c72f42;padding:9px 10px;font-size:10px;font-weight:720}.auth-privacy{margin:12px 0 0;color:#a0a5a9;font-size:8px;line-height:1.35;text-align:center}.auth-back{display:inline-block;margin-bottom:14px;color:#697078;font-size:10px;text-decoration:none}.auth-email-head{margin-bottom:17px;text-align:center}.auth-email-big-icon{width:50px;height:50px;display:grid;place-items:center;margin:0 auto 11px;border-radius:15px;background:linear-gradient(145deg,#dff6ff,#bde9fb);color:#083b55;font-size:22px;font-weight:900}.auth-email-head h2{margin:0;color:#000a14;font-size:22px;line-height:1}.auth-choice-card .auth-email-form{display:flex;order:initial}.auth-choice-card .auth-email-field{min-height:48px;border-radius:10px}.auth-choice-card .auth-email-primary{border-radius:10px}.card-product-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card-product-option{position:relative;min-width:0;display:grid;align-content:start;gap:14px;border:1px solid rgba(0,10,20,.09);border-radius:18px;background:#f7f8f7;padding:14px}.card-product-option.recommended{border-color:#85c800;box-shadow:inset 0 0 0 1px #adff14a6}.product-priority{position:absolute;z-index:3;top:22px;left:22px;min-height:24px;display:inline-flex;align-items:center;border-radius:999px;background:#adff14;color:#071008;padding:0 9px;font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.product-card-art{position:relative;min-height:172px;overflow:hidden;border-radius:15px;background:#adff14;color:#000a14;padding:18px}.product-card-art:before,.product-card-art:after{content:"";position:absolute;border:1px solid rgba(0,10,20,.13);border-radius:50%}.product-card-art:before{width:250px;height:250px;right:-118px;top:-135px}.product-card-art:after{width:190px;height:190px;left:-100px;bottom:-120px}.product-card-art.product-universal{background:#000a14;color:#fff}.product-card-art>span,.product-card-art>b,.product-card-art .card-network-mark{position:absolute;z-index:2}.product-card-art>span{top:18px;right:18px;font-size:9px;font-weight:900;letter-spacing:.1em}.product-card-art>b{left:18px;bottom:18px;font-family:"Roboto Flex",var(--font-display);font-size:21px;font-weight:900}.product-card-art .card-network-mark{right:18px;bottom:15px}.product-option-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.product-option-head div{min-width:0}.product-option-head h3{margin:0;color:#000a14;font-size:19px;line-height:1}.product-option-head p{margin:7px 0 0;color:#757d84;font-size:10px;line-height:1.35}.product-option-head>strong{flex:0 0 auto;color:#000a14;font-size:20px;line-height:1}.product-feature-row{display:flex;flex-wrap:wrap;gap:6px}.product-feature-row span{min-height:25px;display:inline-flex;align-items:center;border-radius:999px;background:#eceeed;color:#515960;padding:0 8px;font-size:8px;font-weight:750}.product-select-button,.issue-another-card{width:100%;min-height:48px;display:grid;grid-template-columns:1fr 20px;align-items:center;border:0;border-radius:10px;background:#000a14;color:#fff;padding:0 13px;font-size:12px;font-weight:820;cursor:pointer}.card-product-option.recommended .product-select-button{background:#adff14;color:#071008}.product-select-button span,.issue-another-card span{justify-self:center;padding-left:20px}.flow-back-button{justify-self:start;border:0;background:transparent;color:#697078;padding:0;font-size:10px;font-weight:760;cursor:pointer}.mini-premium-card.product-universal{border-color:#000a14;background:#000a14;color:#fff}.mini-premium-card.product-universal small{color:#ffffff94}.card-quick-row{display:flex;align-items:center;justify-content:center;gap:8px}.active-card-product{min-height:34px;display:inline-flex;align-items:center;border-radius:999px;background:#adff1429;color:#adff14;padding:0 11px;font-size:9px;font-weight:860;letter-spacing:.05em;text-transform:uppercase}.no-card-hero{width:min(430px,92vw);display:grid;justify-items:center;gap:9px;color:#fff}.no-card-art{position:relative;width:100%;aspect-ratio:1.586;overflow:hidden;border:1px solid rgba(255,255,255,.45);border-radius:22px;background:linear-gradient(135deg,#adff14,#8fd30d);color:#000a14;padding:20px;box-shadow:0 24px 60px #000a1459}.no-card-art:before{content:"";position:absolute;width:320px;height:320px;right:-165px;top:-185px;border:1px solid rgba(0,10,20,.16);border-radius:50%}.no-card-art span{position:absolute;top:20px;right:20px;font-size:9px;font-weight:900;letter-spacing:.1em}.no-card-art b{position:absolute;left:20px;bottom:20px;font-family:"Roboto Flex",var(--font-display);font-size:28px}.no-card-hero>strong{margin-top:3px;font-size:17px}.no-card-hero>p{margin:0;color:#ffffff9e;font-size:11px;font-weight:650}.pay-main-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.card-manage-panel{display:grid;gap:13px}.card-manage-status{min-height:74px;display:grid;grid-template-columns:12px minmax(0,1fr) 48px;align-items:center;gap:11px;border-radius:13px;background:#000a14;color:#fff;padding:14px}.status-dot{width:9px;height:9px;border-radius:50%;background:#f9c74f;box-shadow:0 0 0 4px #f9c74f1f}.status-dot.active{background:#adff14;box-shadow:0 0 0 4px #adff141f}.card-manage-status div{display:grid;gap:3px}.card-manage-status b{font-size:14px}.card-manage-status small{color:#ffffff94;font-size:10px}.card-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card-manage-grid button{min-height:70px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;border:1px solid rgba(0,10,20,.09);border-radius:11px;background:#f4f6f5;color:#000a14;padding:10px;text-align:left;cursor:pointer}.card-manage-grid button>span:first-child{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#adff14;font-size:20px;font-weight:800}.card-manage-grid button div{min-width:0;display:grid;gap:3px}.card-manage-grid button b{font-size:12px}.card-manage-grid button small{overflow:hidden;color:#778087;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.card-manage-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.card-manage-specs span{display:grid;gap:3px;border:1px solid rgba(0,10,20,.08);border-radius:10px;padding:10px}.card-manage-specs small{color:#838b91;font-size:8px;font-weight:730}.card-manage-specs b{color:#000a14;font-size:11px}.card-manage-note{margin:0;color:#5d6870;font-size:10px;text-align:center}.profile-placeholder{display:grid;justify-items:center;gap:8px;text-align:center}.profile-placeholder>span{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#000a14;color:#fff;font-size:20px;font-weight:900}.profile-placeholder div{display:grid;gap:2px}.profile-placeholder small{color:#7c858b;font-size:10px}.profile-placeholder p{margin:8px 0 0;border-radius:10px;background:#f3f5f4;color:#6e777e;padding:12px;font-size:10px}.miniapp-bottom-nav{display:none}html[data-app-theme=dark],html[data-app-theme=dark] body,html[data-app-theme=dark] #root,html[data-app-theme=dark] body:has(.pay-home){background:#111513}html[data-app-theme=dark] body:has(.pay-home){background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px}html[data-app-theme=dark] .pay-home-topbar{color:#fff}html[data-app-theme=dark] .pay-home-topbar .brand-mark img{filter:brightness(0) invert(1)}html[data-app-theme=dark] .services-home{border-color:#ffffff14;background:#191e1b;color:#fff}html[data-app-theme=dark] .services-home h2,html[data-app-theme=dark] .service-tile b{color:#fff}html[data-app-theme=dark] .service-tile,html[data-app-theme=dark] .service-search,html[data-app-theme=dark] .service-filter-row button{border-color:#ffffff17;background:#222825;color:#ffffffb8}html[data-app-theme=dark] .user-avatar-button i{border-color:#111513}@media(max-width:720px){.user-avatar-button{width:40px;height:40px}.user-dropdown{position:fixed;top:64px;right:10px;left:10px;width:auto}.auth-provider-page{padding:12px}.auth-choice-card{max-height:calc(100dvh - 24px);border-radius:16px;padding:34px 18px 18px}.auth-choice-head h1{font-size:clamp(45px,14vw,56px)}.card-product-picker{grid-template-columns:1fr}.product-card-art{min-height:155px}.pay-main-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.pay-main-buttons button{min-height:53px;display:grid;justify-items:center;align-content:center;gap:4px;padding:7px 5px;font-size:9px}.pay-main-buttons .topup-plus-icon{width:18px;height:18px;font-size:15px}.miniapp-bottom-nav{position:fixed;z-index:90;right:10px;bottom:max(10px,env(safe-area-inset-bottom));left:10px;min-height:62px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(0,10,20,.09);border-radius:17px;background:#fffffff0;padding:6px;box-shadow:0 20px 55px -24px #000a148c;backdrop-filter:blur(18px)}.miniapp-bottom-nav button{display:grid;justify-items:center;align-content:center;gap:3px;border:0;border-radius:11px;background:transparent;color:#606970;font-size:8px;font-weight:760}.miniapp-bottom-nav button:first-child{background:#000a14;color:#fff}.pay-home{padding-bottom:95px}html[data-app-theme=dark] .miniapp-bottom-nav{border-color:#ffffff17;background:#191e1bf0}html[data-app-theme=dark] .miniapp-bottom-nav button{color:#ffffffad}html[data-app-theme=dark] .miniapp-bottom-nav button:first-child{background:#adff14;color:#071008}}
/* Alpina Pay v4 — unified product UI */
:root {
  --ap-bg: #f2f3f5;
  --ap-surface: #ffffff;
  --ap-surface-2: #f7f8fa;
  --ap-ink: #15181d;
  --ap-muted: #747b86;
  --ap-line: #e4e7eb;
  --ap-blue: #2f6feb;
  --ap-blue-hover: #245fd1;
  --ap-blue-soft: #edf3ff;
  --ap-green: #1fa56b;
  --ap-danger: #d94a58;
  --ap-shadow: 0 24px 80px rgba(20, 26, 35, 0.1);
  --ap-shadow-soft: 0 12px 36px rgba(20, 26, 35, 0.07);
  --ap-radius: 22px;
}

html,
body,
#root {
  min-width: 320px;
  min-height: 100%;
}

html {
  background: var(--ap-bg);
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 4%, rgba(47, 111, 235, 0.08), transparent 28rem),
    radial-gradient(circle at 88% 26%, rgba(117, 128, 146, 0.06), transparent 26rem),
    var(--ap-bg);
  color: var(--ap-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

/* Authentication */
.auth-provider-page {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background:
    linear-gradient(90deg, #12161c 0 42%, transparent 42%),
    var(--ap-bg);
}

.auth-provider-page::before {
  content: "Платите за привычные сервисы без границ";
  position: absolute;
  left: max(44px, calc((100vw - 1180px) / 2));
  bottom: 64px;
  width: min(32vw, 430px);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 66px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.auth-provider-page::after {
  content: "ALPINA PAY";
  position: absolute;
  top: 42px;
  left: max(44px, calc((100vw - 1180px) / 2));
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.auth-choice-card,
.auth-choice-card.is-email {
  position: relative;
  z-index: 2;
  width: min(440px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  margin-left: min(42vw, 520px);
  overflow-y: auto;
  border: 1px solid rgba(21, 24, 29, 0.08);
  border-radius: 28px;
  background: rgba(255,255,255,.97);
  padding: 38px;
  box-shadow: var(--ap-shadow);
}

.auth-choice-head {
  margin: 0 0 28px;
  text-align: left;
}

.auth-wordmark {
  margin: 0 0 28px;
  color: var(--ap-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
}

.auth-choice-head h1 {
  margin: 0;
  color: var(--ap-ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-transform: none;
  font-variation-settings: normal;
}

.auth-choice-head p,
.auth-email-head p {
  margin: 10px 0 0;
  color: var(--ap-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.auth-provider-stack {
  display: grid;
  gap: 10px;
}

.auth-provider-native,
.telegram-native,
.auth-choice-card .auth-email-entry,
.auth-provider-pair button {
  min-height: 54px;
  border-radius: 14px;
}

.auth-provider-native {
  overflow: hidden;
}

.telegram-native {
  border: 0;
  background: #229ed9;
  padding: 0 16px;
}

.telegram-native > span {
  font-size: 14px;
  font-weight: 700;
}

.telegram-native > span::before {
  width: 27px;
  height: 27px;
  background: rgba(255,255,255,.18);
  font-size: 14px;
}

.auth-provider-pair {
  gap: 10px;
}

.auth-provider-pair button {
  border: 1px solid var(--ap-line);
  background: var(--ap-surface-2);
  color: var(--ap-ink);
  font-size: 13px;
  font-weight: 650;
}

.auth-provider-pair button:disabled {
  border-color: var(--ap-line);
  background: #fafafa;
  color: #a2a7ae;
}

.auth-provider-pair button small {
  top: 5px;
  right: 8px;
  font-size: 8px;
  color: #a2a7ae;
}

.provider-yandex,
.provider-qr {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(21,24,29,.06);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

.auth-choice-card .auth-email-entry {
  grid-template-columns: 28px 1fr 18px;
  border: 1px solid var(--ap-line);
  background: #fff;
  color: var(--ap-ink);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 650;
}

.auth-email-entry-icon {
  color: var(--ap-blue);
  font-size: 16px;
}

.auth-choice-switch {
  margin-top: 22px;
  color: var(--ap-muted);
  font-size: 13px;
  font-weight: 500;
}

.auth-choice-switch button,
.auth-back {
  color: var(--ap-blue);
  font-weight: 700;
  text-decoration: none;
}

.auth-privacy {
  margin: 22px 0 0;
  color: #9aa0a8;
  font-size: 10px;
  line-height: 1.5;
}

.auth-back {
  margin-bottom: 26px;
  font-size: 13px;
}

.auth-email-head {
  margin-bottom: 24px;
  text-align: left;
}

.auth-email-big-icon {
  width: 52px;
  height: 52px;
  margin: 0 0 20px;
  border-radius: 16px;
  background: var(--ap-blue-soft);
  color: var(--ap-blue);
}

.auth-email-head h2 {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -.04em;
}

.auth-choice-card .auth-email-form {
  display: grid;
  gap: 12px;
}

.auth-choice-card .auth-email-field {
  min-height: 56px;
  border: 1px solid var(--ap-line);
  border-radius: 14px;
  background: var(--ap-surface-2);
  padding: 0 16px;
}

.auth-choice-card .auth-email-field:focus-within {
  border-color: rgba(47,111,235,.55);
  box-shadow: 0 0 0 4px rgba(47,111,235,.09);
}

.auth-choice-card .auth-email-primary {
  min-height: 54px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--ap-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* Application shell */
body:has(.pay-home) {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% -12%, rgba(47,111,235,.1), transparent 34rem),
    var(--ap-bg);
}

.pay-home {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  display: grid;
  gap: 22px;
  margin: 0 auto;
  padding: 20px 0 96px;
}

.pay-home-topbar {
  position: relative;
  z-index: 60;
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(21,24,29,.07);
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  padding: 8px 10px 8px 18px;
  box-shadow: 0 10px 32px rgba(20,26,35,.05);
  backdrop-filter: blur(20px);
}

.pay-brand .brand-mark {
  gap: 10px;
}

.pay-brand .brand-mark img {
  width: 25px;
  height: 25px;
}

.pay-brand .brand-mark span {
  color: var(--ap-ink);
  font-size: 15px;
  font-weight: 800;
}

.pay-brand::after {
  content: "ALPINA PAY";
  margin-left: 9px;
  color: var(--ap-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.user-avatar-button {
  width: 42px;
  height: 42px;
  border: 0;
  background: #1b2028;
  font-size: 13px;
  box-shadow: none;
}

.user-avatar-button i {
  width: 10px;
  height: 10px;
  border-color: #fff;
  background: #28b77a;
}

.user-dropdown {
  top: calc(100% + 12px);
  width: min(340px, calc(100vw - 32px));
  gap: 8px;
  border: 1px solid var(--ap-line);
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  padding: 10px;
  box-shadow: var(--ap-shadow);
}

.user-dropdown-profile {
  border-radius: 14px;
  background: var(--ap-surface-2);
  padding: 12px;
}

.user-dropdown-profile b { font-size: 14px; }
.user-dropdown-profile small { font-size: 12px; }

.user-dropdown-links button,
.user-logout {
  min-height: 45px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.user-preference-block > span,
.preference-segment button,
.theme-segment button {
  font-size: 11px;
}

.preference-segment {
  border-radius: 10px;
  padding: 3px;
}

.preference-segment button {
  min-height: 30px;
  border-radius: 8px;
}

.pay-card-screen {
  position: relative;
  min-height: 620px;
  display: grid;
  align-content: start;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 78% 12%, rgba(47,111,235,.13), transparent 24rem),
    linear-gradient(145deg, #f1f3f6, #e5e9ee);
  padding: 38px 44px 42px;
  color: var(--ap-ink);
  box-shadow: 0 22px 60px rgba(20,26,35,.09);
}

.pay-card-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image: linear-gradient(rgba(21,24,29,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(21,24,29,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  pointer-events: none;
}

.pay-card-screen::after {
  display: none;
}

.pay-card-screen > * {
  position: relative;
  z-index: 1;
}

.pay-card-screen h1 {
  margin: 0 0 18px;
  color: var(--ap-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0;
}

.pay-card-center {
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0 auto;
}

.premium-card-scene.minimal,
.no-card-hero {
  width: min(480px, 100%);
}

.premium-card.minimal-card,
.no-card-art {
  position: relative;
  aspect-ratio: 1.586;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 25px;
  background: linear-gradient(145deg, #f8f9fa 0%, #d9dde2 54%, #b7bdc5 100%);
  color: #15181d;
  box-shadow: 0 26px 70px rgba(0,0,0,.3);
}

.premium-card.minimal-card::before,
.no-card-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 64%;
  aspect-ratio: 1;
  top: -45%;
  right: -16%;
  border: clamp(22px, 5vw, 46px) solid #15181d;
  border-radius: 50%;
  opacity: 1;
  background: transparent;
  transform: none;
}

.premium-card.minimal-card::after,
.no-card-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 62%;
  aspect-ratio: 1;
  left: -24%;
  bottom: -53%;
  border: clamp(24px, 5vw, 48px) solid #15181d;
  border-radius: 50%;
  opacity: 1;
  background: transparent;
}

.minimal-card .premium-card-top,
.minimal-card .premium-card-bottom,
.minimal-card .card-secret {
  position: relative;
  z-index: 2;
  color: #15181d;
}

.minimal-card .brand-mark img {
  filter: none;
  opacity: 1;
}

.minimal-card .brand-mark span {
  color: #15181d;
}

.minimal-card .card-secret small {
  color: rgba(21,24,29,.52);
}

.minimal-card .card-secret b {
  color: #15181d;
  font-weight: 650;
}

.minimal-card > .card-secret:not(.compact) b {
  font-size: clamp(18px, 3.2vw, 24px);
  letter-spacing: .09em;
}

.minimal-card > .card-secret:not(.compact) {
  width: max-content;
  max-width: 100%;
  border-radius: 11px;
  background: rgba(255,255,255,.64);
  padding: 7px 10px;
  backdrop-filter: blur(8px);
}

.card-network-mark.visa {
  color: #15181d;
}

.no-card-hero {
  gap: 12px;
}

.no-card-art {
  width: 100%;
  padding: 24px;
}

.no-card-art span,
.no-card-art b {
  z-index: 2;
}

.no-card-art span {
  top: 24px;
  right: 24px;
  font-size: 10px;
  letter-spacing: .14em;
}

.no-card-art b {
  left: 24px;
  bottom: 24px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 4vw, 28px);
  letter-spacing: -.04em;
  border-radius: 9px;
  background: rgba(255,255,255,.72);
  padding: 6px 9px;
}

.no-card-hero > strong {
  margin-top: 4px;
  font-size: 19px;
  color: var(--ap-ink);
  font-weight: 700;
}

.no-card-hero > p {
  color: var(--ap-muted);
  font-size: 13px;
}

.card-quick-row {
  gap: 10px;
}

.active-card-product {
  min-height: 36px;
  background: var(--ap-blue-soft);
  color: var(--ap-blue);
  padding: 0 13px;
  font-size: 10px;
  letter-spacing: .04em;
}

.details-trigger,
.details-trigger.primary {
  min-height: 38px;
  border: 1px solid rgba(21,24,29,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--ap-ink);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 650;
}

.details-trigger.primary {
  border-color: transparent;
  background: #fff;
  color: var(--ap-ink);
}

.pay-balance {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 2px;
}

.pay-balance small {
  color: var(--ap-muted);
  font-size: 12px;
  font-weight: 500;
}

.pay-balance strong {
  color: var(--ap-ink);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.05em;
}

.pay-main-buttons {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 2px;
}

.pay-main-buttons:not(:has(button:nth-child(3))) {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.pay-main-buttons button,
.pay-main-buttons button:first-child,
.pay-main-buttons button:last-child {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(21,24,29,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: var(--ap-ink);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 650;
}

.pay-main-buttons button:first-child {
  border-color: var(--ap-blue);
  background: var(--ap-blue);
  color: #fff;
}

.pay-main-buttons button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #fff;
}

.pay-main-buttons button:first-child:hover:not(:disabled) {
  background: var(--ap-blue-hover);
}

.topup-plus-icon,
.pay-main-buttons .topup-plus-icon {
  width: 22px;
  height: 22px;
  border: 0;
  background: rgba(255,255,255,.18);
  font-size: 18px;
}

.services-home {
  border: 1px solid rgba(21,24,29,.07);
  border-radius: 30px;
  background: rgba(255,255,255,.94);
  padding: 34px;
  color: var(--ap-ink);
  box-shadow: var(--ap-shadow-soft);
}

.services-head {
  align-items: end;
  gap: 24px;
}

.services-head h2 {
  margin: 0;
  color: var(--ap-ink);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.services-head p {
  max-width: 560px;
  margin: 8px 0 0;
  color: var(--ap-muted);
  font-size: 13px;
  line-height: 1.5;
}

.service-search {
  min-height: 50px;
  border: 1px solid var(--ap-line);
  border-radius: 15px;
  background: var(--ap-surface-2);
  padding: 0 16px;
}

.service-search:focus-within {
  border-color: rgba(47,111,235,.45);
  box-shadow: 0 0 0 4px rgba(47,111,235,.08);
}

.service-filter-row {
  gap: 7px;
  margin: 22px 0 16px;
}

.service-filter-row button {
  min-height: 36px;
  border: 1px solid var(--ap-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ap-muted);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
}

.service-filter-row button.active {
  border-color: var(--ap-ink);
  background: var(--ap-ink);
  color: #fff;
}

.services-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.service-tile {
  min-height: 76px;
  gap: 12px;
  border: 1px solid var(--ap-line);
  border-radius: 17px;
  background: #fff;
  padding: 13px;
}

.service-tile:hover,
.service-tile.active {
  border-color: rgba(47,111,235,.3);
  background: var(--ap-blue-soft);
  transform: translateY(-1px);
}

.service-tile b {
  color: var(--ap-ink);
  font-size: 13px;
}

.service-tile small {
  color: var(--ap-muted);
  font-size: 10px;
  line-height: 1.35;
}

/* Unified modal / sheet */
.modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(16,20,26,.58);
  padding: 24px;
  backdrop-filter: blur(8px);
}

.modal-card,
.modal-card.modal-wide {
  width: min(520px, 100%);
  max-height: min(820px, calc(100dvh - 48px));
  display: grid;
  align-content: start;
  gap: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 28px;
  background: #fff;
  padding: 24px;
  color: var(--ap-ink);
  box-shadow: 0 30px 100px rgba(0,0,0,.24);
  scrollbar-width: thin;
}

.modal-card.modal-wide {
  width: min(920px, 100%);
}

.modal-head {
  position: relative;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 40px;
  align-items: start;
  gap: 18px;
  margin: 0;
  padding: 2px 0 0;
}

.modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-head h2,
.modal-card .modal-head h2 {
  margin: 0;
  color: var(--ap-ink);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.modal-head p:not(.eyebrow),
.modal-card .modal-head p:not(.eyebrow) {
  max-width: 600px;
  margin: 7px 0 0;
  color: var(--ap-muted);
  font-size: 13px;
  line-height: 1.45;
}

.modal-head .icon-button {
  position: static;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ap-surface-2);
  color: var(--ap-ink);
  padding: 0 0 3px;
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}

.modal-head .icon-button:hover {
  background: #eceef1;
  transform: none;
}

.modal-card .btn,
.modal-card .btn-primary,
.modal-card .issue-pay-button,
.topup-next-button,
.product-select-button,
.issue-another-card {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--ap-blue);
  color: #fff;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}

.modal-card .btn:hover:not(:disabled),
.topup-next-button:hover:not(:disabled),
.product-select-button:hover:not(:disabled) {
  background: var(--ap-blue-hover);
  transform: none;
}

.input-label {
  gap: 8px;
  color: #4f5661;
  font-size: 12px;
  font-weight: 650;
}

.input-label input,
.input-label select,
.promo-row input {
  min-height: 52px;
  border: 1px solid var(--ap-line);
  border-radius: 13px;
  background: var(--ap-surface-2);
  color: var(--ap-ink);
  padding: 0 14px;
  font-size: 14px;
}

.input-label input:focus,
.input-label select:focus,
.promo-row input:focus {
  border-color: rgba(47,111,235,.55);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(47,111,235,.08);
}

.guide-modal {
  display: grid;
  gap: 18px;
}

.guide-modal .selected-service-head {
  border: 1px solid var(--ap-line);
  border-radius: 18px;
  background: var(--ap-surface-2);
  padding: 15px;
}

.guide-modal .selected-service-head h3 {
  font-size: 16px;
}

.guide-modal .selected-service-head small {
  font-size: 12px;
}

.guide-steps,
.guide-step-list {
  gap: 10px;
}

.guide-step,
.guide-step-list li {
  color: #3d434c;
  font-size: 14px;
  line-height: 1.55;
}

.guide-step > span {
  background: var(--ap-blue);
  color: #fff;
}

/* Products */
.card-product-picker {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.card-product-option {
  gap: 16px;
  border: 1px solid var(--ap-line);
  border-radius: 24px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(20,26,35,.04);
}

.card-product-option.recommended {
  border-color: rgba(47,111,235,.55);
  box-shadow: 0 0 0 3px rgba(47,111,235,.08);
}

.product-priority {
  top: 26px;
  left: 26px;
  min-height: 27px;
  border-radius: 999px;
  background: var(--ap-blue);
  color: #fff;
  padding: 0 10px;
  font-size: 9px;
  letter-spacing: .06em;
}

.product-card-art {
  aspect-ratio: 1.586;
  min-height: 0;
  border-radius: 19px;
  background: linear-gradient(145deg,#f6f7f8,#c8cdd3);
  color: var(--ap-ink);
  padding: 20px;
  box-shadow: 0 18px 44px rgba(24,29,37,.13);
}

.product-card-art.product-universal {
  background: linear-gradient(145deg,#232933,#090c11);
  color: #fff;
}

.product-card-art::before,
.product-card-art::after {
  border: 26px solid currentColor;
  opacity: .95;
}

.product-card-art::before {
  width: 190px;
  height: 190px;
  right: -105px;
  top: -115px;
}

.product-card-art::after {
  width: 150px;
  height: 150px;
  left: -88px;
  bottom: -100px;
}

.product-card-art > span {
  top: 20px;
  right: 20px;
  font-size: 9px;
}

.product-card-art > b {
  left: 20px;
  bottom: 20px;
  font-family: var(--font-sans);
  font-size: 19px;
  letter-spacing: -.03em;
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  padding: 5px 8px;
}

.product-card-art.product-universal > b {
  background: rgba(0,0,0,.42);
  color: #fff;
}

.product-option-head {
  gap: 14px;
}

.product-option-head h3 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.product-option-head p {
  margin-top: 7px;
  color: var(--ap-muted);
  font-size: 12px;
  line-height: 1.45;
}

.product-option-head > strong {
  font-size: 20px;
  white-space: nowrap;
}

.product-feature-row {
  gap: 7px;
}

.product-feature-row span {
  min-height: 28px;
  background: var(--ap-surface-2);
  color: #555d67;
  padding: 0 10px;
  font-size: 10px;
}

.product-select-button,
.issue-another-card {
  grid-template-columns: 1fr 20px;
}

.card-product-option.recommended .product-select-button {
  background: var(--ap-blue);
  color: #fff;
}

.card-product-option:not(.recommended) .product-select-button {
  background: var(--ap-ink);
}

.flow-back-button {
  color: var(--ap-blue);
  font-size: 12px;
}

.kyc-form {
  gap: 18px;
}

.kyc-note,
.kyc-summary {
  border: 1px solid var(--ap-line);
  border-radius: 16px;
  background: var(--ap-blue-soft);
  padding: 14px 16px;
}

.kyc-note b { font-size: 14px; }
.kyc-note span { font-size: 12px; }
.kyc-consent { font-size: 12px; }

.mini-premium-card.minimal-card {
  min-height: 190px;
  border-radius: 20px;
  background: linear-gradient(145deg,#f4f5f7,#c3c9d0);
  color: var(--ap-ink);
  box-shadow: var(--ap-shadow-soft);
}

.mini-premium-card.minimal-card .brand-mark img { filter: none; }
.mini-premium-card.minimal-card .brand-mark span,
.mini-premium-card.minimal-card small { color: var(--ap-ink); }
.mini-premium-card.product-universal { background: linear-gradient(145deg,#232933,#090c11); color:#fff; }
.mini-premium-card.product-universal .brand-mark img { filter: brightness(0) invert(1); }
.mini-premium-card.product-universal .brand-mark span,
.mini-premium-card.product-universal small { color:#fff; }

.order-lines {
  border: 1px solid var(--ap-line);
  border-radius: 16px;
  background: var(--ap-surface-2);
  padding: 4px 14px;
}

.order-lines > span {
  min-height: 48px;
  font-size: 13px;
}

.order-lines .total b { font-size: 18px; }

/* Top up */
.topup-simple,
.topup-simple-body {
  gap: 18px;
}

.topup-simple-head {
  display: none;
}

.topup-simple-head p {
  margin: 0;
  color: var(--ap-muted);
  font-size: 13px;
  line-height: 1.5;
}

.topup-amount-shell {
  border: 1px solid var(--ap-line);
  border-radius: 18px;
  background: var(--ap-surface-2);
  padding: 0 18px;
}

.input-label.amount .topup-amount-shell input {
  min-height: 72px;
  border: 0;
  background: transparent;
  color: var(--ap-ink);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 650;
  box-shadow: none;
}

.topup-amount-shell > span {
  color: var(--ap-muted);
  font-size: 24px;
}

.topup-live-result {
  min-height: 70px;
  border: 0;
  border-radius: 17px;
  background: var(--ap-blue-soft);
  padding: 14px 16px;
}

.topup-live-result span {
  color: #64708a;
  font-size: 12px;
}

.topup-live-result strong {
  color: var(--ap-blue);
  font-size: 28px;
}

.topup-next-button {
  width: 100%;
  grid-template-columns: 1fr 20px;
}

.topup-step-toolbar button,
.topup-step-toolbar span {
  color: var(--ap-muted);
  font-size: 12px;
}

.topup-total-card {
  border: 0;
  border-radius: 20px;
  background: var(--ap-blue-soft);
  padding: 18px;
}

.topup-total-main {
  padding-bottom: 16px;
}

.topup-total-main span { color: #64708a; font-size: 12px; }
.topup-total-main strong { color: var(--ap-blue); font-size: 34px; }
.topup-total-rows { border-top-color: rgba(47,111,235,.12); }
.topup-total-rows > div { color: var(--ap-muted); font-size: 12px; }
.topup-total-rows > div b { color: var(--ap-ink); }
.topup-total-rows .topup-card-credit b { color: var(--ap-green); }

.payment-method-heading b { font-size: 15px; }
.payment-method-heading span { font-size: 12px; }

.modal-card .payment-method-grid {
  gap: 8px;
}

.modal-card .payment-method-grid .payment-method-card,
.modal-card .payment-method-grid .payment-method-card:last-child {
  min-height: 66px;
  grid-template-columns: 38px minmax(0,1fr) 20px;
  border: 1px solid var(--ap-line);
  border-radius: 15px;
  background: #fff;
  color: var(--ap-ink);
  padding: 10px 13px;
}

.modal-card .payment-method-grid .payment-method-card:hover:not(:disabled) {
  border-color: rgba(47,111,235,.35);
  background: var(--ap-blue-soft);
}

.payment-method-copy b { font-size: 13px; }
.payment-method-copy small { font-size: 10px; }

/* Card management and details */
.card-manage-panel {
  gap: 14px;
}

.card-manage-status {
  min-height: 78px;
  border-radius: 18px;
  background: #171b21;
  padding: 16px;
}

.card-manage-status b { font-size: 14px; }
.card-manage-status small { font-size: 11px; }

.card-manage-grid {
  gap: 9px;
}

.card-manage-grid button {
  min-height: 78px;
  border: 1px solid var(--ap-line);
  border-radius: 16px;
  background: var(--ap-surface-2);
  padding: 12px;
}

.card-manage-grid button > span:first-child {
  background: var(--ap-blue-soft);
  color: var(--ap-blue);
}

.card-manage-grid button b { font-size: 13px; }
.card-manage-grid button small { font-size: 10px; }

.card-manage-specs {
  gap: 8px;
}

.card-manage-specs span {
  border: 1px solid var(--ap-line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.card-manage-specs small { font-size: 10px; }
.card-manage-specs b { font-size: 12px; }

.details-modal-grid {
  gap: 9px;
}

.details-modal-grid .copy-field {
  min-height: 62px;
  border: 1px solid var(--ap-line);
  border-radius: 15px;
  background: var(--ap-surface-2);
  padding: 11px 14px;
}

.details-modal-grid .copy-field small { font-size: 10px; }
.details-modal-grid .copy-field b { font-size: 14px; }

.history-list {
  gap: 8px;
}

.history-item {
  min-height: 64px;
  border: 1px solid var(--ap-line);
  border-radius: 15px;
  background: var(--ap-surface-2);
  padding: 12px 14px;
}

.history-item b { font-size: 13px; }
.history-item small { font-size: 10px; }
.history-item strong { font-size: 14px; }

.profile-placeholder > span {
  background: var(--ap-blue);
}

.profile-placeholder small,
.profile-placeholder p {
  font-size: 12px;
}

/* Dark mode */
html[data-app-theme="dark"] {
  --ap-bg: #0f1217;
  --ap-surface: #171b21;
  --ap-surface-2: #1d2229;
  --ap-ink: #f4f6f8;
  --ap-muted: #9ca4af;
  --ap-line: rgba(255,255,255,.09);
}

html[data-app-theme="dark"],
html[data-app-theme="dark"] body,
html[data-app-theme="dark"] #root,
html[data-app-theme="dark"] body:has(.pay-home) {
  background: var(--ap-bg);
}

html[data-app-theme="dark"] .pay-home-topbar,
html[data-app-theme="dark"] .services-home,
html[data-app-theme="dark"] .modal-card,
html[data-app-theme="dark"] .user-dropdown {
  border-color: var(--ap-line);
  background: rgba(23,27,33,.97);
  color: var(--ap-ink);
}

html[data-app-theme="dark"] .pay-brand .brand-mark img { filter: brightness(0) invert(1); }
html[data-app-theme="dark"] .pay-brand .brand-mark span,
html[data-app-theme="dark"] .services-head h2,
html[data-app-theme="dark"] .service-tile b,
html[data-app-theme="dark"] .modal-head h2,
html[data-app-theme="dark"] .product-option-head h3,
html[data-app-theme="dark"] .product-option-head > strong,
html[data-app-theme="dark"] .card-manage-specs b { color: var(--ap-ink); }

html[data-app-theme="dark"] .service-search,
html[data-app-theme="dark"] .service-filter-row button,
html[data-app-theme="dark"] .service-tile,
html[data-app-theme="dark"] .card-product-option,
html[data-app-theme="dark"] .card-manage-grid button,
html[data-app-theme="dark"] .card-manage-specs span,
html[data-app-theme="dark"] .details-modal-grid .copy-field,
html[data-app-theme="dark"] .history-item,
html[data-app-theme="dark"] .order-lines,
html[data-app-theme="dark"] .modal-card .payment-method-grid .payment-method-card {
  border-color: var(--ap-line);
  background: var(--ap-surface-2);
  color: var(--ap-ink);
}

html[data-app-theme="dark"] .user-avatar-button i { border-color: #171b21; }
html[data-app-theme="dark"] .modal-head .icon-button { background: var(--ap-surface-2); color: var(--ap-ink); }

/* Tablet and mobile */
@media (max-width: 860px) {
  .auth-provider-page {
    background: var(--ap-bg);
  }
  .auth-provider-page::before,
  .auth-provider-page::after {
    display: none;
  }
  .auth-choice-card,
  .auth-choice-card.is-email {
    margin-left: 0;
  }
  .services-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px) {
  body {
    background: var(--ap-bg);
  }

  .auth-provider-page {
    min-height: 100dvh;
    align-items: start;
    padding: 0;
    background: #fff;
  }

  .auth-choice-card,
  .auth-choice-card.is-email {
    width: 100%;
    min-height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: max(34px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
    box-shadow: none;
  }

  .auth-choice-head {
    margin-bottom: 26px;
  }

  .auth-wordmark {
    margin-bottom: 64px;
  }

  .auth-choice-head h1 {
    max-width: 300px;
    font-size: 32px;
  }

  .auth-choice-head p {
    max-width: 330px;
    font-size: 13px;
  }

  .auth-provider-native,
  .telegram-native,
  .auth-choice-card .auth-email-entry,
  .auth-provider-pair button {
    min-height: 56px;
  }

  .auth-choice-switch {
    margin-top: 24px;
    font-size: 12px;
  }

  .auth-privacy {
    margin-top: auto;
    padding-top: 24px;
    font-size: 9px;
  }

  .pay-home {
    width: 100%;
    gap: 12px;
    padding: 0 0 96px;
  }

  .pay-home-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 62px;
    border-width: 0 0 1px;
    border-radius: 0;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
    box-shadow: none;
  }

  .pay-card-screen {
    min-height: 600px;
    border-radius: 0 0 28px 28px;
    padding: 25px 16px 28px;
    box-shadow: none;
  }

  .pay-card-screen h1 {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .pay-card-center {
    gap: 14px;
  }

  .premium-card-scene.minimal,
  .no-card-hero {
    width: min(100%, 420px);
  }

  .premium-card.minimal-card,
  .no-card-art {
    border-radius: 21px;
  }

  .premium-card.minimal-card {
    padding: 20px;
  }

  .minimal-card .premium-card-top {
    padding: 0;
  }

  .minimal-card .premium-card-bottom {
    padding: 0;
  }

  .pay-balance strong {
    font-size: 38px;
  }

  .pay-main-buttons {
    gap: 8px;
  }

  .pay-main-buttons button,
  .pay-main-buttons button:first-child,
  .pay-main-buttons button:last-child {
    min-height: 62px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    border-radius: 15px;
    padding: 8px 5px;
    font-size: 10px;
    line-height: 1.15;
  }

  .services-home {
    width: auto;
    margin: 0 10px;
    border-radius: 24px;
    padding: 22px 16px;
  }

  .services-head {
    display: grid;
    gap: 18px;
  }

  .services-head h2 {
    font-size: 26px;
  }

  .services-head p {
    font-size: 12px;
  }

  .service-search {
    width: 100%;
    min-height: 48px;
  }

  .service-filter-row {
    margin: 18px -16px 14px;
    overflow-x: auto;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }

  .service-filter-row::-webkit-scrollbar { display: none; }

  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .service-tile {
    min-height: 82px;
    align-items: center;
    border-radius: 15px;
    padding: 12px;
  }

  .service-tile small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .miniapp-bottom-nav {
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    min-height: 64px;
    border: 1px solid rgba(21,24,29,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    padding: 6px;
    box-shadow: 0 18px 50px rgba(20,26,35,.18);
  }

  .miniapp-bottom-nav button {
    gap: 4px;
    border-radius: 14px;
    color: var(--ap-muted);
    font-size: 10px;
  }

  .miniapp-bottom-nav button:first-child {
    background: var(--ap-blue-soft);
    color: var(--ap-blue);
  }

  .user-dropdown {
    position: fixed;
    top: calc(max(62px, env(safe-area-inset-top) + 54px) + 8px);
    right: 10px;
    left: 10px;
    width: auto;
  }

  .modal-backdrop {
    place-items: end center;
    padding: 0;
  }

  .modal-card,
  .modal-card.modal-wide {
    width: 100%;
    max-height: 94dvh;
    gap: 20px;
    border-radius: 26px 26px 0 0;
    padding: 18px 18px max(22px, env(safe-area-inset-bottom));
    box-shadow: 0 -18px 60px rgba(0,0,0,.2);
  }

  .modal-card::before {
    content: "";
    width: 42px;
    height: 4px;
    justify-self: center;
    border-radius: 99px;
    background: #dfe2e6;
    margin: -7px 0 -2px;
  }

  .modal-head {
    grid-template-columns: minmax(0,1fr) 38px;
  }

  .modal-head h2,
  .modal-card .modal-head h2 {
    font-size: 23px;
  }

  .modal-head .icon-button {
    width: 38px;
    height: 38px;
  }

  .card-product-picker {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .card-product-option {
    border-radius: 21px;
    padding: 14px;
  }

  .product-card-art {
    border-radius: 17px;
  }

  .product-option-head h3 { font-size: 18px; }
  .product-option-head p { font-size: 11px; }
  .product-option-head > strong { font-size: 18px; }

  .kyc-grid {
    grid-template-columns: 1fr;
  }

  .kyc-grid .span-2 {
    grid-column: auto;
  }

  .card-manage-grid {
    grid-template-columns: 1fr 1fr;
  }

  .card-manage-grid button {
    min-height: 88px;
    grid-template-columns: 32px minmax(0,1fr);
  }

  .card-manage-specs {
    grid-template-columns: 1fr 1fr;
  }
}
/* Alpina Pay — Alpina VPN design system */
:root {
  --c-bg: #ffffff;
  --c-bg-soft: #f5f5f6;
  --c-bg-softer: #fafafa;
  --c-surface: #ffffff;
  --c-surface-2: #fafafa;
  --c-ink: #08090a;
  --c-ink-soft: #1a1c1f;
  --c-muted: #5a606b;
  --c-muted-2: #8b909a;
  --c-line: rgba(8, 9, 10, 0.09);
  --c-line-soft: rgba(8, 9, 10, 0.05);
  --c-accent: #2563eb;
  --c-accent-2: #eef4ff;
  --c-success: #0a8a4f;
  --c-success-2: #e8f7ef;
  --c-warning: #b8650b;
  --c-warning-2: #fdf3e6;
  --c-danger: #c0303d;
  --c-danger-2: #fbeaec;
  --c-purple: #7c3aed;
  --c-purple-2: #f3edff;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(8, 9, 10, 0.05);
  --shadow-sm: 0 1px 3px rgba(8, 9, 10, 0.06), 0 1px 2px rgba(8, 9, 10, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(8, 9, 10, 0.08);
  --shadow-lg: 0 12px 32px -8px rgba(8, 9, 10, 0.14);
}

html[data-app-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0a0a0b;
  --c-bg-soft: #121215;
  --c-bg-softer: #15151a;
  --c-surface: #0f0f11;
  --c-surface-2: #161618;
  --c-ink: #fafafa;
  --c-ink-soft: #e4e4e7;
  --c-muted: #a1a1aa;
  --c-muted-2: #71717a;
  --c-line: rgba(255, 255, 255, 0.09);
  --c-line-soft: rgba(255, 255, 255, 0.06);
  --c-accent-2: rgba(37, 99, 235, 0.14);
  --c-success-2: rgba(10, 138, 79, 0.14);
  --c-warning-2: rgba(184, 101, 11, 0.14);
  --c-danger-2: rgba(192, 48, 61, 0.14);
  --c-purple-2: rgba(124, 58, 237, 0.14);
  --shadow-xs: none;
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #root { min-width: 320px; min-height: 100%; }
html, body {
  background: var(--c-bg) !important;
  color: var(--c-ink);
}
body,
body:has(.pay-home) {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--c-bg) !important;
  background-image: none !important;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }

/* Auth: same compact VPN card in both themes */
.auth-provider-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--c-bg) !important;
}
.auth-provider-page::before,
.auth-provider-page::after { display: none !important; }
.auth-choice-card,
.auth-choice-card.is-email {
  width: min(384px, 100%);
  max-height: calc(100dvh - 32px);
  margin: 0;
  overflow-y: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: 28px;
  color: var(--c-ink);
  box-shadow: var(--shadow-lg);
}
.auth-choice-head { margin: 0 0 24px; text-align: center; }
.auth-wordmark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: 0;
  letter-spacing: 0;
}
.auth-wordmark::after { content: "A"; font-size: 16px; font-weight: 700; }
.auth-choice-head h1 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.018em;
  text-transform: none;
  font-variation-settings: normal;
}
.auth-choice-head p,
.auth-email-head p {
  margin: 7px 0 0;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.auth-provider-stack { display: grid; gap: 10px; }
.auth-provider-native,
.telegram-native,
.auth-choice-card .auth-email-entry,
.auth-provider-pair button {
  min-height: 46px;
  border-radius: 999px;
}
.auth-provider-native { overflow: hidden; }
.telegram-native {
  border: 0;
  background: #229ed9;
  padding: 0 16px;
}
.telegram-native > span { font-size: 13px; font-weight: 600; }
.telegram-native > span::before { width: 25px; height: 25px; background: rgba(255,255,255,.16); }
.auth-provider-pair { gap: 8px; }
.auth-provider-pair button {
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
}
.auth-provider-pair button:hover:not(:disabled) { background: var(--c-bg-soft); }
.auth-provider-pair button:disabled { border-color: var(--c-line); background: var(--c-bg-soft); color: var(--c-muted-2); }
.provider-yandex, .provider-qr {
  width: 24px; height: 24px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-bg);
}
.auth-choice-card .auth-email-entry {
  grid-template-columns: 26px 1fr 18px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
}
.auth-choice-card .auth-email-entry:hover { background: var(--c-bg-soft); }
.auth-email-entry-icon { color: var(--c-muted); }
.auth-choice-switch { margin-top: 18px; color: var(--c-muted); font-size: 12px; font-weight: 400; }
.auth-choice-switch button, .auth-back { color: var(--c-ink); font-weight: 600; text-decoration: none; }
.auth-privacy { margin: 18px 0 0; color: var(--c-muted-2); font-size: 10px; line-height: 1.5; }
.auth-back { margin-bottom: 22px; color: var(--c-muted); font-size: 12px; }
.auth-email-head { margin-bottom: 22px; text-align: center; }
.auth-email-big-icon {
  width: 42px; height: 42px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--c-bg-soft);
  color: var(--c-ink);
}
.auth-email-head h2 { margin: 0; color: var(--c-ink); font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.auth-choice-card .auth-email-form { display: grid; gap: 10px; }
.auth-choice-card .auth-email-field {
  min-height: 46px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  padding: 0 14px;
}
.auth-choice-card .auth-email-field:focus-within { border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-line-soft); }
.auth-choice-card .auth-email-primary {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: 14px;
  font-weight: 500;
}

/* Cabinet grid from Alpina VPN */
.pay-home {
  width: min(1180px, 100%);
  max-width: 1180px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "greeting greeting"
    "sidebar card"
    "sidebar services";
  gap: 0 32px;
  margin: 0 auto;
  padding: 0 32px 80px;
}
.pay-home-topbar {
  grid-area: header;
  position: sticky;
  z-index: 80;
  top: 0;
  width: calc(100% + 64px);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: -32px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  padding: 0 32px;
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.pay-brand { display: inline-flex; align-items: center; }
.pay-brand::after { display: none; }
.pay-brand .brand-mark { gap: 8px; }
.pay-brand .brand-mark.compact span { display: inline !important; }
.pay-brand .brand-mark img { width: 24px; height: 24px; filter: none; }
html[data-app-theme="dark"] .pay-brand .brand-mark img { filter: brightness(0) invert(1); }
.pay-brand .brand-mark span { color: var(--c-ink); font-size: 14px; font-weight: 700; }
.pay-dashboard-greeting {
  grid-area: greeting;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 34px 0 26px;
}
.pay-greeting-avatar {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-bg-soft);
  color: var(--c-muted);
  font-size: 15px;
  font-weight: 500;
}
.pay-dashboard-greeting div { min-width: 0; }
.pay-dashboard-greeting small {
  display: block;
  margin-bottom: 2px;
  color: var(--c-muted-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pay-dashboard-greeting h1 {
  margin: 0;
  overflow: hidden;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay-side-nav { grid-area: sidebar; min-width: 0; }
.pay-side-nav nav {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pay-side-nav button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-muted);
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.pay-side-nav button:hover { background: var(--c-bg-soft); color: var(--c-ink); }
.pay-side-nav button.active { border-color: var(--c-line); background: var(--c-bg-soft); color: var(--c-ink); }
.pay-side-nav button svg { flex: 0 0 auto; color: var(--c-muted-2); }

/* Card overview panel */
.pay-card-screen {
  grid-area: card;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: 24px;
  color: var(--c-ink);
  box-shadow: none;
}
.pay-card-screen::before,
.pay-card-screen::after { display: none !important; }
.pay-card-screen > * { position: relative; z-index: 1; }
.pay-card-screen > h1 {
  margin: 0 0 20px;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.018em;
}
.pay-card-center {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(210px, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 14px 24px;
  margin: 0;
}
.premium-card-scene.minimal,
.no-card-hero {
  width: 100%;
  max-width: 440px;
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
}
.premium-card-scene.minimal { perspective: none; }
.premium-card-scene.minimal::after { display: none; }
.premium-card.minimal-card,
.no-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(145deg, #191a1e 0%, #08090a 100%) !important;
  color: #fafafa !important;
  padding: 22px;
  box-shadow: 0 14px 30px -12px rgba(8,9,10,.42);
  transform: none !important;
}
.premium-card.minimal-card::before,
.premium-card.minimal-card::after,
.no-card-art::before,
.no-card-art::after { display: none !important; }
.minimal-card .premium-card-top,
.minimal-card .premium-card-bottom,
.minimal-card .card-secret {
  color: #fafafa !important;
  transform: none;
}
.minimal-card .premium-card-top {
  top: 22px; right: 22px; left: 22px;
  align-items: center;
}
.minimal-card .premium-card-bottom {
  right: 22px; bottom: 22px; left: 22px;
  align-items: end;
}
.minimal-card .brand-mark img { filter: brightness(0) invert(1) !important; opacity: 1; }
.minimal-card .brand-mark span { color: #fafafa !important; font-size: 14px; }
.minimal-card > .card-secret:not(.compact) {
  position: absolute;
  top: 45%;
  right: 22px;
  left: 22px;
  width: auto;
  max-width: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}
.minimal-card .card-secret small { margin-bottom: 4px; color: rgba(255,255,255,.44) !important; font-size: 8px; letter-spacing: .12em; }
.minimal-card .card-secret b { color: #fafafa !important; font-weight: 600; }
.minimal-card > .card-secret:not(.compact) b { font-size: clamp(17px, 2vw, 22px); letter-spacing: .09em; }
.minimal-card .card-secret.compact b { font-size: 10px; letter-spacing: .03em; }
.minimal-card .card-network-mark.visa { color: #fafafa !important; }
.no-card-hero { display: grid; justify-items: stretch; gap: 10px; }
.no-card-art { box-shadow: 0 14px 30px -12px rgba(8,9,10,.42); }
.no-card-art span {
  position: absolute; top: 22px; right: 22px;
  color: rgba(255,255,255,.6);
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
}
.no-card-art b {
  position: absolute; left: 22px; bottom: 22px;
  border: 0; border-radius: 0;
  background: transparent;
  color: #fafafa;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 25px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.no-card-hero > strong { margin-top: 4px; color: var(--c-ink); font-size: 15px; font-weight: 600; text-align: left; }
.no-card-hero > p { margin: 0; color: var(--c-muted); font-size: 12px; text-align: left; }
.card-quick-row,
.pay-card-center > .details-trigger.primary { grid-column: 2; align-self: end; }
.card-quick-row { justify-content: flex-start; flex-wrap: wrap; }
.active-card-product {
  min-height: 28px;
  border: 1px solid rgba(10,138,79,.18);
  border-radius: 999px;
  background: var(--c-success-2);
  color: var(--c-success);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.details-trigger,
.details-trigger.primary {
  min-height: 34px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 500;
}
.details-trigger:hover { background: var(--c-bg-soft); }
.pay-balance {
  grid-column: 2;
  display: grid;
  justify-items: start;
  gap: 1px;
  margin: 0;
}
.pay-balance small { color: var(--c-muted); font-size: 12px; font-weight: 400; }
.pay-balance strong {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.pay-main-buttons {
  grid-column: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}
.pay-main-buttons:not(:has(button:nth-child(3))) { grid-template-columns: 1fr; }
.pay-main-buttons button,
.pay-main-buttons button:first-child,
.pay-main-buttons button:last-child {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 500;
}
.pay-main-buttons button:hover:not(:disabled) { transform: none; border-color: var(--c-muted-2); background: var(--c-bg-soft); }
.pay-main-buttons button:first-child { border-color: transparent; background: var(--c-ink); color: var(--c-bg); }
.pay-main-buttons button:first-child:hover:not(:disabled) { background: var(--c-ink-soft); color: var(--c-bg); }
.topup-plus-icon,
.pay-main-buttons .topup-plus-icon { width: 22px; height: 22px; border: 0; background: rgba(127,127,127,.14); font-size: 17px; }
.pay-card-tabs { grid-column: 1; }

/* Services card */
.services-home {
  grid-area: services;
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: 24px;
  color: var(--c-ink);
  box-shadow: none;
}
.services-head { align-items: end; gap: 20px; }
.services-head h2 { margin: 0; color: var(--c-ink); font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.018em; }
.services-head p { max-width: 520px; margin: 6px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.5; }
.service-search {
  min-height: 42px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  padding: 0 13px;
}
.service-search:focus-within { border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-line-soft); }
.service-filter-row { gap: 4px; margin: 18px 0 14px; }
.service-filter-row button {
  min-height: 30px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg-soft);
  color: var(--c-muted);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
}
.service-filter-row button.active { border-color: var(--c-line); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-xs); }
.services-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.service-tile {
  min-height: 68px;
  gap: 10px;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-md);
  background: var(--c-bg-soft);
  padding: 11px;
}
.service-tile:hover, .service-tile.active { border-color: var(--c-line); background: var(--c-bg); transform: none; }
.service-tile b { color: var(--c-ink); font-size: 12px; font-weight: 600; }
.service-tile small { color: var(--c-muted); font-size: 9px; line-height: 1.35; }

/* Header profile, copied proportions from VPN */
.user-avatar-button {
  width: auto;
  min-width: 40px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}
.user-avatar-button > span {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-bg-soft);
}
.user-avatar-button i { right: 3px; bottom: 3px; width: 8px; height: 8px; border: 2px solid var(--c-bg); background: var(--c-success); }
.user-dropdown {
  top: calc(100% + 8px);
  width: 260px;
  gap: 5px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: 6px;
  color: var(--c-ink);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
.user-dropdown-profile { border-radius: var(--radius-md); background: var(--c-bg-soft); padding: 10px; }
.user-dropdown-profile > span { background: var(--c-ink); color: var(--c-bg); }
.user-dropdown-profile b { color: var(--c-ink); font-size: 13px; font-weight: 600; }
.user-dropdown-profile small { color: var(--c-muted); font-size: 11px; }
.user-dropdown-links button, .user-logout {
  min-height: 38px;
  border-radius: var(--radius-sm);
  color: var(--c-ink-soft);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 500;
}
.user-dropdown-links button:hover, .user-logout:hover { background: var(--c-bg-soft); }
.user-preference-block { border-top: 1px solid var(--c-line); padding: 7px 4px 0; }
.user-preference-block > span { color: var(--c-muted); font-size: 10px; font-weight: 500; }
.preference-segment { gap: 1px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg-soft); padding: 2px; }
.preference-segment button, .theme-segment button { min-height: 25px; border-radius: 999px; color: var(--c-muted); padding: 0 7px; font-size: 8px; font-weight: 500; }
.preference-segment button.active { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-xs); }
.user-logout { border-top: 1px solid var(--c-line); color: var(--c-danger); }

/* One modal system */
.modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(8,9,10,.55);
  padding: 16px;
  backdrop-filter: blur(8px);
}
.modal-card,
.modal-card.modal-wide {
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  display: grid;
  align-content: start;
  gap: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: 24px;
  color: var(--c-ink);
  box-shadow: var(--shadow-lg);
}
.modal-card.modal-wide { width: min(900px, 100%); }
.modal-card::before { display: none !important; }
.modal-head {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 32px;
  align-items: start;
  gap: 16px;
  margin: 0;
  padding: 0;
}
.modal-title-row { gap: 8px; }
.modal-head h2, .modal-card .modal-head h2 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.018em;
}
.modal-head p:not(.eyebrow), .modal-card .modal-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.5; }
.modal-head .icon-button {
  position: static;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--c-muted);
  padding: 0 0 2px;
  font-size: 22px;
}
.modal-head .icon-button:hover { background: var(--c-bg-soft); color: var(--c-ink); transform: none; }
.modal-card .btn, .modal-card .btn-primary, .modal-card .issue-pay-button, .topup-next-button, .product-select-button, .issue-another-card {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-bg);
  padding: 0 17px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}
.modal-card .btn:hover:not(:disabled), .topup-next-button:hover:not(:disabled), .product-select-button:hover:not(:disabled) { background: var(--c-ink-soft); color: var(--c-bg); transform: none; }
.input-label { gap: 6px; color: var(--c-muted); font-size: 12px; font-weight: 500; }
.input-label input, .input-label select, .promo-row input {
  min-height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 0 13px;
  font-size: 13px;
}
.input-label input:focus, .input-label select:focus, .promo-row input:focus { border-color: var(--c-ink); outline: 0; box-shadow: 0 0 0 3px var(--c-line-soft); }
.guide-modal { gap: 14px; }
.guide-modal .selected-service-head { border: 1px solid var(--c-line-soft); border-radius: var(--radius-md); background: var(--c-bg-soft); padding: 13px; }
.guide-modal .selected-service-head h3 { color: var(--c-ink); font-size: 14px; }
.guide-modal .selected-service-head small { color: var(--c-muted); font-size: 11px; }
.guide-steps { gap: 7px; }
.guide-step { border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-bg); padding: 11px; color: var(--c-ink-soft); font-size: 12px; line-height: 1.5; }
.guide-step > span { background: var(--c-ink); color: var(--c-bg); }

/* Card products, clean and readable */
.card-product-picker { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.card-product-option {
  gap: 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: 12px;
  box-shadow: none;
}
.card-product-option.recommended { border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink); }
.product-priority { top: 20px; left: 20px; min-height: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; padding: 0 9px; font-size: 8px; }
.product-card-art {
  aspect-ratio: 1.586;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: linear-gradient(145deg,#191a1e,#08090a) !important;
  color: #fafafa !important;
  padding: 18px;
  box-shadow: none;
}
.product-card-art.product-universal { background: linear-gradient(145deg,#f4f4f5,#d4d4d8) !important; color:#08090a !important; border-color: rgba(8,9,10,.08); }
.product-card-art::before, .product-card-art::after { display: none !important; }
.product-card-art > span:not(.card-network-mark) { top: 18px; right: 18px; color: inherit; font-size: 8px; }
.product-card-art .card-network-mark {
  position: absolute !important;
  z-index: 2;
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
}
.product-card-art > b { left: 18px; bottom: 18px; border: 0; border-radius: 0; background: transparent; color: inherit; padding: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.product-card-art.product-universal > b { background: transparent; color: #08090a; }
.product-option-head { gap: 10px; }
.product-option-head h3 { color: var(--c-ink); font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; }
.product-option-head p { margin-top: 5px; color: var(--c-muted); font-size: 10px; line-height: 1.4; }
.product-option-head > strong { color: var(--c-ink); font-size: 17px; }
.product-feature-row { gap: 5px; }
.product-feature-row span { min-height: 24px; border: 1px solid var(--c-line); background: var(--c-bg-soft); color: var(--c-muted); padding: 0 8px; font-size: 8px; font-weight: 500; }
.card-product-option.recommended .product-select-button, .card-product-option:not(.recommended) .product-select-button { background: var(--c-ink); color: var(--c-bg); }
.flow-back-button { color: var(--c-muted); font-size: 11px; font-weight: 500; }
.kyc-note, .kyc-summary { border: 1px solid var(--c-line-soft); border-radius: var(--radius-md); background: var(--c-bg-soft); padding: 13px; }
.kyc-note b { color: var(--c-ink); font-size: 13px; }
.kyc-note span, .kyc-consent { color: var(--c-muted); font-size: 11px; }
.mini-premium-card.minimal-card {
  min-height: 180px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: linear-gradient(145deg,#191a1e,#08090a) !important;
  color: #fafafa !important;
  box-shadow: none;
}
.mini-premium-card.minimal-card::before { display: none; }
.mini-premium-card.minimal-card .brand-mark img { filter: brightness(0) invert(1); }
.mini-premium-card.minimal-card .brand-mark span, .mini-premium-card.minimal-card small { color: #fafafa; }
.mini-premium-card.product-universal { background: linear-gradient(145deg,#f4f4f5,#d4d4d8) !important; color:#08090a !important; border-color:rgba(8,9,10,.08); }
.mini-premium-card.product-universal .brand-mark img { filter:none; }
.mini-premium-card.product-universal .brand-mark span, .mini-premium-card.product-universal small { color:#08090a; }
.order-lines { border: 1px solid var(--c-line-soft); border-radius: var(--radius-md); background: var(--c-bg-soft); padding: 3px 12px; }
.order-lines > span { min-height: 44px; color: var(--c-ink); font-size: 12px; }

/* Topup and management */
.topup-simple, .topup-simple-body { gap: 15px; }
.topup-simple-head { display: none; }
.topup-amount-shell { border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-bg); padding: 0 15px; }
.input-label.amount .topup-amount-shell input { min-height: 64px; border: 0; background: transparent; color: var(--c-ink); font-family: var(--font-display); font-size: 30px; font-weight: 700; box-shadow:none; }
.topup-amount-shell > span { color: var(--c-muted); font-size: 20px; }
.topup-live-result { min-height: 62px; border: 1px solid var(--c-line-soft); border-radius: var(--radius-md); background: var(--c-bg-soft); padding: 12px 14px; }
.topup-live-result span { color: var(--c-muted); font-size: 11px; }
.topup-live-result strong { color: var(--c-ink); font-size: 24px; }
.topup-next-button { width: 100%; }
.topup-step-toolbar button, .topup-step-toolbar span { color: var(--c-muted); font-size: 11px; }
.topup-total-card { border: 1px solid var(--c-line-soft); border-radius: var(--radius-md); background: var(--c-bg-soft); padding: 15px; }
.topup-total-main { padding-bottom: 13px; }
.topup-total-main span { color: var(--c-muted); font-size: 11px; }
.topup-total-main strong { color: var(--c-ink); font-size: 28px; }
.topup-total-rows { border-top-color: var(--c-line); }
.topup-total-rows > div { color: var(--c-muted); font-size: 11px; }
.topup-total-rows > div b { color: var(--c-ink); }
.payment-method-heading b { color: var(--c-ink); font-size: 13px; }
.payment-method-heading span { color: var(--c-muted); font-size: 11px; }
.modal-card .payment-method-grid { gap: 6px; }
.modal-card .payment-method-grid .payment-method-card, .modal-card .payment-method-grid .payment-method-card:last-child {
  min-height: 58px;
  grid-template-columns: 34px minmax(0,1fr) 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 9px 12px;
}
.modal-card .payment-method-grid .payment-method-card:hover:not(:disabled) { border-color: var(--c-muted-2); background: var(--c-bg-soft); }
.payment-method-copy b { color: var(--c-ink); font-size: 12px; }
.payment-method-copy small { color: var(--c-muted); font-size: 9px; }
.card-manage-panel { gap: 11px; }
.card-manage-status { min-height: 68px; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-bg-soft); color: var(--c-ink); padding: 13px; }
.card-manage-status b { color:var(--c-ink); font-size:13px; }
.card-manage-status small { color:var(--c-muted); font-size:10px; }
.status-dot.active { background:var(--c-success); box-shadow:0 0 0 4px var(--c-success-2); }
.card-manage-grid { gap:7px; }
.card-manage-grid button { min-height:68px; border:1px solid var(--c-line); border-radius:var(--radius-md); background:var(--c-bg); color:var(--c-ink); padding:10px; }
.card-manage-grid button:hover { background:var(--c-bg-soft); }
.card-manage-grid button > span:first-child { background:var(--c-bg-soft); color:var(--c-ink); }
.card-manage-grid button b { color:var(--c-ink); font-size:12px; }
.card-manage-grid button small { color:var(--c-muted); font-size:9px; }
.card-manage-specs { gap:6px; }
.card-manage-specs span { border:1px solid var(--c-line-soft); border-radius:var(--radius-md); background:var(--c-bg-soft); padding:10px; }
.card-manage-specs small { color:var(--c-muted); font-size:9px; }
.card-manage-specs b { color:var(--c-ink); font-size:11px; }
.details-modal-grid { gap:7px; }
.details-modal-grid .copy-field { min-height:56px; border:1px solid var(--c-line); border-radius:var(--radius-md); background:var(--c-bg); color:var(--c-ink); padding:10px 12px; }
.details-modal-grid .copy-field:hover { background:var(--c-bg-soft); }
.details-modal-grid .copy-field small { color:var(--c-muted); font-size:9px; }
.details-modal-grid .copy-field b { color:var(--c-ink); font-size:12px; }
.history-list { gap:6px; }
.history-item { min-height:58px; border:1px solid var(--c-line); border-radius:var(--radius-md); background:var(--c-bg); color:var(--c-ink); padding:10px 12px; }
.history-item b { color:var(--c-ink); font-size:12px; }
.history-item small { color:var(--c-muted); font-size:9px; }
.history-item strong { color:var(--c-ink); font-size:13px; }
.profile-placeholder > span { background:var(--c-bg-soft); color:var(--c-ink); border:1px solid var(--c-line); }
.profile-placeholder b { color:var(--c-ink); }
.profile-placeholder small, .profile-placeholder p { color:var(--c-muted); font-size:11px; }
.profile-placeholder p { background:var(--c-bg-soft); }
.miniapp-bottom-nav { display:none; }

@media (max-width: 860px) {
  .pay-home {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "greeting" "card" "services";
    padding: 0 20px 88px;
  }
  .pay-home-topbar { width:calc(100% + 40px); margin-left:-20px; padding:0 20px; }
  .pay-side-nav { display:none; }
  .pay-card-center { grid-template-columns: minmax(280px, 420px) minmax(200px,1fr); }
}

@media (max-width: 640px) {
  .auth-provider-page { align-items:center; padding:16px; background:var(--c-bg) !important; }
  .auth-choice-card, .auth-choice-card.is-email {
    width:100%; min-height:0; max-height:calc(100dvh - 32px);
    border:1px solid var(--c-line); border-radius:var(--radius-lg);
    padding:24px 20px; box-shadow:var(--shadow-lg);
  }
  .auth-wordmark { margin-bottom:18px; }
  .auth-choice-head h1 { font-size:21px; }
  .auth-choice-head p { font-size:12px; }
  .auth-provider-native, .telegram-native, .auth-choice-card .auth-email-entry, .auth-provider-pair button { min-height:46px; }

  .pay-home { width:100%; gap:0; padding:0 16px 88px; }
  .pay-home-topbar {
    width:calc(100% + 32px); min-height:56px; margin-left:-16px;
    padding:max(0px, env(safe-area-inset-top)) 16px 0;
  }
  .pay-dashboard-greeting { padding:24px 0 18px; }
  .pay-greeting-avatar { width:40px; height:40px; }
  .pay-dashboard-greeting h1 { font-size:22px; }
  .pay-card-screen { border-radius:var(--radius-lg); padding:18px; }
  .pay-card-screen > h1 { margin-bottom:16px; font-size:18px; }
  .pay-card-center { display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:12px; }
  .premium-card-scene.minimal, .no-card-hero,
  .card-quick-row, .pay-card-center > .details-trigger.primary,
  .pay-balance, .pay-main-buttons, .pay-card-tabs {
    grid-column:1; grid-row:auto; width:100%; max-width:none;
  }
  .premium-card.minimal-card, .no-card-art { border-radius:16px; padding:18px; }
  .minimal-card .premium-card-top { top:18px; right:18px; left:18px; }
  .minimal-card .premium-card-bottom { right:18px; bottom:18px; left:18px; }
  .minimal-card > .card-secret:not(.compact) { top:44%; right:18px; left:18px; }
  .no-card-art span { top:18px; right:18px; }
  .no-card-art b { left:18px; bottom:18px; }
  .no-card-hero > strong, .no-card-hero > p { text-align:center; }
  .card-quick-row { justify-content:center; }
  .pay-balance { justify-items:center; }
  .pay-balance strong { font-size:36px; }
  .pay-main-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .pay-main-buttons:not(:has(button:nth-child(3))) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pay-main-buttons button, .pay-main-buttons button:first-child, .pay-main-buttons button:last-child {
    min-height:58px; display:grid; justify-items:center; align-content:center; gap:4px;
    border-radius:var(--radius-md); padding:7px 4px; font-size:9px; text-align:center;
  }
  .services-home { width:auto; margin:12px 0 0; border-radius:var(--radius-lg); padding:18px; }
  .services-head { display:grid; gap:14px; }
  .services-head h2 { font-size:18px; }
  .service-search { width:100%; min-height:40px; }
  .service-filter-row { margin:14px -18px 12px; overflow-x:auto; padding:0 18px 3px; scrollbar-width:none; }
  .service-filter-row::-webkit-scrollbar { display:none; }
  .services-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .service-tile { min-height:72px; border-radius:var(--radius-md); padding:10px; }
  .service-tile small { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .miniapp-bottom-nav {
    position:fixed; z-index:90; right:12px; bottom:max(10px,env(safe-area-inset-bottom)); left:12px;
    min-height:60px; display:grid; grid-template-columns:repeat(3,1fr);
    border:1px solid var(--c-line); border-radius:var(--radius-lg);
    background:color-mix(in srgb,var(--c-surface) 94%,transparent);
    padding:5px; box-shadow:var(--shadow-md); backdrop-filter:blur(12px);
  }
  .miniapp-bottom-nav button { display:grid; justify-items:center; align-content:center; gap:3px; border:0; border-radius:var(--radius-md); background:transparent; color:var(--c-muted); font-size:9px; font-weight:500; }
  .miniapp-bottom-nav button:first-child { background:var(--c-bg-soft); color:var(--c-ink); }
  .user-dropdown { position:fixed; top:64px; right:10px; left:10px; width:auto; }

  .modal-backdrop { align-items:center; padding:12px; }
  .modal-card, .modal-card.modal-wide {
    width:100%; max-height:calc(100dvh - 24px); gap:16px;
    border-radius:var(--radius-lg); padding:20px;
    box-shadow:var(--shadow-lg);
  }
  .modal-head { grid-template-columns:minmax(0,1fr) 32px; }
  .modal-head h2, .modal-card .modal-head h2 { font-size:19px; }
  .card-product-picker { grid-template-columns:1fr; gap:10px; }
  .card-product-option { border-radius:var(--radius-lg); padding:11px; }
  .product-card-art { border-radius:13px; }
  .product-option-head h3 { font-size:15px; }
  .product-option-head p { font-size:10px; }
  .product-option-head > strong { font-size:16px; }
  .kyc-grid { grid-template-columns:1fr; }
  .kyc-grid .span-2 { grid-column:auto; }
  .card-manage-grid, .card-manage-specs { grid-template-columns:1fr 1fr; }
}
/*
 * Alpina Pay — Alpine Air
 * A calm, flat fintech interface built around the service catalogue.
 */

:root {
  color-scheme: light;
  --air-bg: #f4f6fa;
  --air-bg-deep: #eef1f7;
  --air-surface: #ffffff;
  --air-surface-muted: #f0f2f7;
  --air-surface-tint: #f7f7fc;
  --air-text: #171a24;
  --air-text-soft: #727b8d;
  --air-text-faint: #9da5b4;
  --air-border: #e2e6ef;
  --air-border-strong: #d7dce7;
  --air-brand: #6674ee;
  --air-brand-hover: #5866df;
  --air-brand-soft: #eceeff;
  --air-brand-text: #4d5bd6;
  --air-sky: #e8f4ff;
  --air-sky-text: #347cbf;
  --air-mint: #e8f7f0;
  --air-mint-text: #24815f;
  --air-peach: #fff0e7;
  --air-peach-text: #b66d44;
  --air-lilac: #f2ebff;
  --air-lilac-text: #7956bb;
  --air-rose: #fcecf1;
  --air-rose-text: #b85a76;
  --air-danger: #d84955;
  --air-danger-soft: #fcebed;
  --air-success: #1b8a65;
  --air-success-soft: #e8f7f0;
  --air-warning: #bd721c;
  --air-warning-soft: #fff2df;
  --air-panel-radius: 26px;
  --air-card-radius: 22px;
  --air-control-radius: 15px;
  --air-shadow-panel: 0 1px 2px rgba(28, 35, 52, 0.025);
  --air-shadow-float: 0 24px 70px -34px rgba(41, 48, 77, 0.34);
  --air-shadow-modal: 0 30px 90px -28px rgba(23, 27, 42, 0.42);

  --c-bg: var(--air-bg);
  --c-bg-soft: var(--air-surface-muted);
  --c-bg-softer: var(--air-surface-tint);
  --c-surface: var(--air-surface);
  --c-surface-2: var(--air-surface-tint);
  --c-ink: var(--air-text);
  --c-ink-soft: #2b3040;
  --c-muted: var(--air-text-soft);
  --c-muted-2: var(--air-text-faint);
  --c-line: var(--air-border);
  --c-line-soft: rgba(35, 42, 62, 0.06);
  --c-accent: var(--air-brand);
  --c-accent-2: var(--air-brand-soft);
  --c-success: var(--air-success);
  --c-success-2: var(--air-success-soft);
  --c-warning: var(--air-warning);
  --c-warning-2: var(--air-warning-soft);
  --c-danger: var(--air-danger);
  --c-danger-2: var(--air-danger-soft);
  --c-purple: var(--air-lilac-text);
  --c-purple-2: var(--air-lilac);
  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --shadow-xs: 0 1px 2px rgba(28, 35, 52, 0.04);
  --shadow-sm: 0 8px 24px -20px rgba(28, 35, 52, 0.28);
  --shadow-md: var(--air-shadow-float);
  --shadow-lg: var(--air-shadow-modal);
}

html[data-app-theme="dark"] {
  color-scheme: dark;
  --air-bg: #0e1117;
  --air-bg-deep: #11151c;
  --air-surface: #171b23;
  --air-surface-muted: #202630;
  --air-surface-tint: #1b2029;
  --air-text: #f3f4f7;
  --air-text-soft: #9da6b5;
  --air-text-faint: #737d8c;
  --air-border: #29313d;
  --air-border-strong: #343d4a;
  --air-brand: #8792ff;
  --air-brand-hover: #98a1ff;
  --air-brand-soft: rgba(135, 146, 255, 0.14);
  --air-brand-text: #a8b0ff;
  --air-sky: rgba(91, 165, 230, 0.13);
  --air-sky-text: #80b9ec;
  --air-mint: rgba(54, 172, 130, 0.13);
  --air-mint-text: #70cfad;
  --air-peach: rgba(224, 137, 91, 0.13);
  --air-peach-text: #e8a17c;
  --air-lilac: rgba(160, 115, 222, 0.14);
  --air-lilac-text: #bd96ed;
  --air-rose: rgba(214, 95, 131, 0.13);
  --air-rose-text: #e98eaa;
  --air-danger: #f07880;
  --air-danger-soft: rgba(240, 120, 128, 0.13);
  --air-success: #63c59f;
  --air-success-soft: rgba(71, 191, 144, 0.13);
  --air-warning: #efad62;
  --air-warning-soft: rgba(239, 173, 98, 0.13);
  --air-shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.015);
  --air-shadow-float: 0 24px 70px -34px rgba(0, 0, 0, 0.72);
  --air-shadow-modal: 0 34px 100px -26px rgba(0, 0, 0, 0.78);
}

html {
  min-height: 100%;
  background: var(--air-bg) !important;
}

html,
body,
#root {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
}

body,
body:has(.pay-home),
body:has(.auth-provider-page) {
  position: relative;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% -4%, rgba(140, 163, 255, 0.18) 0, rgba(140, 163, 255, 0) 31rem),
    radial-gradient(circle at 96% 16%, rgba(135, 204, 230, 0.16) 0, rgba(135, 204, 230, 0) 28rem),
    linear-gradient(180deg, var(--air-bg) 0%, var(--air-bg-deep) 100%) !important;
  background-attachment: fixed !important;
  color: var(--air-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

html[data-app-theme="dark"] body,
html[data-app-theme="dark"] body:has(.pay-home),
html[data-app-theme="dark"] body:has(.auth-provider-page) {
  background:
    radial-gradient(circle at 8% -6%, rgba(113, 126, 238, 0.13) 0, rgba(113, 126, 238, 0) 31rem),
    radial-gradient(circle at 100% 20%, rgba(64, 120, 143, 0.1) 0, rgba(64, 120, 143, 0) 28rem),
    linear-gradient(180deg, #0e1117 0%, #11151c 100%) !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
select {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--air-brand) 25%, transparent) !important;
  outline-offset: 2px;
}

/* ───────────────────────────── App shell ───────────────────────────── */

.pay-home {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "greeting greeting"
    "sidebar services"
    "sidebar card";
  gap: 18px 22px;
  margin: 0 auto;
  padding: 18px 0 76px;
}

.pay-home-topbar {
  grid-area: header;
  position: sticky;
  z-index: 80;
  top: 12px;
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--air-border) 78%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--air-surface) 84%, transparent);
  padding: 8px 10px 8px 17px;
  box-shadow: 0 16px 44px -34px rgba(25, 31, 50, 0.52);
  backdrop-filter: blur(20px) saturate(145%);
}

.pay-brand {
  display: inline-flex;
  align-items: center;
}

.pay-brand::after {
  display: none;
}

.pay-brand .brand-mark {
  width: auto !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.pay-brand .brand-mark.compact span {
  display: inline !important;
}

.pay-brand .brand-mark img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: none !important;
}

html[data-app-theme="dark"] .pay-brand .brand-mark img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.94;
}

.pay-brand .brand-mark span {
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.pay-dashboard-greeting {
  grid-area: greeting;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 4px 4px;
}

.pay-greeting-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 17px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  font-size: 15px;
  font-weight: 700;
}

.pay-dashboard-greeting div {
  min-width: 0;
}

.pay-dashboard-greeting small {
  display: block;
  margin: 0 0 2px;
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pay-dashboard-greeting h1 {
  margin: 0;
  overflow: hidden;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ───────────────────────────── Side navigation ───────────────────────────── */

.pay-side-nav {
  grid-area: sidebar;
  min-width: 0;
}

.pay-side-nav nav {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--air-border);
  border-radius: var(--air-panel-radius);
  background: color-mix(in srgb, var(--air-surface) 94%, transparent);
  padding: 12px;
  box-shadow: var(--air-shadow-panel);
}

.pay-side-nav button {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--air-text-soft);
  padding: 7px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}

.pay-side-nav button svg {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 8px;
  stroke-width: 1.8;
}

.pay-side-nav button:nth-child(2) svg {
  background: var(--air-sky);
  color: var(--air-sky-text);
}

.pay-side-nav button:nth-child(3) svg {
  background: var(--air-mint);
  color: var(--air-mint-text);
}

.pay-side-nav button:nth-child(4) svg {
  background: var(--air-peach);
  color: var(--air-peach-text);
}

.pay-side-nav button:nth-child(5) svg {
  background: var(--air-lilac);
  color: var(--air-lilac-text);
}

.pay-side-nav button:hover {
  background: var(--air-surface-muted);
  color: var(--air-text);
}

.pay-side-nav button.active {
  border: 0;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
}

.pay-side-nav button.active svg {
  background: var(--air-brand);
  color: #fff;
}

/* ───────────────────────────── Services first ───────────────────────────── */

.services-home {
  grid-area: services;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--air-border);
  border-radius: var(--air-panel-radius);
  background: color-mix(in srgb, var(--air-surface) 96%, transparent);
  padding: 27px;
  color: var(--air-text);
  box-shadow: var(--air-shadow-panel);
}

.services-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  align-items: end;
  gap: 22px;
}

.services-head h2 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.services-head p {
  max-width: 590px;
  margin: 7px 0 0;
  color: var(--air-text-soft);
  font-size: 13px;
  line-height: 1.55;
}

.service-search {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--air-control-radius);
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  padding: 0 15px;
}

.service-search svg {
  width: 18px;
  height: 18px;
  color: var(--air-text-faint);
  stroke-width: 1.8;
}

.service-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--air-text);
  font-size: 13px;
}

.service-search input::placeholder {
  color: var(--air-text-faint);
}

.service-search:focus-within {
  border-color: color-mix(in srgb, var(--air-brand) 42%, var(--air-border));
  background: var(--air-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--air-brand) 10%, transparent);
}

.service-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0 16px;
}

.service-filter-row button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
}

.service-filter-row button:hover {
  color: var(--air-text);
  background: var(--air-border);
}

.service-filter-row button.active {
  border: 0;
  background: var(--air-brand);
  color: #fff;
  box-shadow: none;
}

html[data-app-theme="dark"] .service-filter-row button.active {
  border-color: transparent !important;
  background: var(--air-brand) !important;
  color: #10131b !important;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.service-tile {
  min-height: 82px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--air-surface-muted);
  padding: 12px;
  text-align: left;
}

.service-tile:nth-child(4n + 2) {
  background: color-mix(in srgb, var(--air-sky) 65%, var(--air-surface));
}

.service-tile:nth-child(4n + 3) {
  background: color-mix(in srgb, var(--air-mint) 64%, var(--air-surface));
}

.service-tile:nth-child(4n + 4) {
  background: color-mix(in srgb, var(--air-lilac) 64%, var(--air-surface));
}

.service-tile:hover,
.service-tile.active {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
  box-shadow: 0 14px 30px -26px rgba(36, 43, 65, 0.62);
  transform: translateY(-1px);
}

.service-logo,
.service-logo.with-image {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--air-border) 70%, transparent);
  border-radius: 14px;
  background: var(--air-surface);
  box-shadow: 0 4px 16px -13px rgba(29, 35, 53, 0.65);
}

.service-logo img,
.service-logo.with-image img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.service-tile > span:last-child,
.service-tile > div:last-child {
  min-width: 0;
}

.service-tile b {
  display: block;
  overflow: hidden;
  color: var(--air-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-tile small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--air-text-soft);
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ───────────────────────────── Card overview ───────────────────────────── */

.pay-card-screen {
  grid-area: card;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  justify-items: stretch;
  border: 1px solid var(--air-border);
  border-radius: var(--air-panel-radius);
  background: color-mix(in srgb, var(--air-surface) 96%, transparent);
  padding: 27px;
  color: var(--air-text);
  text-align: left;
  box-shadow: var(--air-shadow-panel);
}

.pay-card-screen::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -90px;
  width: 300px;
  height: 300px;
  display: block !important;
  border-radius: 50%;
  background: var(--air-brand-soft);
  opacity: 0.72;
  pointer-events: none;
}

.pay-card-screen::after {
  content: "";
  position: absolute;
  right: 120px;
  bottom: -110px;
  width: 210px;
  height: 210px;
  display: block !important;
  border-radius: 50%;
  background: var(--air-sky);
  opacity: 0.5;
  pointer-events: none;
}

.pay-card-screen > * {
  position: relative;
  z-index: 1;
}

.pay-card-screen > h1 {
  margin: 0 0 20px;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-align: left;
  text-transform: none;
}

.pay-card-center {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(220px, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 13px 28px;
  margin: 0;
}

.premium-card-scene.minimal,
.no-card-hero {
  width: 100%;
  max-width: 420px;
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
}

.premium-card-scene.minimal {
  perspective: none;
}

.premium-card-scene.minimal::after {
  display: none;
}

.premium-card.minimal-card,
.no-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 23px;
  background: linear-gradient(135deg, #7887f4 0%, #6574e7 52%, #5967d7 100%) !important;
  color: #fff !important;
  padding: 23px;
  box-shadow: 0 25px 54px -30px rgba(73, 83, 184, 0.68);
  transform: none !important;
}

.premium-card.minimal-card::before,
.no-card-art::before {
  content: "";
  position: absolute;
  top: auto;
  right: -2%;
  bottom: -1px;
  left: auto;
  width: 86%;
  height: 68%;
  display: block !important;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.075);
  clip-path: polygon(0 100%, 34% 16%, 50% 48%, 66% 27%, 100% 100%);
  mix-blend-mode: normal;
  transform: none;
  pointer-events: none;
}

.premium-card.minimal-card::after,
.no-card-art::after {
  content: "";
  position: absolute;
  top: auto;
  right: 8%;
  bottom: -1px;
  left: auto;
  width: 58%;
  height: 43%;
  display: block !important;
  border: 0 !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(0 100%, 40% 19%, 58% 55%, 72% 38%, 100% 100%);
  opacity: 1;
  mix-blend-mode: normal;
  transform: none;
  pointer-events: none;
}

.minimal-card .premium-card-top,
.minimal-card .premium-card-bottom,
.minimal-card .card-secret {
  color: #fff !important;
  transform: none;
}

.minimal-card .premium-card-top {
  position: absolute !important;
  top: 23px;
  right: 23px;
  left: 23px;
  align-items: center;
}

.minimal-card .premium-card-bottom {
  position: absolute !important;
  right: 23px;
  bottom: 22px;
  left: 23px;
  align-items: end;
}

.minimal-card .brand-mark.compact {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  gap: 7px;
}

.minimal-card .brand-mark img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  filter: brightness(0) invert(1) !important;
  opacity: 0.94;
}

.minimal-card .brand-mark span {
  width: auto !important;
  height: auto !important;
  display: inline !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 650;
}

.minimal-card > .card-secret:not(.compact) {
  position: absolute;
  top: 44%;
  right: 23px;
  left: 23px;
  width: auto;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  backdrop-filter: none;
}

.minimal-card .card-secret small {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.minimal-card .card-secret b {
  color: #fff !important;
  font-weight: 600;
}

.minimal-card .card-secret {
  text-align: left;
}

.minimal-card > .card-secret:not(.compact) b {
  font-family: var(--font-sans);
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: 0.075em;
}

.minimal-card .card-secret.compact b {
  font-size: 10px;
  letter-spacing: 0.025em;
}

.minimal-card .card-network-mark {
  filter: drop-shadow(0 1px 3px rgba(32, 36, 73, 0.13));
}

.minimal-card .card-network-mark.visa {
  color: #fff !important;
}

.minimal-card .card-network-mark.mastercard i:last-child {
  mix-blend-mode: normal;
  opacity: 0.95;
}

.card-quick-row,
.pay-card-center > .details-trigger.primary {
  grid-column: 2;
  align-self: end;
}

.card-quick-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.active-card-product {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--air-success-soft);
  color: var(--air-success);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.active-card-product::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.details-trigger,
.details-trigger.primary {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 0 13px;
  font-size: 11px;
  font-weight: 600;
}

.details-trigger svg {
  width: 15px;
  height: 15px;
  color: var(--air-text-soft);
}

.details-trigger:hover {
  background: var(--air-border);
}

.pay-balance {
  grid-column: 2;
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: 0;
}

.pay-balance small {
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 500;
}

.pay-balance strong {
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.pay-main-buttons {
  grid-column: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 0;
}

.pay-main-buttons:not(:has(button:nth-child(3))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pay-main-buttons button,
.pay-main-buttons button:first-child,
.pay-main-buttons button:last-child {
  min-height: 66px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 9px;
  border: 0;
  border-radius: 17px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 9px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 620;
  line-height: 1.25;
}

.pay-main-buttons button:first-child {
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
}

.pay-main-buttons button:nth-child(2) {
  background: var(--air-sky);
  color: var(--air-sky-text);
}

.pay-main-buttons button:nth-child(3) {
  background: var(--air-lilac);
  color: var(--air-lilac-text);
}

.pay-main-buttons button svg,
.topup-plus-icon,
.pay-main-buttons .topup-plus-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: currentColor;
  padding: 8px;
  font-size: 18px;
  line-height: 1;
  stroke-width: 1.8;
}

.topup-plus-icon,
.pay-main-buttons .topup-plus-icon {
  padding: 0;
  font-size: 0 !important;
}

.topup-plus-icon::before,
.pay-main-buttons .topup-plus-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0 4-4m-4 4-4-4M5 17v3h14v-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0 4-4m-4 4-4-4M5 17v3h14v-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pay-main-buttons button:hover:not(:disabled),
.pay-main-buttons button:first-child:hover:not(:disabled) {
  border: 0;
  background: var(--air-surface);
  color: var(--air-text);
  box-shadow: 0 14px 30px -25px rgba(37, 44, 68, 0.72);
  transform: translateY(-1px);
}

.pay-card-tabs {
  grid-column: 1;
}

/* Empty-card state */

.no-card-hero {
  display: grid;
  justify-items: stretch;
  gap: 9px;
}

.no-card-art {
  box-shadow: 0 25px 54px -30px rgba(73, 83, 184, 0.68);
}

.no-card-art span {
  position: absolute;
  z-index: 2;
  top: 23px;
  right: 23px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.no-card-art b {
  position: absolute;
  z-index: 2;
  left: 23px;
  bottom: 23px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 25px);
  font-weight: 740;
  letter-spacing: -0.025em;
}

.no-card-hero > strong {
  margin: 5px 0 0;
  color: var(--air-text);
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}

.no-card-hero > p {
  margin: 0;
  color: var(--air-text-soft);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

/* ───────────────────────────── User menu ───────────────────────────── */

.user-menu-wrap {
  position: relative;
}

.user-avatar-button {
  width: auto;
  min-width: 44px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 14px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 0 7px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.user-avatar-button:hover {
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
}

.user-avatar-button > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--air-brand);
  color: #fff;
}

.user-avatar-button i {
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--air-surface);
  background: var(--air-success);
}

.user-dropdown {
  top: calc(100% + 10px);
  width: 282px;
  gap: 6px;
  border: 1px solid var(--air-border);
  border-radius: 21px;
  background: color-mix(in srgb, var(--air-surface) 96%, transparent);
  padding: 8px;
  color: var(--air-text);
  box-shadow: var(--air-shadow-float);
  backdrop-filter: blur(18px);
}

.user-dropdown-profile {
  border: 0;
  border-radius: 16px;
  background: var(--air-surface-muted);
  padding: 11px;
}

.user-dropdown-profile > span {
  border-radius: 11px;
  background: var(--air-brand);
  color: #fff;
}

.user-dropdown-profile b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 650;
}

.user-dropdown-profile small {
  color: var(--air-text-soft);
  font-size: 10px;
}

.user-dropdown-links button,
.user-logout {
  min-height: 40px;
  border-radius: 13px;
  color: var(--air-text);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 550;
}

.user-dropdown-links button:hover,
.user-logout:hover {
  background: var(--air-surface-muted);
}

.user-preference-block {
  border-top: 1px solid var(--air-border);
  padding: 9px 4px 0;
}

.user-preference-block > span {
  color: var(--air-text-soft);
  font-size: 9px;
  font-weight: 600;
}

.preference-segment {
  gap: 2px;
  border: 0;
  border-radius: 13px;
  background: var(--air-surface-muted);
  padding: 3px;
}

.preference-segment button,
.theme-segment button {
  min-height: 27px;
  border-radius: 10px;
  color: var(--air-text-soft);
  padding: 0 8px;
  font-size: 8px;
  font-weight: 600;
}

.preference-segment button.active {
  background: var(--air-surface);
  color: var(--air-text);
  box-shadow: var(--shadow-xs);
}

.user-logout {
  border-top: 1px solid var(--air-border);
  color: var(--air-danger);
}

/* ───────────────────────────── Modal system ───────────────────────────── */

.modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(22, 26, 38, 0.48);
  padding: 22px;
  backdrop-filter: blur(14px) saturate(110%);
}

html[data-app-theme="dark"] .modal-backdrop {
  background: rgba(3, 5, 9, 0.67);
}

.modal-card,
.modal-card.modal-wide {
  width: min(540px, 100%);
  max-height: calc(100dvh - 44px);
  display: grid;
  align-content: start;
  gap: 19px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--air-border) 86%, transparent);
  border-radius: 27px;
  background: var(--air-surface);
  padding: 25px;
  color: var(--air-text);
  text-align: left;
  box-shadow: var(--air-shadow-modal);
  scrollbar-width: thin;
  scrollbar-color: var(--air-border-strong) transparent;
}

.modal-card.modal-wide {
  width: min(880px, 100%);
}

.modal-card.modal-compact {
  width: min(500px, 100%);
}

.modal-card::before {
  display: none !important;
}

.modal-head {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: start;
  gap: 16px;
  position: sticky;
  z-index: 12;
  top: -1px;
  margin: 0;
  padding: 0 0 4px;
  background: var(--air-surface);
  text-align: left;
}

.modal-title-row {
  width: 100%;
  gap: 9px;
  justify-content: flex-start;
  text-align: left;
}

.modal-head h2,
.modal-card .modal-head h2 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 740;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-align: left;
  text-transform: none;
}

.modal-head p:not(.eyebrow),
.modal-card .modal-head p:not(.eyebrow) {
  max-width: 510px;
  margin: 6px 0 0;
  color: var(--air-text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.modal-head .icon-button {
  position: static;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  padding: 0 0 2px;
  font-size: 23px;
}

.modal-head .icon-button:hover {
  background: var(--air-border);
  color: var(--air-text);
  transform: none;
}

.modal-card .btn,
.modal-card .btn-primary,
.modal-card .issue-pay-button,
.topup-next-button,
.product-select-button,
.issue-another-card,
.auth-choice-card .auth-email-primary {
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  background: var(--air-brand);
  color: #fff;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 12px 24px -19px rgba(76, 89, 205, 0.82);
}

.modal-card .btn:hover:not(:disabled),
.modal-card .btn-primary:hover:not(:disabled),
.topup-next-button:hover:not(:disabled),
.product-select-button:hover:not(:disabled),
.issue-another-card:hover:not(:disabled),
.auth-choice-card .auth-email-primary:hover:not(:disabled) {
  background: var(--air-brand-hover);
  color: #fff;
  transform: translateY(-1px);
}

.input-label {
  display: grid;
  gap: 7px;
  color: var(--air-text-soft);
  font-size: 11px;
  font-weight: 600;
}

.input-label input,
.input-label select,
.promo-row input {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--air-control-radius);
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 0 14px;
  font-size: 13px;
}

.input-label input:focus,
.input-label select:focus,
.promo-row input:focus {
  border-color: color-mix(in srgb, var(--air-brand) 45%, var(--air-border));
  outline: 0;
  background: var(--air-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--air-brand) 10%, transparent);
}

/* Guide */

.guide-modal {
  gap: 16px;
}

.guide-modal .selected-service-head {
  border: 0;
  border-radius: 18px;
  background: var(--air-surface-muted);
  padding: 14px;
}

.guide-modal .selected-service-head h3 {
  color: var(--air-text);
  font-size: 14px;
}

.guide-modal .selected-service-head small {
  color: var(--air-text-soft);
  font-size: 10px;
}

.guide-steps {
  display: grid;
  gap: 9px;
}

.guide-step {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 17px;
  background: var(--air-surface-muted);
  padding: 11px 13px;
  color: var(--air-text);
  font-size: 12px;
  line-height: 1.5;
}

.guide-step p {
  margin: 0;
  color: var(--air-text) !important;
}

.guide-step > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  font-size: 11px;
  font-weight: 700;
}

.guide-step:nth-child(2) > span {
  background: var(--air-sky);
  color: var(--air-sky-text);
}

.guide-step:nth-child(3) > span {
  background: var(--air-mint);
  color: var(--air-mint-text);
}

.guide-step:nth-child(4) > span {
  background: var(--air-peach);
  color: var(--air-peach-text);
}

/* ───────────────────────────── Card issue flow ───────────────────────────── */

.card-product-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.card-product-option {
  position: relative;
  display: grid;
  gap: 14px;
  border: 1px solid var(--air-border);
  border-radius: 22px;
  background: var(--air-surface);
  padding: 12px;
  box-shadow: none;
}

.card-product-option.recommended {
  border-color: color-mix(in srgb, var(--air-brand) 48%, var(--air-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-brand) 8%, transparent);
}

.product-priority {
  z-index: 4;
  top: 19px;
  left: 19px;
  min-height: 25px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

.product-card-art {
  position: relative;
  aspect-ratio: 1.586;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 17px;
  background: linear-gradient(135deg, #7887f4 0%, #6574e7 54%, #5967d7 100%) !important;
  color: #fff !important;
  padding: 18px;
  box-shadow: none;
}

.product-card-art.product-universal {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #293557 0%, #202a47 58%, #1a223b 100%) !important;
  color: #fff !important;
}

.product-card-art::before {
  content: "";
  position: absolute;
  top: auto;
  right: -2%;
  bottom: -1px;
  left: auto;
  width: 86%;
  height: 67%;
  display: block !important;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.075);
  clip-path: polygon(0 100%, 34% 16%, 50% 48%, 66% 27%, 100% 100%);
  mix-blend-mode: normal;
  transform: none;
}

.product-card-art::after {
  content: "";
  position: absolute;
  top: auto;
  right: 8%;
  bottom: -1px;
  left: auto;
  width: 58%;
  height: 43%;
  display: block !important;
  border: 0 !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(0 100%, 40% 19%, 58% 55%, 72% 38%, 100% 100%);
  opacity: 1;
  mix-blend-mode: normal;
  transform: none;
}

.product-card-art.product-universal::before {
  top: -30%;
  right: -12%;
  bottom: auto;
  left: auto;
  width: 70%;
  height: auto;
  aspect-ratio: 1;
  border-width: 1px;
  border-color: rgba(154, 176, 255, 0.22);
  border-style: solid;
  border-radius: 50%;
  background: transparent;
  clip-path: none;
  box-shadow:
    0 0 0 18px rgba(135, 151, 222, 0.06),
    0 0 0 42px rgba(135, 151, 222, 0.045);
}

.product-card-art.product-universal::after {
  display: none !important;
}

.product-card-art > span:not(.card-network-mark) {
  top: 18px;
  right: 18px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 8px;
  font-weight: 650;
}

.product-card-art .card-network-mark {
  position: absolute !important;
  z-index: 3;
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
}

.product-card-art .card-network-mark.visa {
  color: #fff;
}

.product-card-art > b,
.product-card-art.product-universal > b {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.product-option-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 0 4px;
}

.product-option-head h3 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.product-option-head p {
  margin: 6px 0 0;
  color: var(--air-text-soft);
  font-size: 11px;
  line-height: 1.48;
}

.product-option-head > strong {
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 750;
  white-space: nowrap;
}

.product-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}

.product-feature-row span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  padding: 0 9px;
  font-size: 9px;
  font-weight: 600;
}

.product-select-button {
  margin: 0 4px 4px;
}

.card-product-option.recommended .product-select-button,
.card-product-option:not(.recommended) .product-select-button {
  background: var(--air-brand);
  color: #fff;
}

.card-product-option:not(.recommended) .product-select-button {
  background: var(--air-surface-muted);
  color: var(--air-text);
  box-shadow: none;
}

.card-product-option:not(.recommended) .product-select-button:hover {
  background: var(--air-border);
  color: var(--air-text);
}

.flow-back-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--air-text-soft);
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
}

.kyc-form {
  gap: 16px;
}

.kyc-note,
.kyc-summary {
  border: 0;
  border-radius: 17px;
  background: var(--air-brand-soft);
  padding: 14px;
}

.kyc-note b {
  color: var(--air-text);
  font-size: 13px;
}

.kyc-note span,
.kyc-consent {
  color: var(--air-text-soft);
  font-size: 11px;
  line-height: 1.5;
}

.kyc-consent input {
  accent-color: var(--air-brand);
}

.kyc-summary > span {
  background: var(--air-success-soft);
  color: var(--air-success);
}

.mini-premium-card.minimal-card {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: linear-gradient(135deg, #7887f4 0%, #6574e7 54%, #5967d7 100%) !important;
  color: #fff !important;
  box-shadow: none;
}

.mini-premium-card.minimal-card::before {
  content: "";
  position: absolute;
  top: -55%;
  right: -25%;
  bottom: auto;
  left: auto;
  width: 75%;
  aspect-ratio: 1;
  display: block !important;
  border: 28px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  mix-blend-mode: normal;
  transform: none;
}

.mini-premium-card.minimal-card .brand-mark img {
  filter: brightness(0) invert(1);
}

.mini-premium-card.minimal-card .brand-mark span,
.mini-premium-card.minimal-card small {
  color: #fff;
}

.mini-premium-card.product-universal {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #293557 0%, #202a47 58%, #1a223b 100%) !important;
  color: #fff !important;
}

.mini-premium-card.product-universal .brand-mark img {
  filter: brightness(0) invert(1);
}

.mini-premium-card.product-universal .brand-mark span,
.mini-premium-card.product-universal small {
  color: #fff;
}

.order-lines {
  border: 0;
  border-radius: 17px;
  background: var(--air-surface-muted);
  padding: 3px 13px;
}

.order-lines > span {
  min-height: 46px;
  color: var(--air-text);
  font-size: 12px;
}

/* ───────────────────────────── Top up ───────────────────────────── */

.topup-simple,
.topup-simple-body {
  display: grid;
  gap: 16px;
}

.topup-simple-head {
  display: none;
}

.topup-amount-shell {
  min-height: 76px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--air-surface-muted);
  padding: 0 18px;
}

.topup-amount-shell:focus-within {
  border-color: color-mix(in srgb, var(--air-brand) 45%, var(--air-border));
  background: var(--air-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--air-brand) 10%, transparent);
}

.input-label.amount .topup-amount-shell input {
  min-height: 74px;
  border: 0;
  background: transparent;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 750;
  letter-spacing: -0.04em;
  box-shadow: none;
}

.input-label.amount .topup-amount-shell input:focus-visible {
  outline: 0 !important;
}

.topup-amount-shell > span {
  color: var(--air-text-soft);
  font-size: 19px;
  font-weight: 650;
}

.topup-live-result {
  min-height: 72px;
  display: grid;
  align-items: center;
  border: 0;
  border-radius: 18px;
  background: var(--air-brand-soft);
  padding: 13px 15px;
}

.topup-live-result span {
  color: var(--air-brand-text);
  font-size: 10px;
  font-weight: 600;
}

.topup-live-result strong {
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 740;
  letter-spacing: -0.035em;
}

.topup-next-button {
  width: 100%;
}

.topup-next-button svg,
.topup-next-button .lucide {
  width: 17px;
  height: 17px;
  margin-left: 2px;
}

.topup-step-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topup-step-toolbar button,
.topup-step-toolbar span {
  color: var(--air-text-soft);
  font-size: 11px;
  font-weight: 600;
}

.topup-step-toolbar button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}

.topup-total-card {
  border: 0;
  border-radius: 20px;
  background: var(--air-brand-soft);
  padding: 17px;
}

.topup-total-main {
  padding-bottom: 14px;
}

.topup-total-main span {
  color: var(--air-brand-text);
  font-size: 10px;
  font-weight: 600;
}

.topup-total-main strong {
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.045em;
}

.topup-total-rows {
  border-top-color: color-mix(in srgb, var(--air-brand) 16%, transparent);
}

.topup-total-rows > div {
  color: var(--air-text-soft);
  font-size: 10px;
}

.topup-total-rows > div b {
  color: var(--air-text);
}

.payment-method-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.payment-method-heading b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 650;
}

.payment-method-heading span {
  color: var(--air-text-soft);
  font-size: 10px;
}

.modal-card .payment-method-grid {
  display: grid;
  gap: 8px;
}

.modal-card .payment-method-grid .payment-method-card,
.modal-card .payment-method-grid .payment-method-card:last-child {
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 10px 13px;
}

.modal-card .payment-method-grid .payment-method-card:hover:not(:disabled) {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
  box-shadow: 0 13px 28px -25px rgba(31, 38, 60, 0.72);
  transform: translateY(-1px);
}

.payment-method-card > span:first-child,
.payment-method-brand,
.payment-brand-sbp,
.payment-brand-card,
.payment-brand-tbank,
.payment-brand-sber,
.payment-brand-crypto {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--air-surface);
  box-shadow: 0 6px 18px -15px rgba(23, 29, 47, 0.64);
}

.payment-brand-card {
  background: var(--air-sky) !important;
  color: var(--air-sky-text) !important;
}

.payment-brand-tbank {
  background: #ffdd2d !important;
  color: #111318 !important;
}

.payment-brand-sber {
  background: #e6f7ef !important;
  color: #21a366 !important;
}

.payment-brand-crypto {
  background: #2aabee !important;
  color: #fff !important;
}

.payment-method-card img {
  max-width: 27px;
  max-height: 27px;
  object-fit: contain;
}

.payment-method-copy b {
  display: block;
  color: var(--air-text);
  font-size: 12px;
  font-weight: 650;
}

.payment-method-copy small {
  display: block;
  margin-top: 2px;
  color: var(--air-text-soft);
  font-size: 10px;
  line-height: 1.35;
}

.payment-method-card > svg:last-child {
  width: 17px;
  height: 17px;
  color: var(--air-text-faint);
  stroke-width: 1.8;
}

/* ───────────────────────────── Manage, details, history ───────────────────────────── */

.card-manage-panel {
  display: grid;
  gap: 12px;
}

.card-manage-status {
  min-height: 72px;
  border: 0;
  border-radius: 18px;
  background: var(--air-success-soft);
  color: var(--air-text);
  padding: 14px;
}

.card-manage-status b {
  color: var(--air-text);
  font-size: 13px;
}

.card-manage-status small {
  color: var(--air-text-soft);
  font-size: 10px;
}

.status-dot.active {
  background: var(--air-success);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--air-success) 14%, transparent);
}

.card-manage-grid {
  display: grid;
  gap: 8px;
}

.card-manage-grid button {
  min-height: 70px;
  border: 0;
  border-radius: 17px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 11px;
}

.card-manage-grid button:hover {
  background: var(--air-border);
}

.card-manage-grid button > span:first-child {
  border-radius: 11px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
}

.card-manage-grid button:nth-child(2) > span:first-child {
  background: var(--air-sky);
  color: var(--air-sky-text);
}

.card-manage-grid button:nth-child(3) > span:first-child {
  background: var(--air-peach);
  color: var(--air-peach-text);
}

.card-manage-grid button:nth-child(4) > span:first-child {
  background: var(--air-lilac);
  color: var(--air-lilac-text);
}

.card-manage-grid button b {
  color: var(--air-text);
  font-size: 12px;
}

.card-manage-grid button small {
  color: var(--air-text-soft);
  font-size: 10px;
}

.card-manage-specs {
  display: grid;
  gap: 7px;
}

.card-manage-specs span {
  border: 0;
  border-radius: 16px;
  background: var(--air-surface-muted);
  padding: 11px;
}

.card-manage-specs small {
  color: var(--air-text-soft);
  font-size: 10px;
}

.card-manage-specs b {
  color: var(--air-text);
  font-size: 11px;
}

.card-manage-note {
  color: var(--air-text-soft);
}

.details-modal-grid {
  display: grid;
  gap: 8px;
}

.details-modal-grid .copy-field {
  min-height: 60px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 11px 13px;
}

.details-modal-grid .copy-field:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
}

.details-modal-grid .copy-field small {
  color: var(--air-text-soft);
  font-size: 10px;
}

.details-modal-grid .copy-field b {
  color: var(--air-text);
  font-size: 12px;
}

.history-list {
  display: grid;
  gap: 8px;
}

.history-item {
  min-height: 62px;
  border: 0;
  border-radius: 17px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 11px 13px;
}

.history-item b {
  color: var(--air-text);
  font-size: 12px;
}

.history-item small {
  color: var(--air-text-soft);
  font-size: 10px;
}

.history-item strong {
  color: var(--air-text);
  font-size: 13px;
}

.profile-placeholder > span {
  border: 0;
  border-radius: 18px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
}

.profile-placeholder b {
  color: var(--air-text);
}

.profile-placeholder small,
.profile-placeholder p {
  color: var(--air-text-soft);
  font-size: 11px;
}

.profile-placeholder p {
  border-radius: 16px;
  background: var(--air-surface-muted);
}

/* Secondary cabinet screens */

.panel {
  border-color: var(--air-border) !important;
  background: color-mix(in srgb, var(--air-surface) 96%, transparent) !important;
  color: var(--air-text) !important;
  box-shadow: var(--air-shadow-panel) !important;
}

.panel h1,
.panel h2,
.panel h3,
.panel b,
.panel strong {
  color: var(--air-text);
}

.panel-subtitle {
  color: var(--air-text-soft) !important;
}

.promo-box > span,
.saved-payment-methods > span {
  color: var(--air-text-soft) !important;
}

.promo-box > div {
  border-color: var(--air-border) !important;
  background: var(--air-surface-muted) !important;
  color: var(--air-text-soft) !important;
}

.saved-payment-methods {
  border-top-color: var(--air-border) !important;
}

.saved-payment-methods button {
  border-color: var(--air-border) !important;
  background: var(--air-surface-muted) !important;
  color: var(--air-text) !important;
}

.saved-payment-methods button:hover {
  background: var(--air-border) !important;
}

.stat-grid > div,
.metric,
.tr,
.admin-settings input,
.admin-settings select {
  border-color: var(--air-border) !important;
  background: var(--air-surface-muted) !important;
  color: var(--air-text) !important;
}

.metric small,
.tr small,
.admin-settings label {
  color: var(--air-text-soft) !important;
}

.tr b,
.metric strong {
  color: var(--air-text) !important;
}

.card-loading,
.history-loading {
  border-color: var(--air-border) !important;
  border-radius: 18px;
  background: var(--air-surface-muted) !important;
  color: var(--air-text-soft) !important;
}

.history-loading {
  min-height: 90px;
  padding: 18px;
}

html[data-app-theme="dark"] .provider-qr,
html[data-app-theme="dark"] .service-logo,
html[data-app-theme="dark"] .service-logo.with-image {
  background: #fff !important;
  color: #111318 !important;
}

html[data-app-theme="dark"] .provider-yandex {
  background: #fff !important;
  color: #e32636 !important;
}

/* ───────────────────────────── Authentication ───────────────────────────── */

.auth-provider-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100dvh;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  justify-items: center !important;
  overflow: hidden;
  padding: 32px !important;
  background: transparent !important;
}

.auth-provider-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7%;
  left: 6%;
  width: min(30vw, 400px);
  aspect-ratio: 1;
  display: block !important;
  border-radius: 50%;
  background: var(--air-brand-soft);
  opacity: 0.88;
}

.auth-provider-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: 2%;
  width: min(32vw, 430px);
  aspect-ratio: 1;
  display: block !important;
  border-radius: 50%;
  background: var(--air-sky);
  opacity: 0.72;
}

.auth-choice-card,
.auth-choice-card.is-email {
  position: relative;
  width: min(430px, 100%);
  max-width: 430px;
  max-height: calc(100dvh - 40px);
  margin: 0 auto !important;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--air-border) 80%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--air-surface) 94%, transparent);
  padding: 31px;
  color: var(--air-text);
  box-shadow: var(--air-shadow-float);
  backdrop-filter: blur(20px);
}

.auth-choice-head {
  margin: 0 0 25px;
  text-align: center;
}

.auth-wordmark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: var(--air-brand);
  color: #fff;
  font-size: 0;
  letter-spacing: 0;
  box-shadow: 0 14px 30px -20px rgba(74, 86, 202, 0.72);
}

.auth-wordmark::after {
  content: "A";
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 760;
}

.auth-choice-head h1 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-transform: none;
  font-variation-settings: normal;
}

.auth-choice-head p,
.auth-email-head p {
  margin: 8px 0 0;
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

.auth-provider-stack {
  display: grid;
  gap: 10px;
}

.auth-provider-native,
.telegram-native,
.auth-choice-card .auth-email-entry,
.auth-provider-pair button {
  min-height: 49px;
  border-radius: 15px;
}

.auth-provider-native {
  overflow: hidden;
}

.telegram-native {
  border: 0;
  background: #269ed8;
  padding: 0 16px;
  box-shadow: 0 12px 25px -20px rgba(24, 130, 182, 0.8);
}

.telegram-native > span {
  font-size: 13px;
  font-weight: 650;
}

.telegram-native > span::before {
  width: 27px;
  height: 27px;
  background: rgba(255, 255, 255, 0.16);
}

.auth-provider-pair {
  gap: 9px;
}

.auth-provider-pair button {
  border: 0;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 0 13px;
  font-size: 11px;
  font-weight: 600;
}

.auth-provider-pair button:hover:not(:disabled) {
  background: var(--air-border);
}

.auth-provider-pair button:disabled {
  border: 0;
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
}

.provider-yandex,
.provider-qr {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 9px;
  background: var(--air-surface);
}

.auth-choice-card .auth-email-entry {
  grid-template-columns: 27px minmax(0, 1fr) 18px;
  border: 0;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 0 15px;
  font-size: 12px;
  font-weight: 600;
}

.auth-choice-card .auth-email-entry:hover {
  background: var(--air-border);
}

.auth-email-entry-icon {
  color: var(--air-brand-text);
}

.auth-choice-switch {
  margin-top: 19px;
  color: var(--air-text-soft);
  font-size: 11px;
  font-weight: 400;
}

.auth-choice-switch button,
.auth-back {
  color: var(--air-brand-text);
  font-weight: 650;
  text-decoration: none;
}

.auth-privacy {
  margin: 19px 0 0;
  color: var(--air-text-faint);
  font-size: 10px;
  line-height: 1.55;
}

.auth-back {
  margin-bottom: 22px;
  color: var(--air-text-soft);
  font-size: 11px;
}

.auth-email-head {
  margin-bottom: 23px;
  text-align: center;
}

.auth-email-big-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 17px;
  border-radius: 17px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
}

.auth-email-head h2 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 740;
  letter-spacing: -0.035em;
}

.auth-choice-card .auth-email-form {
  display: grid;
  gap: 11px;
}

.auth-choice-card .auth-email-field {
  min-height: 49px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: var(--air-surface-muted);
  padding: 0 14px;
}

.auth-choice-card .auth-email-field:focus-within {
  border-color: color-mix(in srgb, var(--air-brand) 45%, var(--air-border));
  background: var(--air-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--air-brand) 10%, transparent);
}

.auth-choice-card .auth-email-primary {
  min-height: 49px;
  border: 0;
  border-radius: 15px;
  background: var(--air-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

/* ───────────────────────────── Bottom navigation ───────────────────────────── */

.miniapp-bottom-nav {
  display: none;
}

/* ───────────────────────────── Tablet ───────────────────────────── */

@media (max-width: 980px) {
  .pay-home {
    width: min(100% - 36px, 900px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "greeting"
      "services"
      "card";
    gap: 16px;
    padding-bottom: 96px;
  }

  .pay-side-nav {
    display: none;
  }

  .pay-card-center {
    grid-template-columns: minmax(290px, 390px) minmax(210px, 1fr);
  }

  .tr {
    grid-template-columns: 1fr !important;
    gap: 5px;
    padding: 12px;
  }

  .table-panel {
    overflow-x: auto !important;
  }

  .miniapp-bottom-nav {
    position: fixed;
    z-index: 90;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(390px, calc(100% - 32px));
    min-height: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid color-mix(in srgb, var(--air-border) 80%, transparent);
    border-radius: 21px;
    background: color-mix(in srgb, var(--air-surface) 92%, transparent);
    padding: 6px;
    box-shadow: 0 22px 60px -30px rgba(25, 31, 50, 0.58);
    transform: translateX(-50%);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .miniapp-bottom-nav button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: var(--air-text-soft);
    font-size: 9px;
    font-weight: 600;
  }

  .miniapp-bottom-nav button:first-child {
    background: var(--air-brand-soft);
    color: var(--air-brand-text);
  }

  .miniapp-bottom-nav svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.9;
  }

  html[data-app-theme="dark"] .miniapp-bottom-nav {
    border-color: var(--air-border) !important;
    background: color-mix(in srgb, var(--air-surface) 94%, transparent) !important;
  }

  html[data-app-theme="dark"] .miniapp-bottom-nav button {
    color: var(--air-text-soft) !important;
  }

  html[data-app-theme="dark"] .miniapp-bottom-nav button:first-child {
    background: var(--air-brand) !important;
    color: #fff !important;
  }
}

/* ───────────────────────────── Mobile ───────────────────────────── */

@media (max-width: 680px) {
  body,
  body:has(.pay-home),
  body:has(.auth-provider-page) {
    background:
      radial-gradient(circle at 4% -2%, rgba(140, 163, 255, 0.18) 0, rgba(140, 163, 255, 0) 19rem),
      linear-gradient(180deg, var(--air-bg) 0%, var(--air-bg-deep) 100%) !important;
    background-attachment: scroll !important;
  }

  .pay-home {
    width: 100%;
    gap: 13px;
    padding: 10px 13px 96px;
  }

  .pay-home-topbar {
    top: 8px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    border-radius: 18px;
    padding: max(7px, env(safe-area-inset-top)) 8px 7px 14px;
  }

  .pay-brand .brand-mark img {
    width: 25px;
    height: 25px;
  }

  .pay-brand .brand-mark span {
    font-size: 14px;
  }

  .user-avatar-button {
    min-width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .user-avatar-button > span {
    width: 27px;
    height: 27px;
  }

  .pay-dashboard-greeting {
    gap: 11px;
    padding: 15px 3px 2px;
  }

  .pay-greeting-avatar {
    width: 43px;
    height: 43px;
    border-radius: 15px;
  }

  .pay-dashboard-greeting h1 {
    font-size: 23px;
  }

  .services-home,
  .pay-card-screen {
    border-radius: 22px;
    padding: 19px;
  }

  .services-head {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .services-head h2 {
    font-size: 21px;
  }

  .services-head p {
    font-size: 11px;
  }

  .service-search {
    min-height: 45px;
  }

  .service-filter-row {
    margin: 16px -19px 13px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 0 19px 3px;
    scrollbar-width: none;
  }

  .service-filter-row::-webkit-scrollbar {
    display: none;
  }

  .service-filter-row button {
    flex: 0 0 auto;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .service-tile {
    min-height: 102px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 9px;
    border-radius: 17px;
    padding: 11px;
  }

  .service-logo,
  .service-logo.with-image {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .service-logo img,
  .service-logo.with-image img {
    width: 27px;
    height: 27px;
  }

  .service-tile b {
    font-size: 12px;
  }

  .service-tile small {
    font-size: 9px;
  }

  .pay-card-screen > h1 {
    margin-bottom: 16px;
    font-size: 18px;
  }

  .pay-card-center {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }

  .premium-card-scene.minimal,
  .no-card-hero,
  .card-quick-row,
  .pay-card-center > .details-trigger.primary,
  .pay-balance,
  .pay-main-buttons,
  .pay-card-tabs {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: none;
  }

  .premium-card.minimal-card,
  .no-card-art {
    border-radius: 20px;
    padding: 19px;
  }

  .minimal-card .premium-card-top {
    top: 19px;
    right: 19px;
    left: 19px;
  }

  .minimal-card .premium-card-bottom {
    right: 19px;
    bottom: 18px;
    left: 19px;
  }

  .minimal-card > .card-secret:not(.compact) {
    top: 43%;
    right: 19px;
    left: 19px;
  }

  .minimal-card > .card-secret:not(.compact) b {
    font-size: clamp(15px, 5vw, 20px);
  }

  .no-card-art span {
    top: 19px;
    right: 19px;
  }

  .no-card-art b {
    left: 19px;
    bottom: 19px;
  }

  .no-card-hero > strong,
  .no-card-hero > p {
    text-align: center;
  }

  .card-quick-row {
    justify-content: center;
  }

  .pay-balance {
    justify-items: center;
    margin-top: 2px;
  }

  .pay-balance strong {
    font-size: 36px;
  }

  .pay-main-buttons,
  .pay-main-buttons:not(:has(button:nth-child(3))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .pay-main-buttons:not(:has(button:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pay-main-buttons button,
  .pay-main-buttons button:first-child,
  .pay-main-buttons button:last-child {
    min-height: 68px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border-radius: 16px;
    padding: 8px 4px;
    text-align: center;
    font-size: 9px;
  }

  .pay-main-buttons button svg,
  .topup-plus-icon,
  .pay-main-buttons .topup-plus-icon {
    width: 29px;
    height: 29px;
    border-radius: 10px;
  }

  .miniapp-bottom-nav {
    position: fixed;
    z-index: 90;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    min-height: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid color-mix(in srgb, var(--air-border) 80%, transparent);
    border-radius: 21px;
    background: color-mix(in srgb, var(--air-surface) 92%, transparent);
    padding: 6px;
    box-shadow: 0 22px 60px -30px rgba(25, 31, 50, 0.58);
    transform: none;
    backdrop-filter: blur(18px) saturate(145%);
  }

  .miniapp-bottom-nav button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: var(--air-text-soft);
    font-size: 9px;
    font-weight: 600;
  }

  .miniapp-bottom-nav button:first-child {
    background: var(--air-brand-soft);
    color: var(--air-brand-text);
  }

  html[data-app-theme="dark"] .miniapp-bottom-nav {
    border-color: var(--air-border) !important;
    background: color-mix(in srgb, var(--air-surface) 94%, transparent) !important;
  }

  html[data-app-theme="dark"] .miniapp-bottom-nav button {
    color: var(--air-text-soft) !important;
  }

  html[data-app-theme="dark"] .miniapp-bottom-nav button:first-child {
    background: var(--air-brand) !important;
    color: #fff !important;
  }

  .miniapp-bottom-nav svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.9;
  }

  .user-dropdown {
    position: fixed;
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 10px;
  }

  .modal-card,
  .modal-card.modal-wide,
  .modal-card.modal-compact {
    width: 100%;
    max-height: calc(100dvh - 20px);
    gap: 17px;
    border-radius: 27px;
    padding: 22px 19px max(22px, env(safe-area-inset-bottom));
    box-shadow: var(--air-shadow-modal);
  }

  .modal-card::after {
    content: "";
    position: sticky;
    z-index: 3;
    top: -14px;
    order: -1;
    width: 46px;
    height: 5px;
    display: block;
    margin: -9px auto -6px;
    border-radius: 999px;
    background: var(--air-border-strong);
  }

  .modal-head {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 12px;
  }

  .modal-head h2,
  .modal-card .modal-head h2 {
    font-size: 20px;
  }

  .modal-head .icon-button {
    width: 38px;
    height: 38px;
  }

  .flow-back-button,
  .topup-step-toolbar button {
    min-height: 40px;
    padding: 0 5px;
  }

  .card-product-picker {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .card-product-option {
    border-radius: 20px;
    padding: 10px;
  }

  .product-card-art {
    border-radius: 16px;
  }

  .product-option-head h3 {
    font-size: 16px;
  }

  .product-option-head p {
    font-size: 10px;
  }

  .product-option-head > strong {
    font-size: 16px;
  }

  .kyc-grid {
    grid-template-columns: 1fr;
  }

  .kyc-grid .span-2 {
    grid-column: auto;
  }

  .card-manage-grid,
  .card-manage-specs {
    grid-template-columns: 1fr 1fr;
  }

  .auth-provider-page {
    align-items: center !important;
    padding: 14px !important;
  }

  .auth-provider-page::before {
    top: -12%;
    left: -25%;
    width: 88vw;
  }

  .auth-provider-page::after {
    right: -30%;
    bottom: -18%;
    width: 96vw;
  }

  .auth-choice-card,
  .auth-choice-card.is-email {
    width: 100%;
    min-height: 0;
    max-height: calc(100dvh - 28px);
    border-radius: 24px;
    padding: 26px 20px 21px;
  }

  .auth-wordmark {
    width: 48px;
    height: 48px;
    margin-bottom: 17px;
    border-radius: 16px;
  }

  .auth-choice-head h1 {
    font-size: 24px;
  }

  .auth-choice-head p {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-tile {
    min-height: 74px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
  }

  .card-manage-grid,
  .card-manage-specs {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* Alpina Pay — connected dashboard, wallet and service guides */

html,
body,
#root {
  width: 100%;
  min-width: 0;
}

body:has(.pay-home) {
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--air-brand) 10%, transparent) 0, transparent 28rem),
    radial-gradient(circle at 91% 27%, color-mix(in srgb, #7ed9c2 9%, transparent) 0, transparent 25rem),
    linear-gradient(180deg, var(--air-bg) 0%, var(--air-bg-deep) 100%) !important;
  background-attachment: fixed !important;
}

.pay-home.has-card {
  grid-template-areas:
    "header header"
    "greeting greeting"
    "sidebar services"
    "sidebar card";
}

.pay-home.needs-card {
  grid-template-areas:
    "header header"
    "greeting greeting"
    "sidebar offer"
    "sidebar services";
}

.topbar-account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-wallet-pill {
  min-width: 132px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 5px 6px 5px 13px;
  cursor: pointer;
}

.topbar-wallet-pill:hover {
  background: var(--air-brand-soft);
}

.topbar-wallet-pill span {
  display: grid;
  gap: 1px;
  text-align: left;
}

.topbar-wallet-pill small {
  color: var(--air-text-faint);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-wallet-pill b {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 700;
}

.topbar-wallet-pill > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--air-brand);
  color: #fff;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
}

/* Card offer */

.card-offer-banner {
  grid-area: offer;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) 165px;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: var(--air-panel-radius);
  background: color-mix(in srgb, var(--air-surface) 97%, transparent);
  padding: 26px;
  box-shadow: var(--air-shadow-panel);
}

.offer-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  overflow: hidden;
  border: 1px solid rgba(37, 44, 71, 0.08);
  border-radius: 21px;
  background: #f3f2ee;
  color: #182034;
  box-shadow: 0 22px 46px -32px rgba(36, 43, 74, 0.45);
}

.offer-card-blob {
  position: absolute;
  display: block;
  border-radius: 999px;
}

.offer-card-blob.one {
  top: -31%;
  right: -17%;
  width: 68%;
  height: 92%;
  background: #9ca9f5;
  transform: rotate(-24deg);
}

.offer-card-blob.two {
  right: 19%;
  bottom: -48%;
  width: 76%;
  height: 80%;
  background: #d9defb;
  transform: rotate(16deg);
}

.offer-card-brand,
.offer-card-art > b,
.offer-card-art > small,
.offer-card-art > .card-network-mark {
  position: absolute;
  z-index: 2;
}

.offer-card-brand {
  top: 18px;
  left: 19px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.offer-card-art > b {
  bottom: 20px;
  left: 19px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.offer-card-art > small {
  right: 19px;
  bottom: 21px;
  color: rgba(24, 32, 52, 0.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.offer-card-art > .card-network-mark {
  top: 17px;
  right: 18px;
}

.offer-card-copy {
  min-width: 0;
}

.offer-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border-radius: 999px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.offer-card-copy h2 {
  max-width: 520px;
  margin: 11px 0 8px;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.offer-card-copy p {
  max-width: 540px;
  margin: 0;
  color: var(--air-text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.offer-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.offer-benefits span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  padding: 4px 9px;
  font-size: 9px;
  font-weight: 650;
}

.offer-card-action {
  display: grid;
  justify-items: stretch;
  align-content: center;
  gap: 4px;
  text-align: right;
}

.offer-card-action > small {
  color: var(--air-text-faint);
  font-size: 9px;
}

.offer-card-action > strong {
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.offer-card-action button {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  border: 0;
  border-radius: 15px;
  background: var(--air-brand);
  color: #fff;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
}

.offer-card-action button:disabled {
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
}

.offer-card-action em {
  margin-top: 4px;
  color: var(--air-text-faint);
  font-size: 8px;
  font-style: normal;
  line-height: 1.4;
}

/* Product cards use the same flat visual language as the issued card. */

.product-card-art {
  border-color: rgba(37, 44, 71, 0.08) !important;
  background: #f3f2ee !important;
  color: #192038 !important;
  box-shadow: 0 18px 38px -30px rgba(36, 43, 74, 0.5);
}

.product-card-art::before,
.product-card-art::after {
  display: block !important;
  border: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  mix-blend-mode: normal !important;
}

.product-card-art::before {
  top: -34% !important;
  right: -18% !important;
  bottom: auto !important;
  width: 69% !important;
  height: 94% !important;
  aspect-ratio: auto !important;
  background: #9ca9f5 !important;
  box-shadow: none !important;
  transform: rotate(-24deg) !important;
}

.product-card-art::after {
  right: 20% !important;
  bottom: -48% !important;
  width: 76% !important;
  height: 81% !important;
  background: #d9defb !important;
  transform: rotate(16deg) !important;
}

.product-card-art > span:not(.card-network-mark),
.product-card-art > b,
.product-card-art .card-network-mark.visa {
  color: #192038 !important;
}

.product-priority {
  border: 1px solid rgba(84, 99, 201, 0.14);
  background: rgba(255, 255, 255, 0.74);
  color: #5262c8;
  backdrop-filter: blur(10px);
}

.product-card-art.product-universal {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #202944 !important;
  color: #fff !important;
}

.product-card-art.product-universal::before {
  top: -42% !important;
  right: -21% !important;
  width: 73% !important;
  height: 111% !important;
  background: #5165d8 !important;
  transform: rotate(-29deg) !important;
}

.product-card-art.product-universal::after {
  display: block !important;
  right: 13% !important;
  bottom: -58% !important;
  width: 86% !important;
  height: 92% !important;
  background: #29375f !important;
  transform: rotate(17deg) !important;
}

.product-card-art.product-universal > span:not(.card-network-mark),
.product-card-art.product-universal > b,
.product-card-art.product-universal .card-network-mark.visa {
  color: #fff !important;
}

/* Service tiles */

.service-tile {
  position: relative;
  padding-bottom: 31px !important;
}

.service-tile-mode {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 10px;
  width: fit-content;
  min-height: 19px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
  padding: 3px 7px;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.service-tile-mode.automatic {
  background: var(--air-success-soft);
  color: var(--air-success);
}

/* Main card — two intentional, flat faces */

.card-section-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.card-section-title small {
  display: block;
  margin-bottom: 3px;
  color: var(--air-text-faint);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.card-section-title h1 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.card-section-title > button {
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  padding: 0 11px;
  font-size: 10px;
  font-weight: 650;
}

.premium-card.minimal-card::before,
.premium-card.minimal-card::after {
  display: none !important;
}

.premium-card.minimal-card {
  isolation: isolate;
  border: 1px solid rgba(25, 32, 52, 0.09);
  background: #f4f3ef !important;
  color: #192038 !important;
  box-shadow: 0 26px 54px -36px rgba(36, 43, 74, 0.58);
}

.premium-card.minimal-card.product-universal {
  border-color: rgba(255, 255, 255, 0.1);
  background: #172034 !important;
  color: #fff !important;
  box-shadow: 0 26px 58px -34px rgba(20, 30, 58, 0.75);
}

.card-flat-shape {
  position: absolute;
  z-index: -1;
  display: block;
  border-radius: 999px;
  pointer-events: none;
}

.product-subscription .card-flat-shape.shape-one {
  top: -37%;
  right: -20%;
  width: 67%;
  height: 103%;
  background: #99a7f1;
  transform: rotate(-25deg);
}

.product-subscription .card-flat-shape.shape-two {
  right: 19%;
  bottom: -53%;
  width: 77%;
  height: 88%;
  background: #dce0fa;
  transform: rotate(14deg);
}

.product-universal .card-flat-shape.shape-one {
  top: -42%;
  right: -21%;
  width: 73%;
  height: 111%;
  background: #5165d8;
  transform: rotate(-29deg);
}

.product-universal .card-flat-shape.shape-two {
  right: 13%;
  bottom: -58%;
  width: 86%;
  height: 92%;
  background: #29375f;
  transform: rotate(17deg);
}

.minimal-card .card-product-label {
  position: absolute;
  z-index: 3;
  right: 23px;
  bottom: 24px;
  color: rgba(25, 32, 56, 0.54);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.minimal-card.product-universal .card-product-label {
  color: rgba(255, 255, 255, 0.55);
}

.premium-card.minimal-card.product-subscription .brand-mark img {
  filter: none !important;
}

.premium-card.minimal-card.product-subscription .brand-mark span,
.premium-card.minimal-card.product-subscription .card-secret b {
  color: #192038 !important;
}

.premium-card.minimal-card.product-subscription .card-secret small {
  color: rgba(25, 32, 56, 0.49) !important;
}

.premium-card.minimal-card.product-subscription .card-network-mark.visa {
  color: #192038 !important;
}

.minimal-card .premium-card-bottom {
  right: 112px !important;
}

.minimal-card .premium-card-bottom .card-secret:first-child {
  min-width: 118px;
}

.pay-balance {
  position: relative;
}

.pay-balance > span {
  margin-left: 5px;
  color: var(--air-text-faint);
  font-size: 9px;
  font-weight: 700;
}

.provider-unavailable-note {
  margin: -5px 0 0;
  border-radius: 13px;
  background: var(--air-peach);
  color: var(--air-peach-text);
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.45;
}

/* User dropdown */

.user-dropdown-wallet,
.user-dropdown-kyc {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 15px;
  text-align: left;
}

.user-dropdown-wallet {
  min-height: 54px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 8px 9px 8px 12px;
}

.user-dropdown-wallet span {
  display: grid;
  gap: 1px;
}

.user-dropdown-wallet small {
  color: color-mix(in srgb, var(--air-brand-text) 65%, transparent);
  font-size: 8px;
}

.user-dropdown-wallet b {
  font-size: 14px;
}

.user-dropdown-wallet > i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--air-brand);
  color: #fff;
  font-size: 18px;
  font-style: normal;
}

.user-dropdown-kyc {
  min-height: 52px;
  background: var(--air-peach);
  color: var(--air-peach-text);
  padding: 8px 10px;
}

.user-dropdown-kyc > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--air-peach-text) 12%, transparent);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.user-dropdown-kyc > span {
  min-width: 0;
  display: grid;
  flex: 1;
}

.user-dropdown-kyc b {
  font-size: 10px;
}

.user-dropdown-kyc small {
  color: color-mix(in srgb, var(--air-peach-text) 65%, transparent);
  font-size: 8px;
}

.preference-segment:not(.theme-segment) button {
  font-size: 17px;
  line-height: 1;
}

/* Wallet */

.wallet-modal {
  display: grid;
  gap: 16px;
}

.wallet-balance-hero {
  position: relative;
  display: grid;
  gap: 2px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 21px;
}

.wallet-balance-hero::after {
  content: "";
  position: absolute;
  top: -37px;
  right: -29px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--air-brand) 14%, transparent);
}

.wallet-balance-hero > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wallet-balance-hero > strong {
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 770;
  letter-spacing: -0.05em;
}

.wallet-balance-hero > small {
  margin-top: 5px;
  color: color-mix(in srgb, var(--air-brand-text) 64%, transparent);
  font-size: 9px;
}

.wallet-amount-field {
  display: grid;
  gap: 7px;
}

.wallet-amount-field > span {
  color: var(--air-text);
  font-size: 11px;
  font-weight: 650;
}

.wallet-amount-field > div {
  min-height: 58px;
  display: flex;
  align-items: center;
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface-muted);
  padding: 0 16px;
}

.wallet-amount-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 730;
}

.wallet-amount-field b {
  color: var(--air-text-soft);
  font-size: 17px;
}

.wallet-amount-field > small {
  color: var(--air-text-faint);
  font-size: 8px;
}

.wallet-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wallet-method-grid > button {
  position: relative;
  min-height: 61px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--air-border);
  border-radius: 15px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 9px;
  text-align: left;
}

.wallet-method-grid > button.active {
  border-color: color-mix(in srgb, var(--air-brand) 42%, var(--air-border));
  background: var(--air-brand-soft);
}

.wallet-method-grid > button.is-disabled {
  opacity: 0.52;
}

.wallet-method-grid .topup-payment-mark {
  width: 35px;
  height: 35px;
  border-radius: 11px;
}

.wallet-method-grid > button > span {
  display: grid;
  gap: 2px;
}

.wallet-method-grid > button b {
  font-size: 10px;
}

.wallet-method-grid > button small {
  color: var(--air-text-faint);
  font-size: 8px;
}

.wallet-method-grid > button > i {
  width: 15px;
  height: 15px;
  border: 1px solid var(--air-border-strong);
  border-radius: 50%;
}

.wallet-method-grid > button.active > i {
  border: 4px solid var(--air-brand);
}

.wallet-quote {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface-muted);
  padding: 5px;
}

.wallet-quote > span {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.wallet-quote small {
  color: var(--air-text-faint);
  font-size: 8px;
}

.wallet-quote b {
  color: var(--air-text);
  font-size: 11px;
}

.wallet-quote .total {
  border-radius: 12px;
  background: var(--air-surface);
}

.wallet-submit,
.service-order-submit {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 16px;
  background: var(--air-brand);
  color: #fff;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
}

.wallet-submit > span,
.service-order-submit > span {
  font-size: 19px;
  font-weight: 400;
}

.wallet-submit svg:last-child,
.service-order-submit svg:last-child {
  margin-left: auto;
}

.wallet-submit:disabled,
.service-order-submit:disabled {
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
}

.wallet-message,
.guide-message {
  margin: 0;
  border-radius: 13px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 10px 12px;
  font-size: 9px;
  line-height: 1.45;
}

.wallet-recent {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--air-border);
  padding-top: 14px;
}

.wallet-recent > div:first-child {
  display: flex;
  justify-content: space-between;
}

.wallet-recent > div:first-child b {
  color: var(--air-text);
  font-size: 11px;
}

.wallet-recent > div:first-child small {
  color: var(--air-text-faint);
  font-size: 8px;
}

.wallet-recent > span {
  min-height: 44px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
  background: var(--air-surface-muted);
  padding: 6px 9px;
}

.wallet-recent > span > i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--air-success-soft);
  color: var(--air-success);
  font-style: normal;
}

.wallet-recent em {
  min-width: 0;
  display: grid;
  font-style: normal;
}

.wallet-recent em b {
  overflow: hidden;
  color: var(--air-text);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-recent em small,
.wallet-recent > p {
  color: var(--air-text-faint);
  font-size: 8px;
}

.wallet-recent strong {
  color: var(--air-text);
  font-size: 10px;
}

/* Profile */

.profile-complete {
  display: grid;
  gap: 12px;
}

.profile-person {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background: var(--air-surface-muted);
  padding: 10px;
}

.profile-person > span,
.profile-person > img {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: var(--air-brand);
  color: #fff;
  object-fit: cover;
  font-size: 14px;
  font-weight: 700;
}

.profile-person > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-person b {
  color: var(--air-text);
  font-size: 13px;
}

.profile-person small {
  overflow: hidden;
  color: var(--air-text-soft);
  font-size: 9px;
  text-overflow: ellipsis;
}

.profile-wallet-row {
  min-height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 18px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 11px 12px 11px 15px;
  text-align: left;
}

.profile-wallet-row span {
  display: grid;
  gap: 1px;
}

.profile-wallet-row small {
  color: color-mix(in srgb, var(--air-brand-text) 63%, transparent);
  font-size: 8px;
}

.profile-wallet-row strong {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 750;
}

.profile-wallet-row i {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--air-brand);
  color: #fff;
  font-size: 20px;
  font-style: normal;
}

.profile-kyc-card {
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  background: var(--air-peach);
  color: var(--air-peach-text);
  padding: 10px;
}

.profile-kyc-card.complete {
  background: var(--air-success-soft);
  color: var(--air-success);
}

.profile-kyc-card > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.profile-kyc-card > span {
  display: grid;
  gap: 2px;
}

.profile-kyc-card b {
  font-size: 11px;
}

.profile-kyc-card small {
  color: color-mix(in srgb, currentColor 67%, transparent);
  font-size: 8px;
  line-height: 1.35;
}

.profile-kyc-card button {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: currentColor;
  padding: 0 9px;
  font-size: 8px;
  font-weight: 700;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.profile-info-grid span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--air-border);
  border-radius: 15px;
  padding: 11px;
}

.profile-info-grid small {
  color: var(--air-text-faint);
  font-size: 8px;
}

.profile-info-grid b {
  color: var(--air-text);
  font-size: 10px;
}

.profile-safety-note {
  margin: 0;
  color: var(--air-text-faint);
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

/* Service guide */

.modal-card.modal-wide:has(.guide-modal-v2) {
  width: min(760px, 100%);
}

.guide-modal-v2 {
  display: grid;
  gap: 14px;
}

.service-guide-head {
  min-height: 61px;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-radius: 18px;
  background: var(--air-surface-muted);
  padding: 8px 10px;
}

.service-guide-head .service-logo {
  width: 47px;
  height: 47px;
  border-radius: 14px;
}

.service-guide-head > span {
  min-width: 0;
}

.service-guide-head small {
  color: var(--air-text-faint);
  font-size: 8px;
}

.service-guide-head h3 {
  margin: 2px 0 0;
  color: var(--air-text);
  font-size: 15px;
  font-weight: 720;
}

.service-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--air-success-soft);
  color: var(--air-success);
  padding: 4px 9px;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.service-status.region_required {
  background: var(--air-peach);
  color: var(--air-peach-text);
}

.service-status.unavailable_ru {
  background: color-mix(in srgb, var(--air-danger) 10%, transparent);
  color: var(--air-danger);
}

.service-region-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border-radius: 15px;
  background: var(--air-peach);
  color: var(--air-peach-text);
  padding: 10px;
}

.service-region-note > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 11px;
  font-weight: 800;
}

.service-region-note p {
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
}

.guide-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 17px;
  background: var(--air-surface-muted);
  padding: 5px;
}

.guide-mode-tabs > button {
  min-height: 55px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--air-text-soft);
  padding: 8px 10px;
  text-align: left;
}

.guide-mode-tabs > button.active {
  background: var(--air-surface);
  color: var(--air-text);
  box-shadow: var(--shadow-xs);
}

.guide-mode-tabs > button > span {
  width: 32px;
  height: 32px;
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 10px;
  background: var(--air-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.guide-mode-tabs .card-network-mark {
  grid-row: 1 / 3;
}

.guide-mode-tabs > button > .card-network-mark {
  min-width: 32px;
  width: 32px;
  height: 32px;
  justify-content: center;
  border: 1px solid var(--air-border-soft);
  background: var(--air-surface);
  color: inherit;
}

.guide-mode-tabs .card-network-mark.mastercard i {
  width: 14px;
  height: 14px;
}

.guide-mode-tabs .card-network-mark.mastercard i:last-child {
  margin-left: -5px;
}

.guide-mode-tabs b {
  align-self: end;
  font-size: 10px;
}

.guide-mode-tabs small {
  align-self: start;
  color: var(--air-text-faint);
  font-size: 8px;
}

.service-order-flow,
.service-card-guide {
  display: grid;
  gap: 12px;
}

.service-wallet-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 11px 12px;
}

.service-wallet-line > span {
  display: grid;
  gap: 2px;
}

.service-wallet-line small {
  color: color-mix(in srgb, var(--air-brand-text) 63%, transparent);
  font-size: 8px;
}

.service-wallet-line strong {
  font-size: 16px;
}

.service-wallet-line button {
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  background: var(--air-brand);
  color: #fff;
  padding: 0 11px;
  font-size: 8px;
  font-weight: 700;
}

.service-order-fields {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 9px;
}

.service-order-fields > label {
  display: grid;
  gap: 6px;
}

.service-order-fields > label > span {
  color: var(--air-text);
  font-size: 9px;
  font-weight: 650;
}

.service-order-fields input {
  width: 100%;
  height: 47px;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  outline: 0;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 0 12px;
  font-size: 11px;
}

.service-order-fields input:focus {
  border-color: color-mix(in srgb, var(--air-brand) 44%, var(--air-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--air-brand) 10%, transparent);
}

.service-order-fields label > small {
  color: var(--air-text-faint);
  font-size: 7px;
}

.service-usd-input {
  position: relative;
}

.service-usd-input input {
  padding-right: 51px;
}

.service-usd-input b {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--air-text-faint);
  font-size: 8px;
  transform: translateY(-50%);
}

.service-order-quote {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface-muted);
  padding: 5px;
}

.service-order-quote > span {
  display: grid;
  gap: 3px;
  padding: 9px;
}

.service-order-quote small {
  color: var(--air-text-faint);
  font-size: 7px;
}

.service-order-quote b,
.service-order-quote strong {
  color: var(--air-text);
  font-size: 10px;
}

.service-order-quote .total {
  border-radius: 12px;
  background: var(--air-surface);
}

.service-order-submit b {
  margin-left: auto;
  font-size: 10px;
}

.service-balance-warning {
  margin: 0;
  border-radius: 12px;
  background: var(--air-peach);
  color: var(--air-peach-text);
  padding: 9px 11px;
  font-size: 8px;
}

.service-capture-note {
  margin: -4px 0 0;
  color: var(--air-text-faint);
  font-size: 8px;
  line-height: 1.4;
  text-align: center;
}

.service-order-success {
  display: grid;
  justify-items: center;
  gap: 8px;
  border-radius: 20px;
  background: var(--air-success-soft);
  color: var(--air-success);
  padding: 28px 20px;
  text-align: center;
}

.service-order-success > span {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--air-success);
  color: #fff;
  font-size: 18px;
}

.service-order-success h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.service-order-success p {
  max-width: 450px;
  margin: 0;
  color: color-mix(in srgb, var(--air-success) 75%, var(--air-text));
  font-size: 9px;
  line-height: 1.5;
}

.service-order-success button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--air-success);
  color: #fff;
  padding: 0 16px;
  font-size: 9px;
  font-weight: 700;
}

.guide-card-data {
  display: grid;
  gap: 9px;
  border: 1px solid var(--air-border);
  border-radius: 18px;
  background: var(--air-surface-muted);
  padding: 10px;
}

.guide-card-summary {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 42px;
  align-items: center;
  gap: 11px;
  border-radius: 13px;
  background: var(--air-surface);
  padding: 8px 10px;
}

.guide-card-summary > span {
  display: grid;
  gap: 2px;
}

.guide-card-summary small {
  color: var(--air-text-faint);
  font-size: 7px;
}

.guide-card-summary b {
  color: var(--air-text);
  font-size: 10px;
}

.guide-card-summary > strong {
  color: var(--air-text);
  font-size: 13px;
}

.guide-reveal-card {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 13px;
  background: var(--air-brand);
  color: #fff;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 700;
}

.guide-reveal-card svg:last-child {
  margin-left: auto;
}

.guide-card-secrets {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(75px, 1fr));
  gap: 7px;
}

.guide-card-secrets .card-secret {
  min-height: 52px;
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 8px 9px;
  text-align: left;
}

.guide-card-secrets .card-secret small {
  color: var(--air-text-faint);
  font-size: 7px;
}

.guide-card-secrets .card-secret b {
  color: var(--air-text);
  font-size: 9px;
}

.guide-address-copy {
  grid-column: 1 / -1;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 8px 10px;
  text-align: left;
}

.guide-address-copy > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.guide-address-copy small {
  color: var(--air-text-faint);
  font-size: 7px;
}

.guide-address-copy b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-address-copy i {
  color: var(--air-brand-text);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.guide-no-card {
  min-height: 69px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: 17px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  padding: 10px;
}

.guide-no-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--air-brand);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
}

.guide-no-card > div {
  display: grid;
  gap: 2px;
}

.guide-no-card b {
  font-size: 10px;
}

.guide-no-card small {
  color: color-mix(in srgb, var(--air-brand-text) 64%, transparent);
  font-size: 8px;
}

.guide-no-card button {
  min-height: 36px;
  border: 0;
  border-radius: 11px;
  background: var(--air-brand);
  color: #fff;
  padding: 0 11px;
  font-size: 8px;
  font-weight: 700;
}

.guide-no-card button:disabled {
  opacity: 0.55;
}

.guide-steps-v2 {
  display: grid;
  gap: 7px;
}

.guide-steps-v2 h4 {
  margin: 3px 0 2px;
  color: var(--air-text);
  font-size: 11px;
}

.guide-steps-v2 .guide-step {
  min-height: 42px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 13px;
  background: var(--air-surface-muted);
  padding: 7px 9px;
}

.guide-steps-v2 .guide-step > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--air-brand-soft);
  color: var(--air-brand-text);
  font-size: 8px;
  font-weight: 800;
}

.guide-steps-v2 .guide-step p {
  margin: 0;
  color: var(--air-text-soft);
  font-size: 9px;
  line-height: 1.42;
}

.guide-official-link {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface);
  color: var(--air-text);
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.details-secure-loading {
  grid-column: 1 / -1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--air-text-soft);
  font-size: 10px;
}

/* Admin orders */

.admin-order-list {
  display: grid;
  gap: 7px;
}

.admin-order-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 90px 120px minmax(150px, auto);
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  background: var(--air-surface-muted);
  padding: 8px 10px;
}

.admin-order-row > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-order-row > span b {
  color: var(--air-text);
  font-size: 9px;
}

.admin-order-row > span small {
  overflow: hidden;
  color: var(--air-text-faint);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-order-row > strong {
  color: var(--air-text);
  font-size: 10px;
}

.admin-order-row > i {
  font-size: 7px;
  font-style: normal;
}

.admin-order-row > div {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.admin-order-row button {
  min-height: 29px;
  border: 0;
  border-radius: 9px;
  background: var(--air-surface);
  color: var(--air-text-soft);
  padding: 0 7px;
  font-size: 7px;
  font-weight: 700;
}

.history-item.wallet strong {
  color: var(--air-success);
}

.pay-main-buttons .topup-plus-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.pay-main-buttons .topup-plus-icon::before {
  display: none !important;
}

.pay-main-buttons .topup-plus-icon::after {
  content: "+";
  display: block;
  margin-top: -1px;
  font-size: 22px;
  font-weight: 430;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Responsive */

@media (max-width: 980px) {
  .pay-home.has-card {
    grid-template-areas:
      "header"
      "greeting"
      "services"
      "card";
  }

  .pay-home.needs-card {
    grid-template-areas:
      "header"
      "greeting"
      "offer"
      "services";
  }

  .card-offer-banner {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .offer-card-action {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: end;
    text-align: left;
  }

  .offer-card-action > small,
  .offer-card-action > strong {
    grid-column: 1;
    justify-self: start;
  }

  .offer-card-action button {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 180px;
    margin: 0;
  }

  .offer-card-action em {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  body:has(.pay-home) {
    background:
      radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--air-brand) 12%, transparent) 0, transparent 20rem),
      linear-gradient(180deg, var(--air-bg) 0%, var(--air-bg-deep) 100%) !important;
  }

  .topbar-wallet-pill {
    min-width: 0;
    width: 43px;
    padding: 0;
    background: transparent;
  }

  .topbar-wallet-pill > span {
    display: none;
  }

  .topbar-wallet-pill > i {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .card-offer-banner {
    grid-template-columns: 1fr;
    gap: 17px;
    border-radius: 22px;
    padding: 18px;
  }

  .offer-card-art {
    width: min(100%, 330px);
    justify-self: center;
  }

  .offer-card-copy h2 {
    font-size: 24px;
  }

  .offer-card-action {
    grid-template-columns: 1fr auto;
    border-top: 1px solid var(--air-border);
    padding-top: 14px;
  }

  .offer-card-action button {
    min-width: 155px;
  }

  .minimal-card .premium-card-bottom {
    right: 92px !important;
  }

  .minimal-card .card-product-label {
    right: 19px;
    bottom: 19px;
    font-size: 7px;
  }

  .card-section-title {
    align-items: center;
  }

  .card-section-title h1 {
    font-size: 18px;
  }

  .wallet-method-grid {
    grid-template-columns: 1fr;
  }

  .wallet-quote {
    grid-template-columns: 1fr 1fr;
  }

  .wallet-quote .total {
    grid-column: 1 / -1;
  }

  .profile-kyc-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .profile-kyc-card button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .service-guide-head {
    grid-template-columns: 43px minmax(0, 1fr);
  }

  .service-guide-head .service-logo {
    width: 43px;
    height: 43px;
  }

  .service-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .guide-mode-tabs {
    grid-template-columns: 1fr;
  }

  .service-order-fields {
    grid-template-columns: 1fr;
  }

  .service-order-quote {
    grid-template-columns: 1fr 1fr;
  }

  .service-order-quote .total {
    grid-column: 1 / -1;
  }

  .guide-card-secrets {
    grid-template-columns: 1fr 1fr;
  }

  .guide-card-secrets > .card-secret:first-child {
    grid-column: 1 / -1;
  }

  .guide-card-summary {
    grid-template-columns: minmax(0, 1fr) auto 35px;
  }

  .guide-no-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .guide-no-card button {
    grid-column: 1 / -1;
  }

  .admin-order-row {
    grid-template-columns: 1fr auto;
  }

  .admin-order-row > i,
  .admin-order-row > div {
    grid-column: 1 / -1;
  }

  .admin-order-row > div {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .pay-brand .brand-mark span {
    display: none !important;
  }

  .offer-card-action {
    grid-template-columns: 1fr;
  }

  .offer-card-action button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .guide-card-summary {
    grid-template-columns: 1fr auto;
  }

  .guide-card-summary .card-network-mark {
    display: none;
  }
}
/* Alpina Pay — release polish layer.
   This file intentionally loads last while the legacy bundles are consolidated. */

/* ───────────────────────────── Header / avatar ───────────────────────────── */

.user-avatar-button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  overflow: visible !important;
  border-radius: 50% !important;
  padding: 5px !important;
}

.user-avatar-button > img,
.user-avatar-button > span {
  width: 32px !important;
  min-width: 32px;
  height: 32px !important;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  aspect-ratio: 1;
  border-radius: 50% !important;
  object-fit: cover;
}

.user-avatar-button i {
  right: 2px !important;
  bottom: 2px !important;
  width: 9px !important;
  height: 9px !important;
  border-width: 2px !important;
}

.topbar-wallet-pill small {
  font-size: 11px;
  letter-spacing: 0.045em;
}

.topbar-wallet-pill b {
  font-size: 14px;
}

/* ───────────────────────────── Authentication fields ───────────────────────────── */

.auth-choice-card .auth-email-field {
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0 15px;
}

.auth-choice-card .auth-email-field > svg {
  width: 20px;
  height: 20px;
  color: var(--air-text-soft);
}

.auth-choice-card .auth-email-field > input {
  width: 100%;
  min-width: 0;
  height: 52px;
  appearance: none;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: var(--air-text);
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: none !important;
}

.auth-choice-card .auth-email-field > input::placeholder {
  color: var(--air-text-faint);
  opacity: 1;
}

.auth-choice-head > p,
.auth-email-head > p {
  font-size: 14px;
  line-height: 1.45;
}

.auth-choice-card .auth-provider-button,
.auth-choice-card .auth-email-entry,
.auth-choice-card .auth-email-primary {
  min-height: 52px;
  font-size: 14px;
}

.auth-privacy,
.auth-choice-switch {
  font-size: 12px;
  line-height: 1.55;
}

/* ───────────────────────────── Readable type scale ───────────────────────────── */

.service-tile b {
  font-size: 16px;
  line-height: 1.25;
}

.service-tile small {
  font-size: 13px;
  line-height: 1.4;
}

.service-tile-mode {
  min-height: 24px;
  padding: 4px 9px;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.card-section-title small,
.pay-balance > span,
.offer-card-action > small,
.wallet-balance-hero > span,
.wallet-balance-hero > small,
.wallet-amount-field > small,
.wallet-quote small,
.wallet-recent > div:first-child small,
.wallet-recent em small,
.wallet-recent > p,
.profile-person small,
.profile-wallet-row small,
.profile-kyc-card small,
.profile-info-grid small,
.profile-safety-note,
.service-guide-head small,
.service-status,
.service-wallet-line small,
.service-order-fields label > small,
.service-order-quote small,
.service-balance-warning,
.service-capture-note,
.guide-card-summary small,
.guide-card-secrets .card-secret small,
.guide-address-copy small,
.guide-no-card small,
.admin-order-row > span small {
  font-size: 13px;
  line-height: 1.42;
}

.provider-unavailable-note,
.wallet-message,
.guide-message,
.service-region-note p,
.service-order-fields > label > span,
.guide-mode-tabs small,
.service-order-success p,
.guide-official-link {
  font-size: 14px;
  line-height: 1.5;
}

.wallet-method-grid > button b,
.guide-mode-tabs b,
.profile-kyc-card b,
.profile-info-grid b,
.service-order-quote b,
.service-order-quote strong,
.guide-card-summary b,
.guide-card-secrets .card-secret b,
.guide-address-copy b,
.guide-no-card b {
  font-size: 14px;
}

.service-order-fields input {
  font-size: 14px;
}

.service-usd-input b {
  font-size: 11px;
}

.profile-kyc-card button,
.service-wallet-line button,
.guide-reveal-card,
.guide-no-card button,
.service-order-success button {
  min-height: 42px;
  font-size: 13px;
}

.wallet-submit,
.service-order-submit,
.offer-card-action button {
  min-height: 50px;
  font-size: 14px;
}

.wallet-recent em b,
.wallet-recent strong {
  font-size: 12px;
}

.guide-steps-v2 h4 {
  font-size: 16px;
}

.guide-steps-v2 .guide-step {
  min-height: 50px;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 11px;
  padding: 10px 12px;
}

.guide-steps-v2 .guide-step > span {
  width: 31px;
  height: 31px;
  font-size: 11px;
}

.guide-steps-v2 .guide-step p {
  font-size: 14px;
  line-height: 1.5;
}

/* ───────────────────────────── Service logos ───────────────────────────── */

.service-tile {
  min-height: 96px;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 13px;
  padding: 14px 14px 39px !important;
}

.service-logo,
.service-logo.with-image {
  width: 48px;
  height: 48px;
  overflow: visible;
  border: 0 !important;
  border-radius: 13px;
  background: transparent !important;
  box-shadow: none !important;
}

.service-logo.with-image img,
.service-logo img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 9px;
  background: transparent !important;
  object-fit: contain;
}

.service-logo:not(.with-image) {
  background: color-mix(in srgb, var(--service-accent) 12%, transparent);
  color: var(--service-accent);
  font-size: 13px;
  font-weight: 760;
}

.service-logo.small,
.service-logo.with-image.small {
  width: 34px;
  height: 34px;
}

.service-logo.small img,
.service-logo.with-image.small img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

html[data-app-theme="dark"] .service-logo[style*="111827"] img,
html[data-app-theme="dark"] .service-logo[style*="1b2838"] img,
html[data-app-theme="dark"] .service-logo[style*="24292f"] img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

html[data-app-theme="dark"] .service-logo.with-image {
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

html[data-app-theme="dark"] .service-logo:not(.with-image) {
  background: color-mix(in srgb, var(--service-accent) 18%, transparent) !important;
  color: var(--service-accent) !important;
}

.service-guide-head {
  min-height: 72px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 13px;
  padding: 10px 12px;
}

.service-guide-head .service-logo {
  width: 50px;
  height: 50px;
  border-radius: 13px;
}

.service-guide-head .service-logo img {
  width: 42px;
  height: 42px;
}

.service-guide-head h3 {
  font-size: 18px;
}

.service-status {
  min-height: 30px;
  padding: 5px 11px;
}

/* ───────────────────────────── Payment methods ───────────────────────────── */

.payment-method-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.modal-card .payment-method-grid .payment-method-card {
  min-height: 78px;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  gap: 12px;
  border-radius: 17px;
  padding: 13px 14px;
}

.modal-card .payment-method-grid .payment-method-card:last-child {
  grid-column: auto;
}

.modal-card .payment-method-grid .payment-method-card.active,
.saved-payment-methods button.active {
  border-color: color-mix(in srgb, var(--air-brand) 62%, var(--air-border)) !important;
  background: var(--air-brand-soft) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-brand) 9%, transparent);
}

.payment-confirm-button {
  margin-top: 4px;
}

.payment-brand,
.payment-method-card > span:first-child,
.wallet-method-grid .payment-brand {
  width: 44px !important;
  height: 44px !important;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px !important;
  box-shadow: none;
}

.payment-brand svg {
  width: 32px;
  height: 32px;
}

.payment-brand-yookassa {
  background: #eef0ff !important;
  color: #5658d9 !important;
}

.payment-brand-crypto {
  background: #e8f6ff !important;
  color: #168acd !important;
}

.payment-method-copy b {
  font-size: 15px;
}

.payment-method-copy small {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
}

.wallet-method-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.modal-head {
  box-shadow: 0 -30px 0 30px var(--air-surface);
}

.wallet-method-grid > button {
  min-height: 76px;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 11px;
  border-radius: 17px;
  padding: 12px;
}

.wallet-method-grid > button b {
  font-size: 15px;
}

.wallet-method-grid > button small {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
}

.wallet-method-grid > button > i,
.wallet-saved-methods > button > i {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--air-border-strong);
  border-radius: 50%;
}

.wallet-method-grid > button.active > i,
.wallet-saved-methods > button.active > i {
  border: 5px solid var(--air-brand);
}

.saved-payment-methods,
.wallet-saved-methods {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--air-border);
  padding-top: 14px;
}

.saved-payment-methods > span,
.wallet-saved-heading {
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 700;
}

.wallet-saved-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wallet-saved-heading b {
  color: var(--air-text);
  font-size: 14px;
}

.wallet-saved-heading small {
  color: var(--air-text-faint);
  font-size: 12px;
  font-weight: 500;
}

.saved-payment-methods button,
.wallet-saved-methods > button {
  min-height: 62px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 9px 12px;
  text-align: left;
}

.saved-payment-methods button:hover,
.wallet-saved-methods > button:hover,
.wallet-saved-methods > button.active {
  border-color: color-mix(in srgb, var(--air-brand) 45%, var(--air-border));
  background: var(--air-brand-soft);
}

.wallet-saved-methods > button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wallet-saved-methods > button b {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-saved-methods > button small {
  color: var(--air-text-faint);
  font-size: 12px;
}

/* ───────────────────────────── ChatGPT plan picker ───────────────────────────── */

.service-plan-picker {
  display: grid;
  gap: 9px;
}

.service-plan-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.service-plan-heading b {
  color: var(--air-text);
  font-size: 15px;
}

.service-plan-heading small {
  color: var(--air-text-faint);
  font-size: 12px;
}

.service-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.service-plan-grid > button {
  position: relative;
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 12px;
  text-align: left;
}

.service-plan-grid > button:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface-muted);
}

.service-plan-grid > button.active {
  border-color: color-mix(in srgb, var(--air-brand) 62%, var(--air-border));
  background: var(--air-brand-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-brand) 9%, transparent);
}

.service-plan-grid > button > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.service-plan-grid > button b {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-plan-grid > button small {
  color: var(--air-text-faint);
  font-size: 12px;
}

.service-plan-grid > button strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 760;
}

.service-plan-grid > button > i {
  position: absolute;
  right: 12px;
  bottom: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
}

.service-plan-grid > button.active > i {
  background: var(--air-brand);
}

.service-order-fields input[readonly] {
  cursor: default;
  color: var(--air-text-soft);
}

/* ───────────────────────────── Card offer ───────────────────────────── */

.card-offer-banner {
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) 178px;
  gap: 32px;
  padding: 28px;
}

.offer-card-art {
  border-radius: 24px;
  background: linear-gradient(145deg, #f8f7f2 0%, #eef0fb 100%);
  box-shadow: 0 28px 54px -38px rgba(36, 43, 74, 0.55);
}

.offer-card-brand {
  font-size: 16px;
}

.offer-country-badge {
  position: absolute;
  z-index: 3;
  top: 50px;
  left: 18px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(25, 32, 56, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(25, 32, 56, 0.76);
  padding: 4px 10px 4px 7px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.offer-country-badge b {
  font-size: 15px;
  line-height: 1;
}

.offer-card-art > b {
  font-size: 12px;
}

.offer-card-art > .offer-card-pan {
  font-size: 11px;
}

.offer-eyebrow {
  min-height: 29px;
  padding: 5px 11px;
  font-size: 12px;
  letter-spacing: 0.035em;
}

.offer-card-copy h2 {
  max-width: 610px;
  margin: 12px 0 10px;
  font-size: clamp(27px, 3.2vw, 37px);
  line-height: 1.06;
}

.offer-card-copy p {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.58;
}

.offer-benefits {
  display: none !important;
}

.offer-card-highlight {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
  border-radius: 17px;
  background: var(--air-surface-muted);
  padding: 9px 13px 9px 10px;
}

.offer-service-stack {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}

.offer-card-highlight > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.offer-card-highlight > span b {
  color: var(--air-text);
  font-size: 14px;
}

.offer-card-highlight > span small {
  color: var(--air-text-faint);
  font-size: 12px;
  line-height: 1.35;
}

.offer-card-action {
  gap: 3px;
}

.offer-card-action > small {
  font-size: 12px;
}

.offer-card-action > strong {
  font-size: 31px;
}

.offer-card-action button {
  border-radius: 16px;
}

.offer-card-action em {
  font-size: 12px;
  line-height: 1.4;
}

/* ───────────────────────────── Mobile ───────────────────────────── */

@media (max-width: 980px) {
  .card-offer-banner {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .pay-home {
    width: 100% !important;
    max-width: none !important;
    padding: 10px 13px 96px !important;
  }

  .pay-home-topbar {
    width: 100% !important;
    margin: 0 !important;
  }

  .topbar-wallet-pill {
    width: auto;
    min-width: 105px;
    gap: 8px;
    background: var(--air-surface-muted);
    padding: 5px 5px 5px 10px;
  }

  .topbar-wallet-pill > span {
    display: grid;
  }

  .topbar-wallet-pill > i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 18px;
  }

  .user-avatar-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex-basis: 40px;
    padding: 5px !important;
  }

  .user-avatar-button > img,
  .user-avatar-button > span {
    width: 30px !important;
    min-width: 30px;
    height: 30px !important;
    flex-basis: 30px;
  }

  .services-head p {
    font-size: 14px;
  }

  .service-tile {
    min-height: 130px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    padding: 14px 14px 40px !important;
  }

  .service-logo,
  .service-logo.with-image {
    width: 44px;
    height: 44px;
  }

  .service-logo img,
  .service-logo.with-image img {
    width: 37px;
    height: 37px;
  }

  .service-tile b {
    font-size: 15px;
  }

  .service-tile small {
    font-size: 13px;
  }

  .card-offer-banner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 19px;
  }

  .offer-card-art {
    width: min(100%, 360px);
  }

  .offer-card-copy h2 {
    font-size: 28px;
  }

  .offer-card-copy p {
    font-size: 15px;
  }

  .offer-card-highlight {
    width: 100%;
  }

  .offer-card-action {
    grid-template-columns: 1fr auto;
    padding-top: 16px;
  }

  .offer-card-action button {
    min-width: 166px;
  }

  .payment-method-grid,
  .wallet-method-grid {
    grid-template-columns: 1fr;
  }

  .modal-card .payment-method-grid .payment-method-card,
  .wallet-method-grid > button {
    min-height: 72px;
  }

  .service-guide-head {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .service-plan-grid {
    display: flex;
    overflow-x: auto;
    margin: 0 -18px;
    padding: 3px 18px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .service-plan-grid::-webkit-scrollbar {
    display: none;
  }

  .service-plan-grid > button {
    min-width: 158px;
    flex: 0 0 158px;
    scroll-snap-align: start;
  }

  .guide-card-secrets .card-secret b,
  .guide-address-copy b {
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .service-tile {
    min-height: 124px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 9px;
    padding: 13px 13px 38px !important;
  }

  .service-logo,
  .service-logo.with-image {
    width: 44px;
    height: 44px;
  }

  .offer-card-action {
    grid-template-columns: 1fr;
  }

  .offer-card-action button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }

  .offer-card-highlight {
    align-items: flex-start;
  }

  .offer-service-stack {
    display: none;
  }

  .wallet-saved-heading {
    display: grid;
    gap: 2px;
  }
}

@media (max-width: 350px) {
  .topbar-wallet-pill {
    width: 40px;
    min-width: 40px;
    padding: 0;
    background: transparent;
  }

  .topbar-wallet-pill > span {
    display: none;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-tile {
    min-height: 88px;
    grid-template-columns: 46px minmax(0, 1fr);
    align-content: center;
    gap: 12px;
  }
}
/*
 * Alpina Pay release v9
 * Stable local service marks + rebuilt subscription-card offer.
 */

/* ───────────────────────────── Brand marks ───────────────────────────── */

.service-logo,
.service-logo.with-image {
  display: grid;
  place-items: center;
}

.service-logo.with-image img,
.service-logo img {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.service-logo.small img,
.service-logo.with-image.small img {
  width: 29px;
  height: 29px;
  border-radius: 0;
}

.service-tile .service-logo.with-image {
  transition: transform 180ms ease;
}

.service-tile:hover .service-logo.with-image {
  transform: translateY(-1px) scale(1.035);
}

/* ───────────────────────────── Card offer ───────────────────────────── */

.card-offer-banner {
  position: relative;
  isolation: isolate;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 470px);
  grid-template-areas:
    "copy stage"
    "action stage";
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(38px, 5vw, 76px);
  row-gap: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--air-brand) 10%, var(--air-border));
  border-radius: 32px;
  background:
    radial-gradient(circle at 5% 8%, color-mix(in srgb, var(--air-brand) 8%, transparent), transparent 31%),
    radial-gradient(circle at 96% 92%, color-mix(in srgb, #63d6bd 9%, transparent), transparent 28%),
    var(--air-surface);
  padding: clamp(38px, 4.2vw, 62px);
  box-shadow:
    0 28px 70px -52px rgba(34, 38, 70, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.65);
}

.card-offer-banner::before,
.card-offer-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
}

.card-offer-banner::before {
  width: 280px;
  height: 280px;
  top: -180px;
  left: 36%;
  border: 48px solid color-mix(in srgb, var(--air-brand) 5%, transparent);
}

.card-offer-banner::after {
  width: 170px;
  height: 170px;
  right: -92px;
  bottom: -98px;
  background: color-mix(in srgb, #63d6bd 6%, transparent);
}

.offer-card-copy {
  grid-area: copy;
  align-self: end;
  min-width: 0;
}

.offer-eyebrow {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--air-brand) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--air-brand) 9%, var(--air-surface));
  color: var(--air-brand-text);
  padding: 5px 12px 5px 9px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.offer-eyebrow i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: #63d6bd;
  box-shadow: 0 0 0 4px color-mix(in srgb, #63d6bd 18%, transparent);
}

.offer-card-copy h2 {
  max-width: 720px;
  margin: 18px 0 15px;
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: clamp(37px, 4vw, 55px);
  font-weight: 780;
  line-height: 0.99;
  letter-spacing: -0.06em;
}

.offer-card-copy h2 span {
  display: block;
  color: var(--air-brand-text);
}

.offer-card-copy p {
  max-width: 690px;
  margin: 0;
  color: var(--air-text-soft);
  font-size: 17px;
  font-weight: 520;
  line-height: 1.55;
}

.offer-card-highlight {
  width: fit-content;
  max-width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  border: 1px solid var(--air-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--air-surface-muted) 82%, transparent);
  padding: 9px 15px 9px 11px;
}

.offer-service-stack {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: 3px;
}

.offer-service-stack .service-logo {
  width: 37px;
  height: 37px;
  margin-left: -5px;
  border: 3px solid var(--air-surface) !important;
  border-radius: 50% !important;
  background: var(--air-surface) !important;
}

.offer-service-stack .service-logo:first-child {
  margin-left: 0;
}

.offer-service-stack .service-logo img {
  width: 25px;
  height: 25px;
}

.offer-card-highlight > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.offer-card-highlight > span b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 730;
}

.offer-card-highlight > span small {
  color: var(--air-text-faint);
  font-size: 12px;
  font-weight: 530;
  line-height: 1.35;
}

.offer-card-action {
  grid-area: action;
  align-self: start;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  text-align: left;
}

.offer-card-price {
  min-width: 155px;
  display: grid;
  gap: 3px;
}

.offer-card-price > small {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 650;
}

.offer-card-price > span {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.offer-card-price strong {
  color: var(--air-text);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 790;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.offer-card-price em {
  max-width: 102px;
  color: var(--air-text-faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
}

.offer-card-action button {
  min-width: 190px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  border: 0;
  border-radius: 17px;
  background: var(--air-brand);
  color: #fff;
  padding: 0 19px;
  box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--air-brand) 74%, transparent);
  font-size: 14px;
  font-weight: 730;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.offer-card-action button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 20px 34px -22px color-mix(in srgb, var(--air-brand) 86%, transparent);
}

.offer-card-action button:disabled {
  border: 1px solid color-mix(in srgb, var(--air-brand) 12%, var(--air-border));
  background: color-mix(in srgb, var(--air-brand) 8%, var(--air-surface-muted));
  color: var(--air-brand-text);
  box-shadow: none;
  opacity: 1;
}

.offer-card-status {
  min-width: 145px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.offer-card-status > i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f3aa4e;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f3aa4e 15%, transparent);
}

.offer-card-status > span {
  display: grid;
  gap: 1px;
}

.offer-card-status b {
  color: var(--air-text-soft);
  font-size: 11px;
  font-weight: 700;
}

.offer-card-status small {
  color: var(--air-text-faint);
  font-size: 10px;
  line-height: 1.25;
}

.offer-card-stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
}

.offer-card-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 94%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--air-brand) 7%, transparent);
  transform: translate(7%, -2%);
}

.offer-card-art {
  position: relative;
  width: min(100%, 445px);
  aspect-ratio: 1.586;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: #181d34;
  color: #fff;
  box-shadow:
    0 34px 58px -38px rgba(20, 25, 52, 0.68),
    inset 0 1px rgba(255, 255, 255, 0.12);
  transform: rotate(-1.6deg);
}

.offer-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 36%);
}

.offer-card-blob {
  position: absolute;
  z-index: 0;
  display: block;
  border-radius: 999px;
}

.offer-card-blob.one {
  width: 78%;
  height: 126%;
  top: -64%;
  right: -24%;
  background: #8994ed;
  transform: rotate(-17deg);
}

.offer-card-blob.two {
  width: 86%;
  height: 88%;
  left: -29%;
  bottom: -55%;
  background: #77d8c2;
  transform: rotate(16deg);
}

.offer-card-brand,
.offer-country-badge,
.offer-card-chip,
.offer-card-art > b,
.offer-card-art > .offer-card-pan,
.offer-card-art > .card-network-mark {
  position: absolute;
  z-index: 3;
}

.offer-card-brand {
  top: 24px;
  left: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.035em;
}

.offer-card-brand img {
  width: 21px;
  height: 21px;
  display: block;
  filter: brightness(0) invert(1);
}

.offer-country-badge {
  top: 62px;
  left: 26px;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(9, 13, 28, 0.24);
  color: rgba(255, 255, 255, 0.82);
  padding: 4px 10px 4px 7px;
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 650;
}

.offer-country-badge b {
  font-size: 14px;
  line-height: 1;
}

.offer-card-chip {
  top: 50%;
  left: 27px;
  width: 45px;
  height: 33px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 9px;
  background: #d8c794;
  padding: 5px;
  box-shadow: inset 0 0 0 1px rgba(67, 52, 19, 0.12);
  transform: translateY(-40%);
}

.offer-card-chip i {
  display: block;
  border: 1px solid rgba(92, 72, 27, 0.3);
  border-radius: 2px;
}

.offer-card-art > b {
  left: 27px;
  bottom: 27px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.15em;
}

.offer-card-art > .offer-card-pan {
  right: 27px;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.offer-card-art > .card-network-mark {
  top: 23px;
  right: 25px;
}

.offer-card-art .card-network-mark.mastercard i {
  width: 27px;
  height: 27px;
}

.offer-card-caption {
  width: fit-content;
  max-width: 92%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  border: 1px solid var(--air-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--air-surface) 94%, transparent);
  color: var(--air-brand-text);
  padding: 8px 14px 8px 11px;
  box-shadow: 0 18px 42px -34px rgba(30, 36, 65, 0.5);
}

.offer-card-caption > svg {
  flex: 0 0 auto;
}

.offer-card-caption > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.offer-card-caption b {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 720;
}

.offer-card-caption small {
  overflow: hidden;
  color: var(--air-text-faint);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-app-theme="dark"] .card-offer-banner {
  border-color: rgba(151, 162, 220, 0.14);
  background:
    radial-gradient(circle at 5% 8%, rgba(117, 130, 224, 0.11), transparent 31%),
    radial-gradient(circle at 96% 92%, rgba(99, 214, 189, 0.08), transparent 28%),
    #141821;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

html[data-app-theme="dark"] .offer-card-art {
  border-color: rgba(255, 255, 255, 0.1);
  background: #20253f;
}

html[data-app-theme="dark"] .offer-service-stack .service-logo {
  border-color: #1a1f29 !important;
  background: #1a1f29 !important;
}

html[data-app-theme="dark"] .offer-card-caption {
  background: rgba(26, 31, 41, 0.92);
}

/* ───────────────────────────── Responsive ───────────────────────────── */

@media (max-width: 1180px) {
  .card-offer-banner {
    min-height: 400px;
    grid-template-columns: minmax(0, 1fr) minmax(315px, 380px);
    column-gap: 34px;
    padding: 36px;
  }

  .offer-card-copy h2 {
    font-size: clamp(34px, 4vw, 45px);
  }

  .offer-card-copy p {
    font-size: 15px;
  }

  .offer-card-action {
    flex-wrap: wrap;
    gap: 14px 18px;
  }

  .offer-card-status {
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  .card-offer-banner {
    grid-template-columns: minmax(0, 1fr) minmax(285px, 340px);
    grid-template-areas:
      "copy stage"
      "action action";
    padding: 30px;
  }

  .offer-card-copy h2 {
    font-size: clamp(32px, 5vw, 42px);
  }

  .offer-card-highlight {
    width: 100%;
  }

  .offer-card-action {
    padding-top: 5px;
  }
}

@media (max-width: 680px) {
  .card-offer-banner {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "stage"
      "action";
    gap: 25px;
    border-radius: 25px;
    padding: 24px 20px;
  }

  .offer-card-copy {
    align-self: auto;
  }

  .offer-eyebrow {
    min-height: 28px;
    font-size: 10px;
  }

  .offer-card-copy h2 {
    margin: 14px 0 12px;
    font-size: clamp(30px, 9.5vw, 39px);
    line-height: 1.02;
  }

  .offer-card-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  .offer-card-highlight {
    min-height: 54px;
    margin-top: 18px;
    gap: 11px;
    border-radius: 16px;
    padding: 8px 11px 8px 8px;
  }

  .offer-service-stack .service-logo {
    width: 33px;
    height: 33px;
  }

  .offer-service-stack .service-logo img {
    width: 22px;
    height: 22px;
  }

  .offer-card-highlight > span b {
    font-size: 12px;
  }

  .offer-card-highlight > span small {
    font-size: 10px;
  }

  .offer-card-stage::before {
    width: 84%;
  }

  .offer-card-art {
    width: min(100%, 390px);
    border-radius: 23px;
    transform: none;
  }

  .offer-card-brand {
    top: 19px;
    left: 20px;
    font-size: 14px;
  }

  .offer-card-brand img {
    width: 19px;
    height: 19px;
  }

  .offer-country-badge {
    top: 53px;
    left: 20px;
  }

  .offer-card-chip {
    left: 21px;
    width: 40px;
    height: 30px;
  }

  .offer-card-art > b {
    left: 21px;
    bottom: 21px;
    font-size: 9px;
  }

  .offer-card-art > .offer-card-pan {
    right: 21px;
    bottom: 21px;
    font-size: 9px;
  }

  .offer-card-art > .card-network-mark {
    top: 18px;
    right: 19px;
  }

  .offer-card-caption {
    width: 100%;
    max-width: 390px;
    margin-top: 14px;
  }

  .offer-card-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    gap: 14px;
    border-top: 1px solid var(--air-border);
    padding-top: 20px;
  }

  .offer-card-price {
    min-width: 0;
  }

  .offer-card-price strong {
    font-size: 31px;
  }

  .offer-card-action button {
    min-width: 158px;
    min-height: 51px;
  }

  .offer-card-status {
    grid-column: 1 / -1;
    flex-basis: auto;
  }
}

@media (max-width: 430px) {
  .card-offer-banner {
    padding: 22px 16px;
  }

  .offer-card-highlight > span small {
    display: none;
  }

  .offer-card-action {
    grid-template-columns: 1fr;
  }

  .offer-card-action button {
    width: 100%;
  }

  .offer-card-status {
    grid-column: auto;
  }
}

/* ─────────────────────── Service purchase clarity · v9.2 ─────────────────────── */

.service-tile:not(.alpina-fulfilled) {
  padding-bottom: 14px !important;
}

.service-tile.alpina-fulfilled {
  padding-bottom: 42px !important;
}

.service-tile-mode.cardless {
  right: 11px;
  bottom: 10px;
  left: auto;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--air-success) 17%, transparent);
  border-radius: 9px 9px 9px 4px;
  background: color-mix(in srgb, var(--air-success-soft) 90%, var(--air-surface));
  color: var(--air-success);
  padding: 4px 8px 4px 6px;
  box-shadow: 0 8px 18px -15px color-mix(in srgb, var(--air-success) 70%, transparent);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0;
  transform: rotate(-1.2deg);
}

.service-tile-mode.cardless > span {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--air-success);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

.service-status.cardless {
  border-color: color-mix(in srgb, var(--air-success) 16%, transparent);
  background: var(--air-success-soft);
  color: var(--air-success);
}

html[data-app-theme="dark"] .service-tile-mode.cardless {
  border-color: rgba(99, 214, 189, 0.2);
  background: rgba(99, 214, 189, 0.1);
  color: #83e2cb;
}

html[data-app-theme="dark"] .service-tile-mode.cardless > span {
  background: #65cdb5;
  color: #10231f;
}

html[data-app-theme="dark"] .service-status.cardless {
  border-color: rgba(99, 214, 189, 0.2);
  background: rgba(99, 214, 189, 0.1);
  color: #83e2cb;
}

@media (max-width: 680px) {
  .service-tile:not(.alpina-fulfilled) {
    align-content: center;
    padding: 14px !important;
  }

  .service-tile.alpina-fulfilled {
    padding: 14px 14px 43px !important;
  }
}

@media (max-width: 390px) {
  .service-tile:not(.alpina-fulfilled) {
    padding: 13px !important;
  }

  .service-tile.alpina-fulfilled {
    padding: 13px 13px 40px !important;
  }

  .service-tile-mode.cardless {
    right: 9px;
    bottom: 9px;
    font-size: 10px;
  }
}

@media (max-width: 350px) {
  .service-tile.alpina-fulfilled {
    min-height: 108px;
    padding-bottom: 34px !important;
  }
}
/*
 * Alpina Pay v10 — Quiet Alpine fintech.
 * One coherent visual layer for the authenticated dashboard and its dialogs.
 */

/* ───────────────────────────── Design tokens ───────────────────────────── */

.ui-v10,
.ui-v10-modal,
.ui-v10-auth {
  --air-bg: #fafafa;
  --air-bg-deep: #fafafa;
  --air-surface: #ffffff;
  --air-surface-muted: #f5f5f6;
  --air-surface-tint: #fafafa;
  --air-text: #08090a;
  --air-text-soft: #5a606b;
  --air-text-faint: #8b909a;
  --air-border: rgba(8, 9, 10, 0.09);
  --air-border-soft: rgba(8, 9, 10, 0.055);
  --air-border-strong: rgba(8, 9, 10, 0.17);
  --air-brand: #08090a;
  --air-brand-hover: #242629;
  --air-brand-soft: #f1f1f2;
  --air-brand-text: #08090a;
  --air-success: #087a48;
  --air-success-soft: #eaf7ef;
  --air-warning: #9e5c0a;
  --air-warning-soft: #fff4e6;
  --air-danger: #bd303d;
  --air-danger-soft: #fbeaec;
  --air-peach: #fff4e6;
  --air-peach-text: #9e5c0a;
  --air-panel-radius: 20px;
  --air-card-radius: 16px;
  --air-control-radius: 12px;
  --air-shadow-panel: none;
  --air-shadow-float: 0 16px 44px -32px rgba(8, 9, 10, 0.28);
  --air-shadow-modal: 0 28px 80px -28px rgba(8, 9, 10, 0.36);

  --c-bg: var(--air-bg);
  --c-bg-soft: var(--air-surface-muted);
  --c-bg-softer: var(--air-surface-tint);
  --c-surface: var(--air-surface);
  --c-surface-2: var(--air-surface-tint);
  --c-ink: var(--air-text);
  --c-ink-soft: #1a1c1f;
  --c-muted: var(--air-text-soft);
  --c-muted-2: var(--air-text-faint);
  --c-line: var(--air-border);
  --c-line-soft: var(--air-border-soft);
  --c-accent: #315ee7;
  --c-accent-2: #eef3ff;
  --c-success: var(--air-success);
  --c-success-2: var(--air-success-soft);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(8, 9, 10, 0.05);
  --shadow-sm: 0 2px 10px -8px rgba(8, 9, 10, 0.28);
  --shadow-md: var(--air-shadow-float);
  --shadow-lg: var(--air-shadow-modal);
}

html[data-app-theme="dark"] .ui-v10,
html[data-app-theme="dark"] .ui-v10-modal,
html[data-app-theme="dark"] .ui-v10-auth {
  --air-bg: #0a0a0b;
  --air-bg-deep: #0a0a0b;
  --air-surface: #0f0f11;
  --air-surface-muted: #161618;
  --air-surface-tint: #121215;
  --air-text: #fafafa;
  --air-text-soft: #a1a1aa;
  --air-text-faint: #71717a;
  --air-border: rgba(255, 255, 255, 0.09);
  --air-border-soft: rgba(255, 255, 255, 0.06);
  --air-border-strong: rgba(255, 255, 255, 0.18);
  --air-brand: #fafafa;
  --air-brand-hover: #e4e4e7;
  --air-brand-soft: #1a1a1d;
  --air-brand-text: #fafafa;
  --air-success: #62c89a;
  --air-success-soft: rgba(38, 166, 105, 0.14);
  --air-warning: #e4a353;
  --air-warning-soft: rgba(190, 108, 19, 0.15);
  --air-danger: #f07a83;
  --air-danger-soft: rgba(207, 61, 75, 0.14);
  --air-peach: rgba(190, 108, 19, 0.15);
  --air-peach-text: #e8ad65;
  --c-ink-soft: #e4e4e7;
  --c-accent: #7f9bff;
  --c-accent-2: rgba(76, 108, 224, 0.16);
  --air-shadow-modal: 0 32px 96px -24px rgba(0, 0, 0, 0.82);
}

body:has(.ui-v10) {
  min-height: 100dvh;
  background: #fafafa !important;
  background-image: none !important;
  background-attachment: initial !important;
}

html[data-app-theme="dark"] body:has(.ui-v10) {
  background: #0a0a0b !important;
  background-image: none !important;
}

/* ───────────────────────────── Dashboard shell ───────────────────────────── */

.ui-v10.pay-home {
  width: min(1340px, calc(100% - 48px));
  max-width: 1340px;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 20px 30px;
  padding: 0 0 76px;
}

.ui-v10.pay-home-topbar,
.ui-v10 .pay-home-topbar {
  min-height: 68px;
  top: 0;
  border: 0;
  border-bottom: 1px solid var(--air-border);
  border-radius: 0;
  background: color-mix(in srgb, var(--air-bg) 92%, transparent);
  padding: 8px 0;
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(135%);
}

.ui-v10 .pay-brand .brand-mark {
  gap: 10px;
}

.ui-v10 .pay-brand .brand-mark img {
  width: 26px;
  height: 26px;
}

.ui-v10 .pay-brand .brand-mark span {
  color: var(--air-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.ui-v10 .topbar-account-actions {
  gap: 10px;
}

.ui-v10 .topbar-wallet-pill {
  min-width: 150px;
  height: 44px;
  gap: 14px;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 4px 5px 4px 15px;
}

.ui-v10 .topbar-wallet-pill:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
  transform: none;
}

.ui-v10 .topbar-wallet-pill small {
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ui-v10 .topbar-wallet-pill b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.ui-v10 .topbar-wallet-pill > i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--air-text);
  color: var(--air-bg);
  font-size: 18px;
  font-weight: 400;
}

.ui-v10 .user-avatar-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  flex-basis: 44px;
  border: 1px solid var(--air-border) !important;
  background: var(--air-surface) !important;
  padding: 4px !important;
}

.ui-v10 .user-avatar-button > img,
.ui-v10 .user-avatar-button > span {
  width: 34px !important;
  min-width: 34px;
  height: 34px !important;
  flex-basis: 34px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  font-size: 12px;
  font-weight: 650;
}

.ui-v10 .user-avatar-button i {
  right: 1px !important;
  bottom: 1px !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid var(--air-surface) !important;
  background: #1d9b62;
}

.ui-v10 .user-avatar-button[aria-expanded="true"] {
  border-color: var(--air-border-strong) !important;
  box-shadow: none !important;
}

.ui-v10 .pay-dashboard-greeting {
  min-height: 76px;
  display: flex;
  align-items: end;
  padding: 26px 0 0;
}

.ui-v10 .pay-dashboard-greeting > div {
  display: grid;
  gap: 4px;
}

.ui-v10 .pay-dashboard-greeting h1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  overflow: visible;
  color: var(--air-text);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 680;
  line-height: 1.12;
  letter-spacing: -0.035em;
  white-space: normal;
}

.ui-v10 .pay-dashboard-greeting h1 span {
  color: var(--air-text-faint);
  font-weight: 550;
}

.ui-v10 .pay-dashboard-greeting h1 strong {
  min-width: 0;
  overflow: hidden;
  color: var(--air-text);
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10 .pay-dashboard-greeting p {
  margin: 0;
  color: var(--air-text-soft);
  font-size: 14px;
  line-height: 1.45;
}

/* ───────────────────────────── Navigation ───────────────────────────── */

.ui-v10 .pay-side-nav nav {
  top: 88px;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 4px 0;
  box-shadow: none;
}

.ui-v10 .pay-side-nav button {
  min-height: 44px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--air-text-soft);
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 520;
}

.ui-v10 .pay-side-nav button svg,
.ui-v10 .pay-side-nav button:nth-child(n) svg {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
  border-radius: 0;
  background: transparent !important;
  color: currentColor !important;
  padding: 0;
  stroke-width: 1.8;
}

.ui-v10 .pay-side-nav button:hover {
  border-color: transparent;
  background: var(--air-surface-muted);
  color: var(--air-text);
}

.ui-v10 .pay-side-nav button.active {
  border-color: var(--air-border);
  background: var(--air-surface);
  color: var(--air-text);
  box-shadow: var(--shadow-xs);
}

.ui-v10 .pay-side-nav button.active svg {
  background: transparent !important;
  color: var(--air-text) !important;
}

/* ───────────────────────────── Product hero ───────────────────────────── */

.ui-v10 .card-offer-banner {
  min-height: 380px;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
  grid-template-areas:
    "copy stage"
    "action stage";
  grid-template-rows: 1fr auto;
  column-gap: clamp(34px, 5vw, 72px);
  row-gap: 20px;
  border: 1px solid var(--air-border);
  border-radius: 20px;
  background: var(--air-surface);
  background-image: none;
  padding: clamp(34px, 4vw, 52px);
  box-shadow: none;
}

.ui-v10 .card-offer-banner::before,
.ui-v10 .card-offer-banner::after {
  display: none;
}

.ui-v10 .offer-card-copy {
  align-self: end;
}

.ui-v10 .offer-eyebrow {
  min-height: auto;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--air-text-soft);
  padding: 0;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
}

.ui-v10 .offer-eyebrow i {
  width: 7px;
  height: 7px;
  background: #1b9a61;
  box-shadow: 0 0 0 4px rgba(27, 154, 97, 0.11);
}

.ui-v10 .offer-card-copy h2 {
  max-width: 650px;
  margin: 17px 0 14px;
  color: var(--air-text);
  font-size: clamp(38px, 4.1vw, 54px);
  font-weight: 680;
  line-height: 1.02;
  letter-spacing: -0.052em;
}

.ui-v10 .offer-card-copy h2 span {
  display: block;
  color: var(--air-text);
  font-weight: 680;
}

.ui-v10 .offer-card-copy p {
  max-width: 620px;
  color: var(--air-text-soft);
  font-size: 16px;
  font-weight: 430;
  line-height: 1.56;
}

.ui-v10 .offer-card-highlight {
  display: none;
}

.ui-v10 .offer-service-stack {
  padding-left: 0;
}

.ui-v10 .offer-service-stack .service-logo {
  width: 34px !important;
  height: 34px !important;
  margin-left: -6px;
  border: 2px solid var(--air-surface) !important;
  background: var(--air-surface) !important;
}

.ui-v10 .offer-service-stack .service-logo:first-child {
  margin-left: 0;
}

.ui-v10 .offer-service-stack .service-logo img {
  width: 23px;
  height: 23px;
}

.ui-v10 .offer-card-highlight > span {
  gap: 1px;
}

.ui-v10 .offer-card-highlight > span b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 620;
}

.ui-v10 .offer-card-highlight > span small {
  color: var(--air-text-faint);
  font-size: 12px;
  font-weight: 430;
}

.ui-v10 .offer-card-action {
  min-width: 0;
  align-self: start;
  gap: 18px;
  border-top: 1px solid var(--air-border);
  padding-top: 21px;
}

.ui-v10 .offer-card-price {
  min-width: 150px;
  gap: 3px;
}

.ui-v10 .offer-card-price > small {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 520;
}

.ui-v10 .offer-card-price > span {
  gap: 8px;
}

.ui-v10 .offer-card-price strong {
  color: var(--air-text);
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.ui-v10 .offer-card-price em {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 430;
}

.ui-v10 .offer-card-action button {
  min-width: 182px;
  min-height: 50px;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 19px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
}

.ui-v10 .offer-card-action button:hover:not(:disabled) {
  background: var(--air-brand-hover);
  box-shadow: none;
  transform: translateY(-1px);
}

.ui-v10 .offer-card-status {
  min-width: 190px;
  gap: 10px;
  border-left: 1px solid var(--air-border);
  padding-left: 18px;
}

.ui-v10 .offer-card-status > i {
  width: 8px;
  height: 8px;
  background: #d58b2d;
  box-shadow: 0 0 0 4px rgba(213, 139, 45, 0.11);
}

.ui-v10 .offer-card-status b {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 620;
}

.ui-v10 .offer-card-status small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10 .offer-card-stage {
  align-content: center;
}

.ui-v10 .offer-card-stage::before {
  display: none;
}

.ui-v10 .offer-card-art {
  width: min(100%, 440px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: #121418;
  color: #ffffff;
  box-shadow: 0 28px 58px -32px rgba(7, 9, 14, 0.58);
  transform: none;
}

.ui-v10 .offer-card-art::after {
  display: none;
}

.ui-v10 .offer-card-blob.one {
  width: 47%;
  height: 116%;
  top: -8%;
  right: -2%;
  border-radius: 0;
  background: #b9c6ff;
  clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%);
  transform: none;
}

.ui-v10 .offer-card-blob.two {
  width: 63%;
  height: 7px;
  left: 0;
  bottom: 0;
  border-radius: 0;
  background: #7dd7bd;
  transform: none;
}

.ui-v10 .offer-card-brand {
  top: 23px;
  left: 24px;
  gap: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.025em;
}

.ui-v10 .offer-card-brand img {
  width: 20px;
  height: 20px;
}

.ui-v10 .offer-country-badge {
  top: 57px;
  left: 24px;
  min-height: 24px;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  padding: 0;
  backdrop-filter: none;
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.08em;
}

.ui-v10 .offer-country-badge b {
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 650;
}

.ui-v10 .offer-card-chip {
  display: none;
}

.ui-v10 .offer-card-art > b {
  left: 24px;
  bottom: 25px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 9px;
  font-weight: 620;
  letter-spacing: 0.12em;
}

.ui-v10 .offer-card-art > .offer-card-pan {
  right: 24px;
  bottom: 25px;
  color: rgba(15, 17, 21, 0.72);
  font-size: 10px;
  font-weight: 650;
}

.ui-v10 .offer-card-art > .card-network-mark {
  top: 22px;
  right: 23px;
}

.ui-v10 .offer-card-caption {
  display: none;
}

.ui-v10 .offer-card-caption > svg {
  width: 17px;
  height: 17px;
  color: var(--air-text-faint);
}

.ui-v10 .offer-card-caption b {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 620;
}

.ui-v10 .offer-card-caption small {
  color: var(--air-text-faint);
  font-size: 11px;
}

/* ───────────────────────────── Service catalogue ───────────────────────────── */

.ui-v10 .services-home {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 0 0;
  box-shadow: none;
}

.ui-v10 .services-head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: end;
  gap: 26px;
}

.ui-v10 .services-head h2 {
  color: var(--air-text);
  font-size: 28px;
  font-weight: 670;
  letter-spacing: -0.035em;
}

.ui-v10 .services-head p {
  margin-top: 5px;
  color: var(--air-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

.ui-v10 .service-search {
  min-height: 46px;
  border: 1px solid var(--air-border);
  border-radius: 12px;
  background: var(--air-surface);
  color: var(--air-text-soft);
  padding: 0 14px;
}

.ui-v10 .service-search input {
  color: var(--air-text);
  font-size: 14px;
}

.ui-v10 .service-search:focus-within {
  border-color: var(--air-text);
  background: var(--air-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-text) 7%, transparent);
}

.ui-v10 .service-filter-row {
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 20px 0 14px;
  overflow-x: auto;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface-muted);
  padding: 3px;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

.ui-v10 .service-filter-row::-webkit-scrollbar {
  display: none;
}

.ui-v10 .service-filter-row button {
  min-height: 32px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--air-text-soft);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 520;
}

.ui-v10 .service-filter-row button:hover {
  background: color-mix(in srgb, var(--air-surface) 65%, transparent);
  color: var(--air-text);
}

.ui-v10 .service-filter-row button.active,
html[data-app-theme="dark"] .ui-v10 .service-filter-row button.active {
  border: 0 !important;
  background: var(--air-surface) !important;
  color: var(--air-text) !important;
  box-shadow: var(--shadow-xs);
}

.ui-v10 .services-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ui-v10 .service-tile,
.ui-v10 .service-tile:nth-child(n) {
  min-height: 92px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 15px;
  background: var(--air-surface) !important;
  color: var(--air-text);
  padding: 15px !important;
  box-shadow: none;
}

.ui-v10 .service-tile.alpina-fulfilled {
  padding: 15px 15px 38px !important;
}

.ui-v10 .service-tile:hover,
.ui-v10 .service-tile.active {
  border-color: var(--air-border-strong);
  background: var(--air-surface) !important;
  box-shadow: 0 12px 28px -25px rgba(8, 9, 10, 0.45);
  transform: translateY(-1px);
}

.ui-v10 .service-logo,
.ui-v10 .service-logo.with-image {
  width: 44px;
  height: 44px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-v10 .service-logo img,
.ui-v10 .service-logo.with-image img {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent !important;
  object-fit: contain;
}

.ui-v10 .service-tile:hover .service-logo.with-image {
  transform: none;
}

.ui-v10 .service-tile b {
  color: var(--air-text);
  font-size: 15px;
  font-weight: 620;
  line-height: 1.25;
}

.ui-v10 .service-tile small {
  margin-top: 3px;
  color: var(--air-text-soft);
  font-size: 12px;
  line-height: 1.4;
}

.ui-v10 .service-tile-mode.cardless {
  right: 11px;
  bottom: 10px;
  min-height: 21px;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--air-success) 20%, transparent);
  border-radius: 7px;
  background: var(--air-success-soft);
  color: var(--air-success);
  padding: 3px 7px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0;
  transform: none;
}

.ui-v10 .service-tile-mode.cardless > span {
  display: none;
}

/* ───────────────────────────── Issued card area ───────────────────────────── */

.ui-v10 .pay-card-screen {
  border: 1px solid var(--air-border);
  border-radius: 20px;
  background: var(--air-surface);
  padding: 28px;
  box-shadow: none;
}

.ui-v10 .pay-card-screen::before,
.ui-v10 .pay-card-screen::after {
  display: none !important;
}

.ui-v10 .card-section-title {
  margin-bottom: 22px;
}

.ui-v10 .card-section-title small {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 520;
  letter-spacing: 0;
  text-transform: none;
}

.ui-v10 .card-section-title h1 {
  font-size: 23px;
  font-weight: 670;
  text-transform: none;
}

.ui-v10 .card-section-title > button,
.ui-v10 .issue-another-card {
  min-height: 38px;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 560;
}

.ui-v10 .premium-card.minimal-card {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 23px !important;
  background: #121418 !important;
  color: #ffffff !important;
  box-shadow: 0 28px 58px -32px rgba(7, 9, 14, 0.62) !important;
}

.ui-v10 .premium-card.minimal-card.product-universal {
  background: #e9e8e3 !important;
  color: #101216 !important;
  border-color: rgba(8, 9, 10, 0.1) !important;
}

.ui-v10 .premium-card.minimal-card::before,
.ui-v10 .premium-card.minimal-card::after {
  display: none !important;
}

.ui-v10 .card-flat-shape {
  border-radius: 0 !important;
  transform: none !important;
}

.ui-v10 .card-flat-shape.shape-one {
  width: 47% !important;
  height: 116% !important;
  top: -8% !important;
  right: -2% !important;
  left: auto !important;
  bottom: auto !important;
  background: #b9c6ff !important;
  clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%) !important;
}

.ui-v10 .card-flat-shape.shape-two {
  width: 63% !important;
  height: 7px !important;
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  background: #7dd7bd !important;
}

.ui-v10 .premium-card.minimal-card.product-universal .card-flat-shape.shape-one {
  background: #111317 !important;
}

.ui-v10 .premium-card.minimal-card.product-universal .card-flat-shape.shape-two {
  background: #315ee7 !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .brand-mark span,
.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-secret,
.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-secret small,
.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-secret b {
  color: #ffffff !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-product-label {
  color: #111216 !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .brand-mark img {
  filter: brightness(0) invert(1) !important;
}

.ui-v10 .premium-card.minimal-card.product-universal .brand-mark span,
.ui-v10 .premium-card.minimal-card.product-universal .card-product-label,
.ui-v10 .premium-card.minimal-card.product-universal .card-secret,
.ui-v10 .premium-card.minimal-card.product-universal .card-secret small,
.ui-v10 .premium-card.minimal-card.product-universal .card-secret b {
  color: #101216 !important;
}

.ui-v10 .card-quick-row,
.ui-v10 .pay-balance,
.ui-v10 .pay-main-buttons {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ui-v10 .card-quick-row {
  align-items: center;
  gap: 12px;
}

.ui-v10 .active-card-product {
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--air-text-soft);
  padding: 0;
  font-size: 12px;
  font-weight: 560;
}

.ui-v10 .active-card-product::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: var(--air-success);
  box-shadow: 0 0 0 4px var(--air-success-soft);
}

.ui-v10 .details-trigger {
  min-height: 38px;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 560;
  box-shadow: none;
  backdrop-filter: none;
}

.ui-v10 .details-trigger:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
}

.ui-v10 .pay-balance {
  gap: 2px;
}

.ui-v10 .pay-balance small {
  color: var(--air-text-faint);
  font-size: 12px;
}

.ui-v10 .pay-balance strong {
  color: var(--air-text);
  font-size: clamp(39px, 4.4vw, 50px);
  font-weight: 700;
}

.ui-v10 .pay-balance > span {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10 .pay-main-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px;
}

.ui-v10 .pay-main-buttons button,
.ui-v10 .pay-main-buttons button:first-child,
.ui-v10 .pay-main-buttons button:nth-child(2),
.ui-v10 .pay-main-buttons button:last-child {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 590;
}

.ui-v10 .pay-main-buttons button:first-child {
  border-color: var(--air-text);
  background: var(--air-text);
  color: var(--air-bg);
}

.ui-v10 .pay-main-buttons button svg,
.ui-v10 .pay-main-buttons .topup-plus-icon {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  padding: 0;
}

.ui-v10 .pay-main-buttons button:hover:not(:disabled),
.ui-v10 .pay-main-buttons button:first-child:hover:not(:disabled) {
  border-color: var(--air-border-strong);
  background: var(--air-surface-muted);
  color: var(--air-text);
  box-shadow: none;
  transform: none;
}

/* ───────────────────────────── Modal shell ───────────────────────────── */

.modal-backdrop:has(.ui-v10-modal) {
  align-items: center;
  overflow-y: auto;
  background: rgba(8, 9, 10, 0.52);
  padding: 24px;
  backdrop-filter: blur(12px);
}

.ui-v10-modal.modal-card {
  width: min(580px, 100%);
  max-height: min(880px, calc(100dvh - 48px));
  overflow-y: auto;
  border: 1px solid var(--air-border);
  border-radius: 20px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 24px;
  box-shadow: var(--air-shadow-modal);
  scrollbar-width: thin;
}

.ui-v10-modal.modal-wide,
.ui-v10-modal.modal-wide:has(.guide-modal-v2) {
  width: min(720px, 100%);
}

.ui-v10-modal .modal-head {
  min-height: 48px;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
  border: 0;
  padding: 0;
}

.ui-v10-modal .modal-head h2 {
  color: var(--air-text);
  font-size: 23px;
  font-weight: 670;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.ui-v10-modal .modal-head p {
  max-width: 520px;
  margin-top: 4px;
  color: var(--air-text-soft);
  font-size: 13px;
  line-height: 1.45;
}

.ui-v10-modal .icon-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--air-border);
  border-radius: 50%;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  font-size: 21px;
}

.ui-v10-modal .icon-button:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface-muted);
  color: var(--air-text);
}

.ui-v10-modal input,
.ui-v10-modal select,
.ui-v10-modal textarea {
  color: var(--air-text);
}

/* ───────────────────────────── Service payment dialog ───────────────────────────── */

.ui-v10-modal .guide-modal-v2 {
  gap: 14px;
}

.ui-v10-modal .service-guide-head {
  min-height: 70px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--air-border);
  border-radius: 15px;
  background: var(--air-surface);
  padding: 10px 12px;
}

.ui-v10-modal .service-guide-head .service-logo {
  width: 44px;
  height: 44px;
  border: 0 !important;
  background: transparent !important;
}

.ui-v10-modal .service-guide-head .service-logo img {
  width: 40px;
  height: 40px;
  border-radius: 0;
}

.ui-v10-modal .service-guide-head small {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 520;
}

.ui-v10-modal .service-guide-head h3 {
  margin-top: 2px;
  color: var(--air-text);
  font-size: 17px;
  font-weight: 650;
}

.ui-v10-modal .service-status {
  min-height: 26px;
  border: 1px solid var(--air-border);
  border-radius: 8px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 580;
}

.ui-v10-modal .service-status.cardless {
  border-color: color-mix(in srgb, var(--air-success) 20%, transparent);
  background: var(--air-success-soft);
  color: var(--air-success);
}

.ui-v10-modal .service-plan-picker {
  gap: 9px;
}

.ui-v10-modal .service-plan-heading b {
  font-size: 14px;
  font-weight: 620;
}

.ui-v10-modal .service-plan-heading small {
  font-size: 12px;
}

.ui-v10-modal .service-plan-grid {
  gap: 8px;
}

.ui-v10-modal .service-plan-grid > button {
  min-height: 70px;
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 11px 12px;
  box-shadow: none;
}

.ui-v10-modal .service-plan-grid > button:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
}

.ui-v10-modal .service-plan-grid > button.active {
  border-color: var(--air-text);
  background: var(--air-surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--air-text) 6%, transparent);
}

.ui-v10-modal .service-plan-grid > button b,
.ui-v10-modal .service-plan-grid > button strong {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 650;
}

.ui-v10-modal .service-plan-grid > button small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .service-plan-grid > button > i {
  background: var(--air-text);
}

.ui-v10-modal .service-region-note {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--air-warning) 16%, transparent);
  border-radius: 13px;
  background: var(--air-warning-soft);
  color: var(--air-warning);
  padding: 11px 12px;
}

.ui-v10-modal .service-region-note > span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
}

.ui-v10-modal .service-region-note p {
  color: inherit;
  font-size: 13px;
  line-height: 1.48;
}

.ui-v10-modal .guide-mode-tabs {
  gap: 4px;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
  padding: 4px;
}

.ui-v10-modal .guide-mode-tabs > button {
  min-height: 62px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 10px;
  border-radius: 10px;
  color: var(--air-text-soft);
  padding: 9px 11px;
}

.ui-v10-modal .guide-mode-tabs > button.active {
  background: var(--air-surface);
  color: var(--air-text);
  box-shadow: var(--shadow-xs);
}

.ui-v10-modal .guide-mode-tabs > button > span {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--air-text);
  color: var(--air-bg);
  font-size: 11px;
}

.ui-v10-modal .guide-mode-tabs > button > span img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.ui-v10-modal .guide-mode-tabs b {
  font-size: 13px;
  font-weight: 620;
}

.ui-v10-modal .guide-mode-tabs small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .service-wallet-line {
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 12px 13px;
}

.ui-v10-modal .service-wallet-line small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .service-wallet-line strong {
  color: var(--air-text);
  font-size: 17px;
}

.ui-v10-modal .service-wallet-line button {
  min-height: 38px;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 580;
}

.ui-v10-modal .service-order-fields {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.34fr);
  gap: 10px;
}

.ui-v10-modal .service-order-fields > label {
  gap: 7px;
}

.ui-v10-modal .service-order-fields > label > span {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 580;
}

.ui-v10-modal .service-order-fields input {
  height: 48px;
  border: 1px solid var(--air-border);
  border-radius: 11px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0 12px;
  font-size: 14px;
}

.ui-v10-modal .service-order-fields input:focus {
  border-color: var(--air-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-text) 7%, transparent);
}

.ui-v10-modal .service-order-fields label > small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .service-usd-input b {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .service-order-quote {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface-muted);
  padding: 4px;
}

.ui-v10-modal .service-order-quote > span {
  gap: 4px;
  padding: 10px;
}

.ui-v10-modal .service-order-quote small {
  color: var(--air-text-faint);
  font-size: 10px;
  line-height: 1.35;
}

.ui-v10-modal .service-order-quote b,
.ui-v10-modal .service-order-quote strong {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 650;
}

.ui-v10-modal .service-order-quote .total {
  border-radius: 9px;
  background: var(--air-surface);
}

.ui-v10-modal .service-order-submit,
.ui-v10-modal .wallet-submit {
  min-height: 50px;
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  font-size: 14px;
  font-weight: 600;
}

.ui-v10-modal .service-order-submit {
  position: sticky;
  z-index: 6;
  bottom: 0;
  box-shadow:
    0 18px 0 20px var(--air-surface),
    0 -12px 0 12px var(--air-surface);
}

.ui-v10-modal .service-order-submit:disabled,
.ui-v10-modal .wallet-submit:disabled {
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
  opacity: 1;
}

.ui-v10-modal .service-order-submit b {
  font-size: 13px;
}

.ui-v10-modal .service-capture-note,
.ui-v10-modal .service-balance-warning {
  font-size: 11px;
  line-height: 1.45;
}

.ui-v10-modal .guide-card-data,
.ui-v10-modal .guide-no-card,
.ui-v10-modal .guide-steps-v2 {
  border-color: var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
}

.ui-v10-modal .guide-card-summary,
.ui-v10-modal .guide-card-secrets .card-secret,
.ui-v10-modal .guide-address-copy {
  border-color: var(--air-border);
  border-radius: 11px;
  background: var(--air-surface);
}

.ui-v10-modal .guide-card-summary small,
.ui-v10-modal .guide-card-secrets .card-secret small,
.ui-v10-modal .guide-address-copy small,
.ui-v10-modal .guide-no-card small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .guide-card-summary b,
.ui-v10-modal .guide-card-secrets .card-secret b,
.ui-v10-modal .guide-address-copy b,
.ui-v10-modal .guide-no-card b {
  color: var(--air-text);
  font-size: 13px;
}

.ui-v10-modal .guide-steps-v2 h4 {
  color: var(--air-text);
  font-size: 15px;
  font-weight: 620;
}

.ui-v10-modal .guide-steps-v2 .guide-step {
  min-height: 52px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  border-color: var(--air-border);
  border-radius: 11px;
  background: var(--air-surface);
  padding: 10px 12px;
}

.ui-v10-modal .guide-steps-v2 .guide-step > span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  font-size: 11px;
}

.ui-v10-modal .guide-steps-v2 .guide-step p {
  color: var(--air-text-soft);
  font-size: 13px;
  line-height: 1.48;
}

/* General wallet/profile/payment surfaces inherit the same language. */

.ui-v10-modal .wallet-balance-hero,
.ui-v10-modal .profile-wallet-row,
.ui-v10-modal .profile-kyc-card,
.ui-v10-modal .profile-info-grid > span,
.ui-v10-modal .wallet-method-grid > button,
.ui-v10-modal .payment-method-card,
.ui-v10-modal .topup-calculator,
.ui-v10-modal .amount-card,
.ui-v10-modal .total-card {
  border-color: var(--air-border) !important;
  border-radius: 13px !important;
  background: var(--air-surface-muted) !important;
  color: var(--air-text) !important;
  box-shadow: none !important;
}

.ui-v10-modal .wallet-modal {
  gap: 14px;
}

.ui-v10-modal .wallet-balance-hero {
  gap: 3px;
  overflow: hidden;
  padding: 18px 19px;
}

.ui-v10-modal .wallet-balance-hero::after {
  display: none;
}

.ui-v10-modal .wallet-balance-hero > span {
  font-size: 11px;
  font-weight: 580;
  letter-spacing: 0.04em;
}

.ui-v10-modal .wallet-balance-hero > strong {
  font-size: 31px;
  font-weight: 690;
}

.ui-v10-modal .wallet-balance-hero > small {
  margin-top: 4px;
  font-size: 11px;
}

.ui-v10-modal .wallet-amount-field {
  gap: 6px;
}

.ui-v10-modal .wallet-amount-field > span {
  font-size: 13px;
  font-weight: 580;
}

.ui-v10-modal .wallet-amount-field > div {
  min-height: 56px;
  border: 1px solid var(--air-border);
  border-radius: 12px;
  background: var(--air-surface);
}

.ui-v10-modal .wallet-amount-field input {
  color: var(--air-text);
  font-size: 23px;
  font-weight: 680;
}

.ui-v10-modal .wallet-amount-field > small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .wallet-method-grid {
  gap: 8px;
}

.ui-v10-modal .wallet-method-grid > button {
  min-height: 70px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 10px 11px;
}

.ui-v10-modal .wallet-method-grid > button b,
.ui-v10-modal .wallet-saved-methods > button b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 620;
}

.ui-v10-modal .wallet-method-grid > button small,
.ui-v10-modal .wallet-saved-methods > button small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .wallet-method-grid > button > i,
.ui-v10-modal .wallet-saved-methods > button > i {
  width: 17px;
  height: 17px;
}

.ui-v10-modal .wallet-method-grid > button.active > i,
.ui-v10-modal .wallet-saved-methods > button.active > i {
  border: 5px solid var(--air-text);
}

.ui-v10-modal .wallet-saved-methods {
  border-top-color: var(--air-border);
}

.ui-v10-modal .wallet-saved-heading b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 620;
}

.ui-v10-modal .wallet-saved-heading small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .wallet-saved-methods > button {
  min-height: 58px;
  border-color: var(--air-border);
  border-radius: 12px;
  background: var(--air-surface);
}

.ui-v10-modal .wallet-quote {
  border-color: var(--air-border);
  border-radius: 13px;
  background: var(--air-surface-muted);
}

.ui-v10-modal .wallet-quote small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .wallet-quote b {
  color: var(--air-text);
  font-size: 13px;
}

.ui-v10-modal .wallet-submit {
  position: sticky;
  z-index: 6;
  bottom: 0;
  box-shadow:
    0 18px 0 20px var(--air-surface),
    0 -12px 0 12px var(--air-surface);
}

.ui-v10-modal .wallet-recent {
  border-top-color: var(--air-border);
}

.ui-v10-modal .wallet-recent > div:first-child b,
.ui-v10-modal .wallet-recent em b {
  color: var(--air-text);
  font-size: 12px;
}

.ui-v10-modal .wallet-recent > div:first-child small,
.ui-v10-modal .wallet-recent em small,
.ui-v10-modal .wallet-recent > p {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10-modal .wallet-method-grid > button.active,
.ui-v10-modal .payment-method-card.active {
  border-color: var(--air-text) !important;
  background: var(--air-surface) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--air-text) 6%, transparent) !important;
}

.ui-v10-modal .profile-person b,
.ui-v10-modal .profile-wallet-row strong,
.ui-v10-modal .profile-kyc-card b,
.ui-v10-modal .profile-info-grid b,
.ui-v10-modal .wallet-balance-hero strong {
  color: var(--air-text);
}

.ui-v10-modal .profile-person small,
.ui-v10-modal .profile-wallet-row small,
.ui-v10-modal .profile-kyc-card small,
.ui-v10-modal .profile-info-grid small,
.ui-v10-modal .profile-safety-note,
.ui-v10-modal .wallet-balance-hero small,
.ui-v10-modal .wallet-balance-hero > span {
  color: var(--air-text-faint);
  font-size: 12px;
}

/* ───────────────────────────── User dropdown ───────────────────────────── */

.ui-v10 .user-dropdown {
  width: min(320px, calc(100vw - 24px));
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface);
  padding: 8px;
  box-shadow: var(--air-shadow-modal);
}

.ui-v10 .user-dropdown-profile,
.ui-v10 .user-dropdown-wallet,
.ui-v10 .user-dropdown-kyc,
.ui-v10 .user-dropdown-links button {
  border-color: var(--air-border);
  border-radius: 10px;
}

.ui-v10 .user-dropdown-links button {
  min-height: 42px;
  color: var(--air-text-soft);
}

.ui-v10 .user-dropdown-links button:hover {
  background: var(--air-surface-muted);
  color: var(--air-text);
}

.ui-v10 .user-dropdown-profile {
  min-height: 64px;
}

.ui-v10 .user-dropdown-profile b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 620;
}

.ui-v10 .user-dropdown-profile small {
  color: var(--air-text-faint);
  font-size: 11px;
}

.ui-v10 .user-dropdown-wallet {
  min-height: 54px;
}

.ui-v10 .user-dropdown-wallet small,
.ui-v10 .user-dropdown-kyc small {
  color: var(--air-text-faint);
  font-size: 10px;
}

.ui-v10 .user-dropdown-wallet b,
.ui-v10 .user-dropdown-kyc b {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 620;
}

.ui-v10 .user-dropdown-kyc {
  min-height: 55px;
}

.ui-v10 .user-dropdown-links button,
.ui-v10 .user-logout {
  min-height: 44px;
  font-size: 13px;
  font-weight: 560;
}

.ui-v10 .user-preference-block {
  min-height: 43px;
}

.ui-v10 .user-preference-block > span {
  color: var(--air-text-soft);
  font-size: 11px;
  font-weight: 560;
}

.ui-v10 .preference-segment {
  border-radius: 9px;
  background: var(--air-surface-muted);
}

.ui-v10 .preference-segment button {
  min-height: 30px;
  border-radius: 7px;
  color: var(--air-text-soft);
  font-size: 11px;
  font-weight: 580;
}

.ui-v10 .preference-segment button.active {
  background: var(--air-surface);
  color: var(--air-text);
  box-shadow: none;
}

/* ───────────────────────────── Dark theme adjustments ───────────────────────────── */

html[data-app-theme="dark"] .ui-v10 .pay-home-topbar {
  background: rgba(10, 10, 11, 0.92);
}

html[data-app-theme="dark"] .ui-v10 .card-offer-banner {
  border-color: var(--air-border) !important;
  background: var(--air-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="dark"] .ui-v10 .offer-card-art,
html[data-app-theme="dark"] .ui-v10 .premium-card.minimal-card {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #15171c !important;
}

html[data-app-theme="dark"] .ui-v10 .offer-service-stack .service-logo {
  border-color: var(--air-surface) !important;
  background: var(--air-surface) !important;
}

html[data-app-theme="dark"] .ui-v10 .service-tile-mode.cardless,
html[data-app-theme="dark"] .ui-v10-modal .service-status.cardless {
  border-color: rgba(98, 200, 154, 0.22);
  background: rgba(38, 166, 105, 0.14);
  color: #74d5a9;
}

html[data-app-theme="dark"] .ui-v10 .topbar-wallet-pill > i,
html[data-app-theme="dark"] .ui-v10 .offer-card-action button,
html[data-app-theme="dark"] .ui-v10-modal .service-wallet-line button,
html[data-app-theme="dark"] .ui-v10-modal .service-order-submit,
html[data-app-theme="dark"] .ui-v10-modal .wallet-submit {
  color: #0a0a0b;
}

/* ───────────────────────────── Responsive ───────────────────────────── */

@media (max-width: 1080px) {
  .ui-v10.pay-home {
    width: min(100% - 36px, 1120px);
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 18px 22px;
  }

  .ui-v10 .card-offer-banner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
    column-gap: 30px;
    padding: 34px;
  }

  .ui-v10 .offer-card-copy h2 {
    font-size: clamp(36px, 4vw, 45px);
  }

  .ui-v10 .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .ui-v10.pay-home {
    width: min(100% - 28px, 760px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "greeting"
      "offer"
      "services"
      "card";
    gap: 16px;
    padding-bottom: 98px;
  }

  .ui-v10 .pay-side-nav {
    display: none;
  }

  .ui-v10 .pay-dashboard-greeting {
    min-height: 70px;
    padding-top: 19px;
  }

  .ui-v10 .card-offer-banner {
    grid-template-columns: minmax(0, 1fr) minmax(285px, 340px);
    grid-template-areas:
      "copy stage"
      "action action";
    padding: 30px;
  }

  .ui-v10 .offer-card-copy h2 {
    font-size: clamp(32px, 5vw, 40px);
  }

  .ui-v10 .services-home {
    padding-top: 8px;
  }

  .ui-v10 .miniapp-bottom-nav {
    border: 1px solid var(--air-border);
    background: color-mix(in srgb, var(--air-surface) 92%, transparent);
    box-shadow: 0 10px 40px -28px rgba(8, 9, 10, 0.42);
    backdrop-filter: blur(16px);
  }

  .ui-v10 .miniapp-bottom-nav button {
    color: var(--air-text-soft);
  }

  .ui-v10 .miniapp-bottom-nav button:first-child {
    background: var(--air-text);
    color: var(--air-bg);
  }
}

@media (max-width: 680px) {
  .ui-v10.pay-home {
    width: calc(100% - 24px);
    gap: 14px;
  }

  .ui-v10 .pay-home-topbar {
    min-height: 62px;
  }

  .ui-v10 .pay-brand .brand-mark span {
    font-size: 14px;
  }

  .ui-v10 .topbar-wallet-pill {
    min-width: 126px;
    height: 42px;
    padding-left: 12px;
  }

  .ui-v10 .topbar-wallet-pill > i {
    width: 32px;
    height: 32px;
  }

  .ui-v10 .user-avatar-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex-basis: 42px;
  }

  .ui-v10 .user-avatar-button > img,
  .ui-v10 .user-avatar-button > span {
    width: 32px !important;
    min-width: 32px;
    height: 32px !important;
    flex-basis: 32px;
  }

  .ui-v10 .pay-dashboard-greeting h1 {
    gap: 6px;
    font-size: 25px;
  }

  .ui-v10 .pay-dashboard-greeting p {
    font-size: 13px;
  }

  .ui-v10 .card-offer-banner {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "stage"
      "action";
    gap: 24px;
    border-radius: 18px;
    padding: 24px 20px;
  }

  .ui-v10 .offer-card-copy h2 {
    margin: 14px 0 11px;
    font-size: clamp(33px, 9.5vw, 42px);
    line-height: 1;
  }

  .ui-v10 .offer-card-copy p {
    font-size: 14px;
    line-height: 1.52;
  }

  .ui-v10 .offer-card-highlight {
    min-height: 44px;
    margin-top: 18px;
  }

  .ui-v10 .offer-card-highlight > span b {
    font-size: 12px;
  }

  .ui-v10 .offer-card-highlight > span small {
    font-size: 11px;
  }

  .ui-v10 .offer-card-art {
    width: min(100%, 390px);
    border-radius: 20px;
    transform: none;
  }

  .ui-v10 .offer-card-caption {
    width: min(100%, 390px);
    margin-top: 12px;
  }

  .ui-v10 .offer-card-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding-top: 19px;
  }

  .ui-v10 .offer-card-price strong {
    font-size: 29px;
  }

  .ui-v10 .offer-card-status {
    min-width: 0;
    border-left: 0;
    padding-left: 0;
  }

  .ui-v10 .services-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 15px;
  }

  .ui-v10 .services-head h2 {
    font-size: 25px;
  }

  .ui-v10 .service-filter-row {
    width: 100%;
    border-radius: 12px;
  }

  .ui-v10 .services-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ui-v10 .service-tile,
  .ui-v10 .service-tile:nth-child(n) {
    min-height: 76px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    border-radius: 13px;
    padding: 12px 14px !important;
  }

  .ui-v10 .service-tile.alpina-fulfilled {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 12px 13px !important;
  }

  .ui-v10 .service-tile .service-logo,
  .ui-v10 .service-tile .service-logo.with-image {
    width: 40px;
    height: 40px;
  }

  .ui-v10 .service-tile .service-logo img,
  .ui-v10 .service-tile .service-logo.with-image img {
    width: 36px;
    height: 36px;
  }

  .ui-v10 .service-tile b {
    font-size: 15px;
  }

  .ui-v10 .service-tile small {
    font-size: 12px;
    -webkit-line-clamp: 1;
  }

  .ui-v10 .service-tile-mode.cardless {
    position: static;
    justify-self: end;
    white-space: nowrap;
  }

  .modal-backdrop:has(.ui-v10-modal) {
    align-items: flex-end;
    padding: 0;
  }

  .ui-v10-modal.modal-card,
  .ui-v10-modal.modal-wide,
  .ui-v10-modal.modal-wide:has(.guide-modal-v2) {
    width: 100%;
    max-height: calc(100dvh - 10px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px 28px;
  }

  .ui-v10-modal .modal-head {
    margin-bottom: 17px;
  }

  .ui-v10-modal .modal-head h2 {
    font-size: 21px;
  }

  .ui-v10-modal .service-guide-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ui-v10-modal .service-guide-head .service-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ui-v10-modal .service-plan-grid {
    grid-template-columns: repeat(3, minmax(142px, 1fr));
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .ui-v10-modal .service-plan-grid::-webkit-scrollbar {
    display: none;
  }

  .ui-v10-modal .service-order-fields {
    grid-template-columns: 1fr;
  }

  .ui-v10-modal .service-order-quote {
    grid-template-columns: 1fr 1fr;
  }

  .ui-v10-modal .service-order-quote .total {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .ui-v10.pay-home {
    width: calc(100% - 20px);
  }

  .ui-v10 .topbar-account-actions {
    gap: 6px;
  }

  .ui-v10 .topbar-wallet-pill {
    min-width: 118px;
  }

  .ui-v10 .topbar-wallet-pill small {
    display: none;
  }

  .ui-v10 .pay-dashboard-greeting h1 {
    font-size: 23px;
  }

  .ui-v10 .pay-dashboard-greeting p {
    display: none;
  }

  .ui-v10 .offer-card-highlight > span small {
    display: none;
  }

  .ui-v10 .offer-card-action {
    grid-template-columns: 1fr;
  }

  .ui-v10 .offer-card-action button {
    width: 100%;
  }

  .ui-v10 .service-tile.alpina-fulfilled {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 12px 13px 37px !important;
  }

  .ui-v10 .service-tile-mode.cardless {
    position: absolute;
    right: 10px;
    bottom: 9px;
  }

  .ui-v10 .premium-card.minimal-card > .card-secret:not(.compact) b {
    font-size: 19px !important;
    letter-spacing: 0.055em !important;
  }

  .ui-v10 .premium-card.minimal-card .premium-card-bottom {
    gap: 9px;
  }

  .ui-v10 .premium-card.minimal-card .card-secret.compact b {
    font-size: 9px !important;
  }
}

/* ───────────────────────────── Issued card — final composition ───────────────────────────── */

.ui-v10 .card-section-title {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.ui-v10 .card-section-title h1 {
  margin: 3px 0 0 !important;
  color: var(--air-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 24px !important;
  font-weight: 660 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
  font-variation-settings: normal !important;
}

.ui-v10 .pay-card-center {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 430px) minmax(270px, 1fr) !important;
  grid-template-rows: auto auto 1fr !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: 15px 34px !important;
  margin: 0 !important;
}

.ui-v10 .pay-card-center > .premium-card-scene {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100% !important;
  align-self: center;
}

.ui-v10 .pay-card-tabs {
  grid-column: 1;
  grid-row: 4;
}

.ui-v10 .card-quick-row {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-start;
}

.ui-v10 .pay-balance {
  grid-column: 2;
  grid-row: 2;
  justify-items: start;
  align-content: start;
  margin: 9px 0 0;
}

.ui-v10 .pay-main-buttons {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  align-self: end;
}

.ui-v10 .active-card-product {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.ui-v10 .premium-card.minimal-card {
  border-radius: 20px !important;
  background: #111216 !important;
  box-shadow: 0 22px 44px -30px rgba(8, 9, 10, 0.58) !important;
}

.ui-v10 .card-flat-shape.shape-one {
  width: 44% !important;
  background: #dce5ff !important;
}

.ui-v10 .card-flat-shape.shape-two {
  height: 5px !important;
  background: #82d8bb !important;
}

.ui-v10 .pay-balance small {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.ui-v10 .pay-main-buttons button:nth-child(2),
.ui-v10 .pay-main-buttons button:last-child {
  border-color: var(--air-border) !important;
  background: var(--air-surface) !important;
  color: var(--air-text) !important;
}

/* ───────────────────────────── Card top-up v10 ───────────────────────────── */

.ui-v10-modal .topup-simple,
.ui-v10-modal .topup-simple-body {
  display: grid;
  gap: 14px;
}

.ui-v10-modal .topup-simple-head {
  display: none;
}

.ui-v10-modal .input-label {
  gap: 7px;
  color: var(--air-text);
  font-size: 13px;
  font-weight: 580;
}

.ui-v10-modal .topup-amount-shell {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  border: 1px solid var(--air-border) !important;
  border-radius: 12px !important;
  background: var(--air-surface) !important;
  padding: 0 15px;
  box-shadow: none !important;
}

.ui-v10-modal .topup-amount-shell:focus-within {
  border-color: var(--air-text) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-text) 7%, transparent) !important;
}

.ui-v10-modal .input-label.amount .topup-amount-shell input {
  width: 100%;
  min-height: 56px;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0;
  color: var(--air-text);
  font-family: var(--font-sans);
  font-size: 25px;
  font-weight: 680;
  letter-spacing: -0.025em;
  box-shadow: none !important;
  font-variation-settings: normal;
}

.ui-v10-modal .topup-amount-shell > span {
  position: static;
  color: var(--air-text-soft);
  font-size: 17px;
  font-weight: 580;
  transform: none;
}

.ui-v10-modal .promo-box {
  display: grid;
  gap: 7px;
}

.ui-v10-modal .promo-box > span {
  color: var(--air-text) !important;
  font-size: 13px;
  font-weight: 580;
}

.ui-v10-modal .promo-box > span svg {
  display: none;
}

.ui-v10-modal .promo-box > div {
  min-height: 50px;
  border: 1px solid var(--air-border) !important;
  border-radius: 12px !important;
  background: var(--air-surface) !important;
  padding: 0 13px;
  box-shadow: none !important;
}

.ui-v10-modal .promo-box input {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 560;
  letter-spacing: 0.025em;
}

.ui-v10-modal .promo-box small {
  font-size: 12px;
}

.ui-v10-modal .topup-live-result {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0 !important;
  border-top: 1px solid var(--air-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 0 0;
  box-shadow: none !important;
}

.ui-v10-modal .topup-live-result span {
  color: var(--air-text-soft);
  font-size: 13px;
  font-weight: 520;
}

.ui-v10-modal .topup-live-result strong {
  color: var(--air-text);
  font-size: 20px;
  font-weight: 670;
  letter-spacing: -0.02em;
}

.ui-v10-modal .topup-next-button {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 620;
  box-shadow: none;
}

.ui-v10-modal .topup-next-button span {
  grid-column: 2;
  justify-self: center;
  padding: 0;
}

.ui-v10-modal .topup-next-button svg {
  grid-column: 3;
  justify-self: end;
}

.ui-v10-modal .topup-next-button:disabled {
  border-color: var(--air-border);
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
  opacity: 1;
}

.ui-v10-modal .topup-step-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-v10-modal .topup-step-toolbar button {
  border: 0;
  background: transparent;
  color: var(--air-text-soft);
  padding: 4px 0;
  font-size: 12px;
  font-weight: 560;
}

.ui-v10-modal .topup-step-toolbar span {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 520;
  letter-spacing: 0;
  text-transform: none;
}

.ui-v10-modal .topup-total-card {
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0;
  box-shadow: none;
}

.ui-v10-modal .topup-total-main {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
}

.ui-v10-modal .topup-total-main span {
  color: var(--air-text-soft);
  font-size: 13px;
  font-weight: 520;
}

.ui-v10-modal .topup-total-main strong {
  color: var(--air-text);
  font-family: var(--font-sans);
  font-size: 27px;
  font-weight: 690;
  letter-spacing: -0.035em;
  font-variation-settings: normal;
}

.ui-v10-modal .topup-total-rows {
  display: grid;
  border-top: 1px solid var(--air-border);
  padding: 7px 16px 10px;
}

.ui-v10-modal .topup-total-rows > div {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 500;
}

.ui-v10-modal .topup-total-rows b {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 620;
}

.ui-v10-modal .topup-total-rows .discount b {
  color: var(--air-success);
}

.ui-v10-modal .topup-total-rows .topup-card-credit {
  min-height: 40px;
  margin-top: 5px;
  border-top: 1px solid var(--air-border);
  padding-top: 7px;
}

.ui-v10-modal .topup-total-rows .topup-card-credit b {
  color: var(--air-text);
  font-size: 15px;
}

.ui-v10-modal .payment-method-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
}

.ui-v10-modal .payment-method-heading b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 620;
}

.ui-v10-modal .payment-method-heading span {
  color: var(--air-text-faint);
  font-size: 12px;
}

.ui-v10-modal .payment-method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ui-v10-modal .payment-method-grid .payment-method-card,
.ui-v10-modal .payment-method-grid .payment-method-card:last-child {
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  grid-column: auto;
  border: 1px solid var(--air-border) !important;
  border-radius: 13px !important;
  background: var(--air-surface) !important;
  color: var(--air-text);
  padding: 10px 12px;
  box-shadow: none !important;
  transform: none !important;
}

.ui-v10-modal .payment-method-grid .payment-method-card:hover:not(:disabled) {
  border-color: var(--air-border-strong) !important;
}

.ui-v10-modal .payment-method-grid .payment-method-card.active {
  border-color: var(--air-text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--air-text) 6%, transparent) !important;
}

.ui-v10-modal .payment-brand {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-v10-modal .payment-brand-sbp svg {
  width: 31px;
  height: 31px;
}

.ui-v10-modal .payment-brand-crypto svg {
  width: 34px;
  height: 34px;
}

.ui-v10-modal .payment-method-copy b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 620;
}

.ui-v10-modal .payment-method-copy small {
  margin-top: 3px;
  color: var(--air-text-faint);
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
}

.ui-v10-modal .saved-payment-methods {
  gap: 7px;
  border-top: 1px solid var(--air-border);
  padding-top: 13px;
}

.ui-v10-modal .saved-payment-methods > span {
  color: var(--air-text-soft) !important;
  font-size: 12px;
  font-weight: 580;
}

.ui-v10-modal .saved-payment-methods button {
  min-height: 54px;
  border: 1px solid var(--air-border) !important;
  border-radius: 12px !important;
  background: var(--air-surface) !important;
  color: var(--air-text) !important;
  padding: 0 12px;
  font-size: 13px;
  box-shadow: none;
}

.ui-v10-modal .payment-confirm-button {
  position: static;
  z-index: auto;
  bottom: auto;
  margin-top: 2px;
  box-shadow: none;
}

/* ───────────────────────────── Card issue and KYC v10 ───────────────────────────── */

.ui-v10-modal .card-product-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ui-v10-modal .card-product-option {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface);
  padding: 12px;
  box-shadow: none;
}

.ui-v10-modal .card-product-option.recommended {
  border-color: var(--air-border-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--air-text) 5%, transparent);
}

.ui-v10-modal .product-card-art {
  position: relative;
  aspect-ratio: 1.586;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: #111216 !important;
  color: #fafafa !important;
  padding: 18px;
  box-shadow: none;
}

.ui-v10-modal .product-card-art.product-universal {
  border-color: rgba(8, 9, 10, 0.08);
  background: #e8edf3 !important;
  color: #08090a !important;
}

.ui-v10-modal .product-card-art::before {
  content: "";
  position: absolute;
  display: block !important;
  inset: -6% -3% -6% auto !important;
  width: 46% !important;
  height: 112% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #dce5ff !important;
  opacity: 1 !important;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%) !important;
  transform: none !important;
}

.ui-v10-modal .product-card-art::after {
  content: "";
  position: absolute;
  display: block !important;
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 64% !important;
  height: 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #82d8bb !important;
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}

.ui-v10-modal .product-card-art.product-universal::before {
  background: #111317 !important;
  opacity: 1 !important;
}

.ui-v10-modal .product-card-art.product-universal::after {
  background: #315ee7 !important;
}

.ui-v10-modal .product-card-art > span:not(.card-network-mark) {
  position: absolute;
  z-index: 3;
  top: 17px;
  right: 17px;
  color: inherit;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.ui-v10-modal .product-card-art.product-subscription > span:not(.card-network-mark) {
  color: #111216;
}

.ui-v10-modal .product-card-art.product-universal > span:not(.card-network-mark),
.ui-v10-modal .product-card-art.product-universal .card-network-mark.visa {
  color: #ffffff;
}

.ui-v10-modal .product-card-art > b {
  position: absolute;
  z-index: 3;
  left: 17px;
  bottom: 17px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.ui-v10-modal .product-card-art.product-subscription > b {
  color: #ffffff !important;
}

.ui-v10-modal .product-card-art.product-universal > b {
  color: #111216 !important;
}

.ui-v10-modal .product-card-art .card-network-mark {
  position: absolute !important;
  z-index: 3;
  right: 17px !important;
  bottom: 15px !important;
  left: auto !important;
  top: auto !important;
}

.ui-v10-modal .product-priority {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 20px;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(8, 9, 10, 0.62);
  color: #ffffff;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  backdrop-filter: blur(8px);
}

.ui-v10-modal .product-option-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 0 2px;
}

.ui-v10-modal .product-option-head h3 {
  margin: 0;
  color: var(--air-text);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}

.ui-v10-modal .product-option-head p {
  margin: 5px 0 0;
  color: var(--air-text-soft);
  font-size: 12px;
  line-height: 1.45;
}

.ui-v10-modal .product-option-head > strong {
  color: var(--air-text);
  font-size: 17px;
  font-weight: 680;
  white-space: nowrap;
}

.ui-v10-modal .product-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 0;
  padding: 0 2px;
}

.ui-v10-modal .product-feature-row span {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--air-text-faint);
  padding: 0;
  font-size: 11px;
  font-weight: 520;
}

.ui-v10-modal .product-feature-row span + span::before {
  content: "·";
  margin: 0 7px;
  color: var(--air-border-strong);
}

.ui-v10-modal .product-select-button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr 18px;
  align-items: center;
  margin: 0;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text) !important;
  color: var(--air-bg) !important;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.ui-v10-modal .product-select-button span {
  justify-self: center;
  padding-left: 18px;
}

.ui-v10-modal .kyc-loading {
  min-height: 220px;
  color: var(--air-text-soft);
  font-size: 14px;
}

.ui-v10-modal .kyc-form,
.ui-v10-modal .simple-purchase {
  display: grid;
  gap: 16px;
}

.ui-v10-modal .flow-back-button {
  min-height: 36px;
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--air-text-soft);
  padding: 0;
  font-size: 13px;
  font-weight: 560;
}

.ui-v10-modal .kyc-note,
.ui-v10-modal .kyc-summary {
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface-muted);
  padding: 13px 14px;
  box-shadow: none;
}

.ui-v10-modal .kyc-note {
  display: grid;
  gap: 4px;
}

.ui-v10-modal .kyc-note b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 620;
}

.ui-v10-modal .kyc-note span {
  color: var(--air-text-soft);
  font-size: 12px;
  line-height: 1.5;
}

.ui-v10-modal .kyc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ui-v10-modal .kyc-grid .span-2 {
  grid-column: 1 / -1;
}

.ui-v10-modal .input-label input,
.ui-v10-modal .input-label select {
  min-height: 50px;
  border: 1px solid var(--air-border);
  border-radius: 11px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0 13px;
  font-size: 14px;
}

.ui-v10-modal .input-label input:focus,
.ui-v10-modal .input-label select:focus {
  outline: 0;
  border-color: var(--air-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-text) 7%, transparent);
}

.ui-v10-modal .kyc-consent {
  display: flex;
  gap: 10px;
  color: var(--air-text-soft);
  font-size: 12px;
  line-height: 1.5;
}

.ui-v10-modal .kyc-consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--air-text);
}

.ui-v10-modal .kyc-summary {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.ui-v10-modal .kyc-summary > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--air-success-soft);
  color: var(--air-success);
  font-size: 13px;
}

.ui-v10-modal .kyc-summary b {
  color: var(--air-text);
  font-size: 13px;
}

.ui-v10-modal .kyc-summary small {
  color: var(--air-text-faint);
  font-size: 12px;
}

.ui-v10-modal .kyc-summary button {
  border: 0;
  background: transparent;
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 580;
}

.ui-v10-modal .mini-premium-card.minimal-card {
  position: relative;
  aspect-ratio: 1.586;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: #111216 !important;
  color: #fafafa !important;
  box-shadow: none;
}

.ui-v10-modal .mini-premium-card.minimal-card.product-universal {
  border-color: rgba(8, 9, 10, 0.08);
  background: #e8edf3 !important;
  color: #08090a !important;
}

.ui-v10-modal .mini-premium-card.minimal-card::before {
  display: none !important;
}

.ui-v10-modal .order-lines {
  border: 0;
  border-top: 1px solid var(--air-border);
  border-bottom: 1px solid var(--air-border);
  border-radius: 0;
  background: transparent;
  padding: 2px 0;
}

.ui-v10-modal .order-lines > span {
  min-height: 44px;
  color: var(--air-text);
  font-size: 13px;
}

.ui-v10-modal .order-lines small {
  color: var(--air-text-soft);
  font-size: 12px;
}

.ui-v10-modal .order-lines b {
  font-size: 14px;
}

.ui-v10-modal .order-lines .total b {
  font-size: 18px;
}

.ui-v10-modal .issue-pay-button,
.ui-v10-modal .kyc-form > .btn-primary {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--air-text) !important;
  color: var(--air-bg) !important;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.ui-v10-modal .provider-unavailable-note {
  margin: 0;
  color: var(--air-text-faint);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 820px) {
  .ui-v10 .pay-card-center {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 14px !important;
  }

  .ui-v10 .pay-card-center > .premium-card-scene,
  .ui-v10 .pay-card-tabs,
  .ui-v10 .card-quick-row,
  .ui-v10 .pay-balance,
  .ui-v10 .pay-main-buttons {
    grid-column: 1;
    grid-row: auto;
  }

  .ui-v10 .pay-card-center > .premium-card-scene {
    width: min(430px, 100%) !important;
    justify-self: center;
  }

  .ui-v10 .card-quick-row,
  .ui-v10 .pay-balance {
    justify-content: center;
    justify-items: center;
  }
}

@media (max-width: 680px) {
  .ui-v10-modal .card-product-picker,
  .ui-v10-modal .kyc-grid {
    grid-template-columns: 1fr;
  }

  .ui-v10-modal .kyc-grid .span-2 {
    grid-column: auto;
  }

  .ui-v10-modal .topup-total-main {
    min-height: 66px;
  }

  .ui-v10-modal .topup-total-main strong {
    font-size: 24px;
  }

  .ui-v10-modal .payment-method-heading span {
    display: none;
  }
}

/* ───────────────────────────── Authentication v10 ───────────────────────────── */

body:has(.ui-v10-auth) {
  min-height: 100dvh;
  background: #fafafa !important;
  background-image: none !important;
}

html[data-app-theme="dark"] body:has(.ui-v10-auth) {
  background: #0a0a0b !important;
  background-image: none !important;
}

.ui-v10-auth.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--air-bg) !important;
  padding: 24px;
}

.ui-v10-auth.auth-page::before,
.ui-v10-auth.auth-page::after {
  display: none !important;
}

.ui-v10-auth .auth-choice-card,
.ui-v10-auth .auth-choice-card.is-email {
  width: min(420px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  border: 1px solid var(--air-border);
  border-radius: 20px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 32px;
  box-shadow: 0 24px 70px -48px rgba(8, 9, 10, 0.42);
  scrollbar-width: none;
}

.ui-v10-auth .auth-choice-head {
  margin-bottom: 24px;
  text-align: left;
}

.ui-v10-auth .auth-wordmark {
  width: auto !important;
  height: auto !important;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 25px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--air-text) !important;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.01em;
  text-transform: none;
  overflow: visible !important;
  white-space: nowrap;
}

.ui-v10-auth .auth-wordmark::before,
.ui-v10-auth .auth-wordmark::after {
  display: none !important;
}

.ui-v10-auth .auth-wordmark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ui-v10-auth .auth-wordmark b {
  font-size: 14px;
  font-weight: 650;
}

.ui-v10-auth .auth-choice-head h1 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 680;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-transform: none;
  font-variation-settings: normal;
}

.ui-v10-auth .auth-choice-head p,
.ui-v10-auth .auth-email-head p {
  max-width: 330px;
  margin: 8px 0 0;
  color: var(--air-text-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.ui-v10-auth .auth-provider-stack {
  display: grid;
  gap: 9px;
}

.ui-v10-auth .auth-provider-native {
  min-height: 52px;
  border-radius: 999px;
}

.ui-v10-auth .telegram-native {
  position: relative;
  min-height: 52px;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 15px;
  box-shadow: none;
}

.ui-v10-auth .telegram-native > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: inherit;
  font-size: 13px;
  font-weight: 620;
}

.ui-v10-auth .telegram-native > span::before {
  display: none;
}

.ui-v10-auth .telegram-native > span img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.ui-v10-auth .auth-provider-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ui-v10-auth .auth-provider-pair button {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 580;
  box-shadow: none;
}

.ui-v10-auth .auth-provider-pair button:disabled {
  border-color: var(--air-border);
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
  opacity: 1;
}

.ui-v10-auth .auth-provider-pair button small {
  top: 4px;
  right: 8px;
  color: var(--air-text-faint);
  font-size: 7px;
  font-weight: 580;
}

.ui-v10-auth .provider-yandex,
.ui-v10-auth .provider-qr {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #df2638;
  font-size: 14px;
}

.ui-v10-auth .provider-qr {
  color: currentColor;
}

.ui-v10-auth .auth-choice-card .auth-email-entry {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.ui-v10-auth .auth-choice-card .auth-email-entry > svg:first-child {
  color: var(--air-text-soft);
}

.ui-v10-auth .auth-choice-switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 17px;
  color: var(--air-text-faint);
  font-size: 12px;
  font-weight: 500;
}

.ui-v10-auth .auth-choice-switch button,
.ui-v10-auth .auth-back {
  border: 0;
  background: transparent;
  color: var(--air-text);
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
}

.ui-v10-auth .auth-privacy {
  margin: 22px 0 0;
  color: var(--air-text-faint);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.ui-v10-auth .auth-choice-error {
  margin: 10px 0 0;
  border-radius: 10px;
  background: var(--air-danger-soft);
  color: var(--air-danger);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 560;
}

.ui-v10-auth .auth-back {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--air-text-soft);
  font-size: 12px;
}

.ui-v10-auth .auth-email-head {
  margin-bottom: 20px;
  text-align: left;
}

.ui-v10-auth .auth-email-big-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 0 18px;
  border: 1px solid var(--air-border);
  border-radius: 12px;
  background: var(--air-surface-muted);
  color: var(--air-text);
}

.ui-v10-auth .auth-email-head h2 {
  margin: 0;
  color: var(--air-text);
  font-family: var(--font-sans);
  font-size: 27px;
  font-weight: 670;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.ui-v10-auth .auth-choice-card .auth-email-form {
  display: grid;
  gap: 10px;
}

.ui-v10-auth .auth-choice-card .auth-email-field {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--air-border);
  border-radius: 12px;
  background: var(--air-surface);
  color: var(--air-text-soft);
  padding: 0 14px;
}

.ui-v10-auth .auth-choice-card .auth-email-field:focus-within {
  border-color: var(--air-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-text) 7%, transparent);
}

.ui-v10-auth .auth-choice-card .auth-email-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--air-text);
  font-size: 14px;
  font-weight: 520;
}

.ui-v10-auth .auth-choice-card .auth-email-primary {
  min-height: 52px;
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  align-items: center;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 620;
  box-shadow: none;
}

.ui-v10-auth .auth-email-primary > span:nth-last-child(2) {
  justify-self: center;
}

.ui-v10-auth .auth-email-primary > svg {
  justify-self: end;
}

.ui-v10-auth button:focus-visible,
.ui-v10-auth input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--air-text) 72%, transparent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .ui-v10-auth.auth-page {
    place-items: center;
    padding: 12px;
  }

  .ui-v10-auth .auth-choice-card,
  .ui-v10-auth .auth-choice-card.is-email {
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
    padding: 26px 20px 22px;
  }

  .ui-v10-auth .auth-wordmark {
    margin-bottom: 22px;
  }

  .ui-v10-auth .auth-choice-head h1 {
    font-size: 28px;
  }
}
/*
 * Alpina Pay v10.4
 * Quiet fintech pass: one visual hierarchy, card-only service flow,
 * VPN-style stickers, matte cards and explicit issuer restrictions.
 */

/* Service catalogue */

.ui-v10 .services-grid {
  gap: 12px;
  padding-top: 4px;
}

.ui-v10 .service-tile,
.ui-v10 .service-tile:nth-child(n),
.ui-v10 .service-tile.alpina-fulfilled {
  position: relative;
  min-height: 84px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  overflow: visible;
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface) !important;
  padding: 15px 16px !important;
}

.ui-v10 .service-tile::after {
  content: "›";
  grid-column: 3;
  color: var(--air-text-faint);
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-align: right;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.ui-v10 .service-tile:hover::after,
.ui-v10 .service-tile.active::after {
  color: var(--air-text);
  transform: translateX(2px);
}

.ui-v10 .service-tile > span:nth-of-type(2) {
  grid-column: 2;
}

.ui-v10 .service-logo,
.ui-v10 .service-logo.with-image,
.ui-v10 .service-tile .service-logo,
.ui-v10 .service-tile .service-logo.with-image {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-v10 .service-logo img,
.ui-v10 .service-logo.with-image img,
.ui-v10 .service-tile .service-logo img,
.ui-v10 .service-tile .service-logo.with-image img {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  object-fit: contain;
}

.ui-v10 .service-logo[data-service="chatgpt"] img {
  width: 31px;
  height: 31px;
}

.ui-v10 .service-logo[data-service="claude"] img {
  width: 30px;
  height: 30px;
}

.ui-v10 .service-logo[data-service="perplexity"] img,
.ui-v10 .service-logo[data-service="midjourney"] img,
.ui-v10 .service-logo[data-service="elevenlabs"] img {
  width: 29px;
  height: 29px;
}

.ui-v10 .service-logo[data-service="telegram-premium"] img,
.ui-v10 .service-logo[data-service="telegram-stars"] img {
  width: 33px;
  height: 33px;
}

.ui-v10 .service-logo[data-service="alpina-vpn"] img {
  width: 35px;
  height: 35px;
}

.ui-v10 .service-tile b {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.012em;
}

.ui-v10 .service-tile small {
  margin-top: 3px;
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 430;
}

.ui-v10 .service-tile-sticker {
  position: absolute;
  z-index: 4;
  top: -10px;
  right: 14px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: #07945d;
  color: #ffffff;
  padding: 3px 10px;
  box-shadow:
    0 0 0 3px var(--air-bg),
    0 6px 13px rgba(7, 148, 93, 0.2);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(2deg);
}

html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="chatgpt"] img,
html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="midjourney"] img,
html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="elevenlabs"] img,
html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="cursor"] img,
html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="github-copilot"] img,
html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="notion"] img,
html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="apple-id"] img,
html[data-app-theme="dark"] .ui-v10 .service-logo[data-service="steam"] img {
  filter: invert(1) brightness(1.08);
}

html[data-app-theme="dark"] .ui-v10 .service-tile-sticker {
  background: #0a9e65;
  box-shadow:
    0 0 0 3px var(--air-bg),
    0 6px 16px rgba(10, 158, 101, 0.22);
}

/* Service dialog */

.ui-v10-modal.modal-wide:has(.guide-modal-v2) {
  width: min(720px, 100%);
}

.ui-v10-modal .guide-modal-v2 {
  gap: 18px;
}

.ui-v10-modal .service-guide-head {
  min-height: 64px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid var(--air-border);
  border-radius: 0;
  background: transparent;
  padding: 0 0 17px;
}

.ui-v10-modal .service-guide-head .service-logo,
.ui-v10-modal .service-guide-head .service-logo.with-image {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0 !important;
  background: transparent !important;
}

.ui-v10-modal .service-guide-head .service-logo img,
.ui-v10-modal .service-guide-head .service-logo.with-image img {
  width: 31px;
  height: 31px;
  border-radius: 0;
  object-fit: contain;
}

.ui-v10-modal .service-guide-head h3 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.ui-v10-modal .service-status {
  min-height: 25px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 560;
}

.ui-v10-modal .service-status.cardless {
  border-color: transparent;
  background: var(--air-success-soft);
}

.ui-v10-modal .service-region-note {
  grid-template-columns: 28px minmax(0, 1fr);
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
}

.ui-v10-modal .service-region-note > span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.ui-v10-modal .service-order-flow,
.ui-v10-modal .service-card-guide {
  display: grid;
  gap: 14px;
}

.ui-v10-modal .service-wallet-line {
  border-radius: 12px;
  padding: 11px 13px;
}

.ui-v10-modal .service-order-submit {
  position: static;
  z-index: auto;
  bottom: auto;
  margin-top: 2px;
  box-shadow: none;
}

.ui-v10-modal .service-order-submit:disabled {
  border: 1px solid var(--air-border);
}

.ui-v10-modal .service-capture-note {
  margin: -3px 0 0;
  color: var(--air-text-faint);
  text-align: center;
}

.ui-v10-modal .guide-card-data,
.ui-v10-modal .guide-no-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.ui-v10-modal .guide-no-card > span,
.ui-v10-modal .guide-no-card > button {
  background: var(--air-text);
  color: var(--air-bg) !important;
}

.ui-v10-modal .guide-no-card > button:disabled {
  opacity: 0.68;
}

.ui-v10-modal .guide-card-summary {
  border-radius: 13px;
  background: var(--air-surface-muted);
}

.ui-v10-modal .guide-card-secrets {
  gap: 8px;
}

.ui-v10-modal .guide-card-secrets .card-secret,
.ui-v10-modal .guide-address-copy {
  border: 1px solid var(--air-border);
  border-radius: 11px;
  background: var(--air-surface);
}

.ui-v10-modal .guide-reveal-card,
.ui-v10-modal .guide-official-link {
  min-height: 48px;
  border-radius: 999px;
}

.ui-v10-modal .guide-steps-v2 {
  border: 0;
  border-top: 1px solid var(--air-border);
  border-radius: 0;
  background: transparent;
  padding: 17px 0 0;
}

.ui-v10-modal .guide-step {
  border: 0;
  background: transparent;
  padding: 8px 0;
}

.ui-v10-modal .guide-step > span {
  background: var(--air-surface-muted);
}

/* Empty-state hero and card */

.ui-v10 .card-offer-banner {
  min-height: 360px;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
  column-gap: clamp(36px, 5vw, 68px);
  border-radius: 20px;
  padding: clamp(34px, 4vw, 48px);
}

.ui-v10 .offer-card-copy h2 {
  max-width: 590px;
  margin: 15px 0 13px;
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 675;
  line-height: 1.02;
}

.ui-v10 .offer-card-copy p {
  max-width: 590px;
  font-size: 15px;
  line-height: 1.58;
}

.ui-v10 .offer-card-art {
  width: min(100%, 420px);
  border: 1px solid rgba(17, 18, 20, 0.11);
  border-radius: 21px;
  background: #f3f3ef !important;
  color: #111214 !important;
  box-shadow: none;
}

.ui-v10 .offer-card-art::before {
  content: "";
  position: absolute;
  top: 21px;
  bottom: 21px;
  right: 0;
  width: 5px;
  border-radius: 999px 0 0 999px;
  background: #346cf4;
}

.ui-v10 .offer-card-blob.one,
.ui-v10 .offer-card-blob.two {
  display: none !important;
}

.ui-v10 .offer-card-brand {
  color: #111214;
}

.ui-v10 .offer-card-brand img {
  filter: none !important;
}

.ui-v10 .offer-country-badge {
  color: rgba(17, 18, 20, 0.52);
}

.ui-v10 .offer-country-badge b {
  color: rgba(17, 18, 20, 0.86);
}

.ui-v10 .offer-card-art > b {
  color: rgba(17, 18, 20, 0.62);
}

.ui-v10 .offer-card-art > .offer-card-pan {
  color: rgba(17, 18, 20, 0.58);
}

.ui-v10 .offer-card-art .card-network-mark.visa {
  color: #111214;
}

.ui-v10 .offer-card-art .card-network-mark.mastercard {
  border-color: rgba(17, 18, 20, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

html[data-app-theme="dark"] .ui-v10 .offer-card-art {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #f3f3ef !important;
  color: #111214 !important;
}

/* Issued card */

.ui-v10 .premium-card.minimal-card,
.ui-v10 .premium-card.minimal-card.product-subscription,
html[data-app-theme="dark"] .ui-v10 .premium-card.minimal-card,
html[data-app-theme="dark"] .ui-v10 .premium-card.minimal-card.product-subscription {
  overflow: hidden;
  border: 1px solid rgba(17, 18, 20, 0.11) !important;
  border-radius: 21px !important;
  background: #f3f3ef !important;
  color: #111214 !important;
  box-shadow: none !important;
}

.ui-v10 .premium-card.minimal-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 21px !important;
  right: 0 !important;
  bottom: 21px !important;
  left: auto !important;
  width: 5px !important;
  display: block !important;
  border-radius: 999px 0 0 999px !important;
  background: #346cf4 !important;
  opacity: 1 !important;
}

.ui-v10 .premium-card.minimal-card.product-universal,
html[data-app-theme="dark"] .ui-v10 .premium-card.minimal-card.product-universal {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: #111214 !important;
  color: #ffffff !important;
}

.ui-v10 .premium-card.minimal-card.product-universal::after {
  background: #7dd7bd !important;
}

.ui-v10 .premium-card.minimal-card .card-flat-shape {
  display: none !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .brand-mark img {
  filter: none !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .brand-mark span,
.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-product-label,
.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-secret,
.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-secret small,
.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-secret b {
  color: #111214 !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-secret small {
  color: rgba(17, 18, 20, 0.48) !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-product-label {
  color: rgba(17, 18, 20, 0.55) !important;
}

.ui-v10 .premium-card.minimal-card:not(.product-universal) .card-network-mark.visa {
  color: #111214 !important;
}

.ui-v10 .premium-card.minimal-card .premium-card-top {
  top: 22px;
  right: 24px;
  left: 24px;
}

.ui-v10 .premium-card.minimal-card > .card-secret:not(.compact) {
  top: 125px;
  right: 24px;
  left: 24px;
}

.ui-v10 .premium-card.minimal-card > .card-secret:not(.compact) b {
  font-size: clamp(19px, 3.4vw, 23px);
  font-weight: 610;
  letter-spacing: 0.08em;
}

.ui-v10 .premium-card.minimal-card .premium-card-bottom {
  right: 110px !important;
  bottom: 24px;
  left: 24px;
}

.ui-v10 .premium-card.minimal-card .card-secret.compact b {
  font-size: 10px;
  font-weight: 590;
}

.ui-v10 .card-country-label {
  position: absolute;
  z-index: 3;
  top: 58px;
  left: 24px;
  color: rgba(17, 18, 20, 0.5);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.09em;
}

.ui-v10 .product-universal .card-country-label {
  color: rgba(255, 255, 255, 0.55);
}

.ui-v10 .card-product-label {
  right: 24px;
  bottom: 24px;
  font-size: 8px;
  font-weight: 680;
}

.ui-v10 .pay-balance strong {
  font-size: clamp(40px, 4.2vw, 49px);
  font-weight: 680;
  letter-spacing: -0.05em;
}

.ui-v10 .pay-main-buttons {
  align-self: end;
}

.ui-v10 .card-rules-trigger {
  grid-column: 2;
  grid-row: 4;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 10px 12px;
  text-align: left;
}

.ui-v10 .card-rules-trigger > strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--air-surface);
  color: var(--air-text);
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--air-border);
}

.ui-v10 .card-rules-trigger b,
.ui-v10 .card-rules-trigger small {
  display: block;
}

.ui-v10 .card-rules-trigger b {
  font-size: 13px;
  font-weight: 620;
}

.ui-v10 .card-rules-trigger small {
  margin-top: 2px;
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 430;
}

.ui-v10 .card-rules-trigger > svg {
  color: var(--air-text-faint);
}

.ui-v10 .card-rules-trigger:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface-muted);
}

/* Card restrictions modal */

.ui-v10-modal .card-rules {
  display: grid;
  gap: 14px;
}

.ui-v10-modal .decline-fee-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid var(--air-border);
  border-radius: 16px;
  background: var(--air-surface-muted);
  padding: 17px;
}

.ui-v10-modal .decline-fee-card > strong {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--air-text);
  color: var(--air-bg);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.ui-v10-modal .decline-fee-card h3,
.ui-v10-modal .restricted-merchants h3 {
  margin: 0;
  color: var(--air-text);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.ui-v10-modal .decline-fee-card p,
.ui-v10-modal .restricted-merchants-head p {
  margin: 5px 0 0;
  color: var(--air-text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.ui-v10-modal .card-rules-advice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border-radius: 12px;
  background: var(--air-warning-soft);
  color: var(--air-warning);
  padding: 11px 12px;
}

.ui-v10-modal .card-rules-advice > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--air-warning) 13%, transparent);
  font-size: 12px;
  font-weight: 700;
}

.ui-v10-modal .card-rules-advice p {
  margin: 2px 0 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.48;
}

.ui-v10-modal .restricted-merchants {
  display: grid;
  gap: 13px;
  border-top: 1px solid var(--air-border);
  padding-top: 17px;
}

.ui-v10-modal .restricted-merchants-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ui-v10-modal .restricted-merchants-head > span {
  min-width: 31px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  font-size: 11px;
  font-weight: 650;
}

.ui-v10-modal .restricted-merchants-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  overflow: hidden;
}

.ui-v10-modal .restricted-merchants-grid > span {
  min-width: 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--air-border);
  padding: 9px 12px;
  color: var(--air-text-soft);
  font-size: 12px;
  line-height: 1.35;
}

.ui-v10-modal .restricted-merchants-grid > span:nth-child(odd) {
  border-right: 1px solid var(--air-border);
}

.ui-v10-modal .restricted-merchants-grid > span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.ui-v10-modal .restricted-merchants-grid b {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 620;
}

.ui-v10-modal .restricted-merchants-grid small {
  margin-top: 3px;
  color: var(--air-warning);
  font-size: 10px;
  line-height: 1.4;
}

.ui-v10-modal .card-rules-footnote {
  margin: 0;
  color: var(--air-text-faint);
  font-size: 11px;
  line-height: 1.45;
}

/* Responsive */

@media (max-width: 820px) {
  .ui-v10 .card-rules-trigger {
    grid-column: 1;
    grid-row: auto;
  }

  html[data-app-theme="dark"] .ui-v10 .miniapp-bottom-nav button:first-child {
    color: #0d0e10 !important;
  }

  html[data-app-theme="dark"] .ui-v10 .miniapp-bottom-nav button:first-child svg,
  html[data-app-theme="dark"] .ui-v10 .miniapp-bottom-nav button:first-child span {
    color: inherit !important;
    stroke: currentColor;
  }
}

@media (max-width: 680px) {
  .ui-v10 .service-tile,
  .ui-v10 .service-tile:nth-child(n),
  .ui-v10 .service-tile.alpina-fulfilled {
    min-height: 76px;
    grid-template-columns: 40px minmax(0, 1fr) 14px;
    gap: 12px;
    padding: 12px 14px !important;
  }

  .ui-v10 .service-logo,
  .ui-v10 .service-logo.with-image,
  .ui-v10 .service-tile .service-logo,
  .ui-v10 .service-tile .service-logo.with-image {
    width: 40px;
    height: 40px;
  }

  .ui-v10 .service-logo img,
  .ui-v10 .service-logo.with-image img,
  .ui-v10 .service-tile .service-logo img,
  .ui-v10 .service-tile .service-logo.with-image img {
    width: 30px;
    height: 30px;
  }

  .ui-v10 .service-tile-sticker {
    top: -8px;
    right: 12px;
    min-height: 22px;
    padding: 3px 9px;
    font-size: 10px;
  }

  .ui-v10 .card-offer-banner {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "stage"
      "action";
    gap: 22px;
    padding: 24px 20px;
  }

  .ui-v10 .offer-card-copy {
    min-width: 0;
  }

  .ui-v10 .offer-card-copy h2 {
    font-size: clamp(32px, 9.5vw, 40px);
    overflow-wrap: normal;
    word-break: normal;
  }

  .ui-v10 .offer-card-copy p {
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  .ui-v10 .offer-card-stage,
  .ui-v10 .offer-card-action {
    min-width: 0;
  }

  .ui-v10 .premium-card.minimal-card .premium-card-top {
    top: 18px;
    right: 19px;
    left: 19px;
  }

  .ui-v10 .premium-card.minimal-card > .card-secret:not(.compact) {
    top: 105px;
    right: 19px;
    left: 19px;
  }

  .ui-v10 .premium-card.minimal-card .premium-card-bottom {
    right: 94px !important;
    bottom: 19px;
    left: 19px;
  }

  .ui-v10 .card-country-label {
    top: 52px;
    left: 19px;
  }

  .ui-v10 .card-product-label {
    right: 19px;
    bottom: 19px;
  }

  .ui-v10-modal .service-guide-head {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .ui-v10-modal .service-guide-head .service-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ui-v10-modal .decline-fee-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 13px;
    padding: 14px;
  }

  .ui-v10-modal .decline-fee-card > strong {
    width: 58px;
    height: 58px;
    font-size: 18px;
  }

  .ui-v10-modal .restricted-merchants-grid {
    grid-template-columns: 1fr;
  }

  .ui-v10-modal .restricted-merchants-grid > span:nth-child(odd) {
    border-right: 0;
  }

  .ui-v10-modal .restricted-merchants-grid > span:nth-last-child(2) {
    border-bottom: 1px solid var(--air-border);
  }
}

@media (max-width: 430px) {
  .ui-v10 .service-tile-sticker {
    top: -8px;
    right: 11px;
    bottom: auto;
  }

  .ui-v10 .premium-card.minimal-card > .card-secret:not(.compact) b {
    font-size: 17px !important;
    letter-spacing: 0.055em !important;
  }

  .ui-v10 .card-rules-trigger {
    min-height: 56px;
  }
}
/*
 * Alpina Pay v10.5
 * Product flow, native card deck and a calmer full-screen canvas.
 */

/* Canvas */

body:has(.ui-v10) {
  min-width: 0;
  overflow-x: hidden;
  background-color: #f2f4f7 !important;
  background-image:
    radial-gradient(circle at 12% -8%, rgba(92, 104, 232, 0.15) 0, transparent 34rem),
    radial-gradient(circle at 94% 14%, rgba(126, 141, 236, 0.09) 0, transparent 30rem),
    linear-gradient(180deg, #f7f8fa 0%, #f1f3f6 52%, #eef1f4 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
}

html[data-app-theme="dark"] body:has(.ui-v10) {
  background-color: #0b0c0f !important;
  background-image:
    radial-gradient(circle at 10% -10%, rgba(86, 99, 217, 0.2) 0, transparent 34rem),
    radial-gradient(circle at 96% 16%, rgba(85, 96, 184, 0.12) 0, transparent 30rem),
    linear-gradient(180deg, #101116 0%, #0c0d11 46%, #090a0d 100%) !important;
}

.ui-v10.pay-home {
  min-width: 0;
}

.ui-v10 .pay-home-topbar {
  background: color-mix(in srgb, var(--air-bg) 82%, transparent);
}

/* Catalogue optical alignment */

.ui-v10 .service-tile.alpina-fulfilled {
  align-content: center !important;
  align-items: center !important;
  padding-block: 15px !important;
}

.ui-v10 .service-tile.alpina-fulfilled > .service-logo {
  align-self: center;
  transform: none;
}

.ui-v10 .service-tile.alpina-fulfilled > span:nth-of-type(2) {
  min-height: 42px;
  display: grid;
  align-content: center;
  align-self: center;
  margin: 0;
  transform: none;
}

.ui-v10 .service-tile.alpina-fulfilled b {
  line-height: 1.2;
}

.ui-v10 .service-tile.alpina-fulfilled small {
  line-height: 1.3;
}

/* Modern card face shared by the offer and the card screen */

.ui-v10 .alpina-card-face {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.586;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background-color: #5c65e5;
  background-image: radial-gradient(
    circle at 86% 6%,
    rgba(255, 255, 255, 0.24) 0,
    rgba(255, 255, 255, 0.08) 24%,
    transparent 51%
  );
  color: #fff;
  padding: clamp(20px, 4.8%, 27px);
  box-shadow: 0 22px 46px -34px rgba(39, 44, 126, 0.64);
}

.ui-v10 .alpina-card-face.product-universal {
  border-color: rgba(255, 255, 255, 0.12);
  background-color: #17191e;
  background-image: radial-gradient(
    circle at 86% 6%,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.04) 27%,
    transparent 53%
  );
  box-shadow: 0 22px 46px -34px rgba(0, 0, 0, 0.78);
}

.ui-v10 .alpina-card-face::after {
  display: none !important;
}

.ui-v10 .alpina-card-face-head,
.ui-v10 .alpina-card-face-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.ui-v10 .alpina-card-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #fff;
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 730;
  letter-spacing: -0.045em;
  line-height: 1;
}

.ui-v10 .alpina-card-wordmark i {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.52em;
  font-style: normal;
  font-weight: 630;
  letter-spacing: -0.01em;
}

.ui-v10 .alpina-card-face .card-network-mark {
  position: static !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ui-v10 .alpina-card-face .card-network-mark.mastercard {
  width: 45px;
  height: 30px;
}

.ui-v10 .alpina-card-face .card-network-mark.mastercard i {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eb001b;
}

.ui-v10 .alpina-card-face .card-network-mark.mastercard i + i {
  margin-left: -8px;
  background: #f79e1b;
  mix-blend-mode: normal;
}

.ui-v10 .alpina-card-face .card-network-mark.visa {
  color: #fff;
  font-size: 20px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.ui-v10 .alpina-card-face-meta {
  margin-top: clamp(21px, 6.3%, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ui-v10 .alpina-card-face-meta span,
.ui-v10 .alpina-card-face-meta small {
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 570;
  line-height: 1;
}

.ui-v10 .alpina-card-face-meta small {
  margin: 0;
}

.ui-v10 .alpina-card-face-number {
  align-self: end;
  padding: 0 0 clamp(16px, 4%, 23px);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(17px, 3vw, 23px);
  font-weight: 560;
  letter-spacing: 0.055em;
  line-height: 1;
  white-space: nowrap;
}

.ui-v10 .alpina-card-face-foot {
  align-items: flex-end;
}

.ui-v10 .alpina-card-face-foot > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ui-v10 .alpina-card-face-foot > span:first-child {
  margin-right: auto;
}

.ui-v10 .alpina-card-face-foot small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  font-weight: 570;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ui-v10 .alpina-card-face-foot b {
  max-width: 170px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(9px, 1.4vw, 11px);
  font-weight: 620;
  letter-spacing: 0.045em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10 .alpina-card-currency {
  text-align: right;
}

/* Empty state product offer */

.ui-v10 .card-offer-banner {
  min-height: 390px;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
  border-color: color-mix(in srgb, var(--air-border) 76%, transparent);
  background:
    linear-gradient(var(--air-surface), var(--air-surface)) padding-box,
    linear-gradient(135deg, rgba(92, 101, 229, 0.2), transparent 48%) border-box;
}

.ui-v10 .offer-card-stage {
  width: min(100%, 440px);
  min-width: 0;
  align-self: center;
  justify-self: center;
}

.ui-v10 .offer-card-stage > .alpina-card-face {
  width: 100%;
  transform: rotate(-1.25deg);
}

.ui-v10 .offer-card-caption {
  width: calc(100% - 18px);
  margin-top: 18px;
  border: 0;
  background: transparent;
  padding: 0 4px;
}

.ui-v10 .offer-card-caption > svg {
  width: 34px;
  height: 34px;
  border: 1px solid var(--air-border);
  border-radius: 50%;
  background: var(--air-surface-muted);
  padding: 8px;
}

/* Issued cards: native swipe deck */

.ui-v10 .pay-card-screen {
  min-width: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--air-border) 78%, transparent);
  border-radius: 24px;
  background: var(--air-surface);
  padding: clamp(24px, 3.3vw, 38px);
}

.ui-v10 .card-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 24px;
}

.ui-v10 .card-section-title h1 {
  margin: 0;
  color: var(--air-text);
  font-size: clamp(25px, 2.8vw, 34px);
  font-weight: 690;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.ui-v10 .card-section-title p {
  margin: 0;
  color: var(--air-text-faint);
  font-size: 12px;
  font-weight: 470;
}

.ui-v10 .pay-card-layout-v105 {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: stretch;
  gap: clamp(24px, 4vw, 48px);
}

.ui-v10 .card-deck {
  min-width: 0;
  align-self: center;
}

.ui-v10 .card-deck-shell {
  position: relative;
  min-width: 0;
  padding: 0 34px;
}

.ui-v10 .card-deck-track {
  min-width: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 17px 16px;
  scroll-behavior: smooth;
  scroll-padding-inline: 17px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.ui-v10 .card-deck-track::-webkit-scrollbar {
  display: none;
}

.ui-v10 .card-deck-slide {
  min-width: 0;
  flex: 0 0 calc(100% - 34px);
  align-self: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 0.76;
  transform: scale(0.975);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.ui-v10 .card-deck-slide.active {
  opacity: 1;
  transform: none;
}

.ui-v10 .card-deck-slide > .alpina-card-face {
  width: 100%;
}

.ui-v10 .card-deck-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--air-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--air-surface) 94%, transparent);
  color: var(--air-text);
  padding: 0;
  box-shadow: 0 10px 30px -18px rgba(8, 9, 10, 0.35);
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}

.ui-v10 .card-deck-arrow.previous {
  left: 0;
}

.ui-v10 .card-deck-arrow.previous svg {
  transform: rotate(180deg);
}

.ui-v10 .card-deck-arrow.next {
  right: 0;
}

.ui-v10 .card-deck-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.ui-v10 .card-deck-pagination {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}

.ui-v10 .card-deck-pagination button {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: var(--air-border-strong);
  padding: 0;
  transition:
    width 180ms ease,
    background 180ms ease;
}

.ui-v10 .card-deck-pagination button.active {
  width: 22px;
  background: #5963df;
}

.ui-v10 .card-deck-pagination button.add:not(.active) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--air-border-strong);
}

.ui-v10 .add-card-slide {
  aspect-ratio: 1.586;
}

.ui-v10 .add-card-slide-button {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 15px;
  border: 1px dashed var(--air-border-strong);
  border-radius: 24px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 28px;
  text-align: center;
}

.ui-v10 .add-card-slide-button > i,
.ui-v10 .card-add-summary-v105 > i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--air-text);
  color: var(--air-bg);
  font-size: 26px;
  font-style: normal;
  font-weight: 330;
  line-height: 1;
}

.ui-v10 .add-card-slide-button > span {
  display: grid;
  gap: 5px;
}

.ui-v10 .add-card-slide-button b {
  color: var(--air-text);
  font-size: 16px;
  font-weight: 640;
}

.ui-v10 .add-card-slide-button small {
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 450;
}

.ui-v10 .card-overview-v105,
.ui-v10 .card-add-summary-v105 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--air-border);
  border-radius: 20px;
  background: var(--air-surface-muted);
  padding: clamp(20px, 3vw, 28px);
}

.ui-v10 .card-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--air-border);
}

.ui-v10 .card-overview-head > span {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.ui-v10 .card-overview-head small {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 540;
}

.ui-v10 .card-overview-head b {
  overflow: hidden;
  color: var(--air-text);
  font-size: 15px;
  font-weight: 640;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10 .card-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--air-success);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
}

.ui-v10 .card-live-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px var(--air-success-soft);
}

.ui-v10 .card-overview-v105 .pay-balance {
  min-height: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "label label"
    "value currency";
  align-items: baseline;
  justify-content: start;
  gap: 3px 7px;
  margin: 24px 0;
  padding: 0;
  text-align: left;
}

.ui-v10 .card-overview-v105 .pay-balance small {
  grid-area: label;
}

.ui-v10 .card-overview-v105 .pay-balance strong {
  grid-area: value;
  font-size: clamp(35px, 4vw, 46px);
  line-height: 1;
}

.ui-v10 .card-overview-v105 .pay-balance > span {
  grid-area: currency;
}

.ui-v10 .card-overview-v105 .pay-main-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
  padding: 0;
}

.ui-v10 .card-overview-v105 .pay-main-buttons button,
.ui-v10 .card-overview-v105 .pay-main-buttons button:first-child,
.ui-v10 .card-overview-v105 .pay-main-buttons button:nth-child(2),
.ui-v10 .card-overview-v105 .pay-main-buttons button:last-child {
  min-width: 0;
  min-height: 44px;
  gap: 6px;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 11px;
}

.ui-v10 .card-overview-v105 .pay-main-buttons button:first-child {
  border-color: var(--air-text);
  background: var(--air-text);
  color: var(--air-bg);
}

.ui-v10 .card-overview-v105 .card-rules-trigger {
  min-height: 57px;
  margin-top: 18px;
  border: 0;
  border-top: 1px solid var(--air-border);
  border-radius: 0;
  background: transparent;
  padding: 17px 0 0;
}

.ui-v10 .card-overview-v105 .card-rules-trigger > strong {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.ui-v10 .card-add-summary-v105 {
  align-items: flex-start;
}

.ui-v10 .card-add-summary-v105 > i {
  margin-bottom: 20px;
}

.ui-v10 .card-add-summary-v105 h3 {
  margin: 0 0 8px;
  color: var(--air-text);
  font-size: 22px;
  font-weight: 660;
  letter-spacing: -0.035em;
}

.ui-v10 .card-add-summary-v105 p {
  margin: 0 0 22px;
  color: var(--air-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

.ui-v10 .card-add-summary-v105 button,
.ui-v10 .issue-another-card-v105 {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 18px;
  font-size: 13px;
  font-weight: 610;
}

.ui-v10 .issue-another-card-v105 {
  width: 100%;
  margin-top: 24px;
  border-color: var(--air-border);
  background: transparent;
  color: var(--air-text);
}

.ui-v10 .issue-another-card-v105:disabled,
.ui-v10 .card-add-summary-v105 button:disabled,
.ui-v10 .add-card-slide-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bottom navigation: active state is explicit, not positional. */

.ui-v10 .miniapp-bottom-nav button:first-child {
  background: transparent;
  color: var(--air-text-soft);
}

.ui-v10 .miniapp-bottom-nav button.active {
  background: var(--air-text);
  color: var(--air-bg);
}

.ui-v10 .miniapp-bottom-nav button.active svg,
.ui-v10 .miniapp-bottom-nav button.active span {
  color: inherit;
}

html[data-app-theme="dark"] .ui-v10 .miniapp-bottom-nav button:first-child {
  background: transparent;
  color: var(--air-text-soft);
}

html[data-app-theme="dark"] .ui-v10 .miniapp-bottom-nav button.active {
  background: var(--air-text);
  color: var(--air-bg);
}

/* Service details and checkout */

.ui-v10-modal.modal-wide:has(.service-modal-v105) {
  width: min(720px, 100%);
}

.ui-v10-modal .service-modal-v105 {
  display: grid;
  gap: 18px;
}

.ui-v10-modal .service-order-flow-v105,
.ui-v10-modal .service-card-guide-v105,
.ui-v10-modal .service-checkout-v105 {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.ui-v10-modal .service-guide-head-v105 {
  min-height: 60px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid var(--air-border);
  border-radius: 0;
  background: transparent;
  padding: 0 0 16px;
}

.ui-v10-modal .service-guide-head-v105 > span:nth-child(2) {
  min-width: 0;
  display: grid;
  align-content: center;
}

.ui-v10-modal .service-guide-head-v105 h3 {
  margin: 0;
  color: var(--air-text);
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.ui-v10-modal .service-guide-head-v105 .service-status {
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

.ui-v10-modal .service-plan-picker-v105 {
  display: grid;
  gap: 11px;
  border: 0;
  background: transparent;
  padding: 0;
}

.ui-v10-modal .service-plan-picker-v105 .service-plan-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ui-v10-modal .service-plan-picker-v105 .service-plan-heading b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 640;
}

.ui-v10-modal .service-plan-picker-v105 .service-plan-heading small {
  color: var(--air-text-faint);
  font-size: 11px;
  font-weight: 470;
}

.ui-v10-modal .service-plan-grid-v105,
.ui-v10-modal .service-plan-grid-v105.has-three,
.ui-v10-modal .service-plan-grid-v105.has-four {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}

.ui-v10-modal .service-plan-grid-v105.has-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-v10-modal .service-plan-grid-v105.has-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-v10-modal .service-plan-grid-v105 > button {
  position: relative;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  gap: 9px;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 13px;
  text-align: left;
  scroll-snap-align: none;
  box-shadow: none;
}

.ui-v10-modal .service-plan-grid-v105 > button:hover {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
  transform: none;
}

.ui-v10-modal .service-plan-grid-v105 > button.active {
  border-color: var(--air-text);
  background: var(--air-surface);
  box-shadow: inset 0 0 0 1px var(--air-text);
}

.ui-v10-modal .service-plan-grid-v105 > button > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ui-v10-modal .service-plan-grid-v105 > button b {
  overflow: hidden;
  color: var(--air-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .service-plan-grid-v105 > button small {
  overflow: hidden;
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 460;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .service-plan-grid-v105 > button strong {
  color: var(--air-text);
  font-size: 17px;
  font-weight: 690;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.ui-v10-modal .service-plan-grid-v105 > button > i {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--air-border-strong);
  border-radius: 50%;
  background: transparent;
}

.ui-v10-modal .service-plan-grid-v105 > button.active > i {
  border-color: var(--air-text);
  background: var(--air-text);
  box-shadow: 0 0 0 3px var(--air-surface);
}

.ui-v10-modal .service-region-note {
  min-height: 0;
  align-items: flex-start;
  gap: 11px;
  border: 0;
  border-radius: 13px;
  background: var(--air-warning-soft);
  padding: 13px 14px;
}

.ui-v10-modal .service-region-note > span {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--air-warning) 14%, transparent);
  color: var(--air-warning);
  font-size: 12px;
  font-weight: 750;
}

.ui-v10-modal .service-region-note p {
  margin: 2px 0 0;
  color: var(--air-warning);
  font-size: 12px;
  font-weight: 480;
  line-height: 1.48;
}

.ui-v10-modal .service-order-fields-v105 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ui-v10-modal .service-order-fields-v105 label {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.ui-v10-modal .service-order-fields-v105 label > span {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 610;
}

.ui-v10-modal .service-order-fields-v105 input,
.ui-v10-modal .service-order-fields-v105 .service-usd-input {
  min-height: 50px;
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  box-shadow: none;
}

.ui-v10-modal .service-order-fields-v105 input {
  width: 100%;
  padding: 0 14px;
  outline: none;
}

.ui-v10-modal .service-order-fields-v105 input:focus {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
}

.ui-v10-modal .service-order-fields-v105 label > small {
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 450;
}

.ui-v10-modal .service-order-fields-v105 .service-usd-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-right: 14px;
}

.ui-v10-modal .service-order-fields-v105 .service-usd-input input {
  min-height: 48px;
  border: 0;
  background: transparent;
}

.ui-v10-modal .service-order-fields-v105 .service-usd-input b {
  color: var(--air-text-faint);
  font-size: 12px;
}

.ui-v10-modal .service-order-total-v105 {
  min-height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--air-border);
  border-bottom: 1px solid var(--air-border);
  padding: 0 2px;
}

.ui-v10-modal .service-order-total-v105 span {
  color: var(--air-text-soft);
  font-size: 13px;
  font-weight: 500;
}

.ui-v10-modal .service-order-total-v105 strong {
  color: var(--air-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.ui-v10-modal .service-primary-action-v105,
.ui-v10-modal .service-order-submit.service-primary-action-v105 {
  position: static;
  inset: auto;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 19px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 620;
}

.ui-v10-modal .service-primary-action-v105:hover:not(:disabled) {
  border-color: var(--air-brand-hover);
  background: var(--air-brand-hover);
  color: var(--air-bg);
  transform: translateY(-1px);
}

.ui-v10-modal .service-primary-action-v105:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.ui-v10-modal .service-consent-v105 {
  max-width: 540px;
  margin: -8px auto 0;
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 440;
  line-height: 1.4;
  text-align: center;
}

.ui-v10-modal .service-checkout-back-v105 {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--air-text-soft);
  padding: 0;
  font-size: 11px;
  font-weight: 560;
}

.ui-v10-modal .service-checkout-summary-v105 {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(150px, 0.7fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 17px;
  background: var(--air-surface-muted);
}

.ui-v10-modal .service-checkout-product-v105 {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 17px;
}

.ui-v10-modal .service-checkout-product-v105 > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ui-v10-modal .service-checkout-product-v105 small,
.ui-v10-modal .service-checkout-account-v105 small {
  color: var(--air-text-faint);
  font-size: 9px;
  font-weight: 520;
}

.ui-v10-modal .service-checkout-product-v105 b {
  color: var(--air-text);
  font-size: 15px;
  font-weight: 650;
}

.ui-v10-modal .service-checkout-product-v105 em {
  color: var(--air-text-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 470;
}

.ui-v10-modal .service-checkout-account-v105 {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  border-left: 1px solid var(--air-border);
  padding: 17px;
}

.ui-v10-modal .service-checkout-account-v105 b {
  overflow: hidden;
  color: var(--air-text);
  font-size: 12px;
  font-weight: 590;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .service-checkout-total-v105 {
  grid-column: 1 / -1;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--air-border);
  background: var(--air-surface);
  padding: 0 17px;
}

.ui-v10-modal .service-checkout-total-v105 span {
  color: var(--air-text-soft);
  font-size: 12px;
  font-weight: 520;
}

.ui-v10-modal .service-checkout-total-v105 strong {
  color: var(--air-text);
  font-size: 28px;
  font-weight: 710;
  letter-spacing: -0.04em;
}

.ui-v10-modal .service-checkout-payment-v105 {
  display: grid;
  gap: 11px;
}

.ui-v10-modal .service-checkout-heading-v105 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ui-v10-modal .service-checkout-heading-v105 b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 650;
}

.ui-v10-modal .service-checkout-heading-v105 small {
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 460;
}

.ui-v10-modal .service-checkout-methods-v105 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ui-v10-modal .service-checkout-method-v105 {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  padding: 10px;
  text-align: left;
  box-shadow: none;
}

.ui-v10-modal .service-checkout-method-v105:hover:not(:disabled) {
  border-color: var(--air-border-strong);
  background: var(--air-surface);
  transform: none;
}

.ui-v10-modal .service-checkout-method-v105.active {
  border-color: var(--air-text);
  background: var(--air-surface);
  box-shadow: inset 0 0 0 1px var(--air-text);
}

.ui-v10-modal .service-checkout-method-v105 > .payment-brand,
.ui-v10-modal .service-checkout-wallet-mark-v105 {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--air-border);
  border-radius: 11px;
  background: var(--air-surface);
  color: var(--air-text);
}

.ui-v10-modal .service-checkout-method-v105 > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ui-v10-modal .service-checkout-method-v105 b {
  overflow: hidden;
  color: var(--air-text);
  font-size: 12px;
  font-weight: 630;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .service-checkout-method-v105 small {
  overflow: hidden;
  color: var(--air-text-faint);
  font-size: 9px;
  font-weight: 450;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .service-checkout-method-v105 > svg {
  color: var(--air-text-faint);
}

.ui-v10-modal .service-checkout-method-v105.active > svg {
  color: var(--air-success);
}

.ui-v10-modal .service-checkout-method-v105.is-disabled {
  opacity: 0.46;
}

.ui-v10-modal .service-checkout-saved-v105 {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--air-border);
  padding-top: 11px;
}

.ui-v10-modal .service-checkout-saved-v105 > span {
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 520;
}

.ui-v10-modal .service-checkout-saved-v105 > button {
  width: 100%;
  min-height: 58px;
}

.ui-v10-modal .service-order-success-v105 {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 32px;
  text-align: center;
}

.ui-v10-modal .service-order-success-v105 > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--air-success-soft);
  color: var(--air-success);
  font-size: 24px;
}

.ui-v10-modal .service-order-success-v105 h3 {
  margin: 4px 0 0;
  color: var(--air-text);
  font-size: 24px;
  font-weight: 670;
}

.ui-v10-modal .service-order-success-v105 p {
  max-width: 430px;
  margin: 0;
  color: var(--air-text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.ui-v10-modal .service-order-success-v105 button {
  min-height: 46px;
  margin-top: 8px;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 22px;
  font-size: 13px;
  font-weight: 620;
}

.ui-v10-modal .guide-steps-v105 {
  display: grid;
  gap: 0;
  border: 0;
  border-top: 1px solid var(--air-border);
  border-radius: 0;
  background: transparent;
  padding: 17px 0 0;
}

.ui-v10-modal .guide-steps-v105 h4 {
  margin: 0 0 9px;
  color: var(--air-text);
  font-size: 19px;
  font-weight: 670;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.ui-v10-modal .guide-steps-v105 .guide-step {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--air-border-soft);
  border-radius: 0;
  background: transparent;
  padding: 11px 0;
}

.ui-v10-modal .guide-steps-v105 .guide-step:last-child {
  border-bottom: 0;
}

.ui-v10-modal .guide-steps-v105 .guide-step > span {
  width: 28px;
  height: 28px;
  background: var(--air-surface-muted);
  color: var(--air-text-soft);
  font-size: 11px;
}

.ui-v10-modal .guide-steps-v105 .guide-step p {
  margin: 3px 0 0;
  color: var(--air-text-soft);
  font-size: 13px;
  font-weight: 470;
  line-height: 1.5;
}

.ui-v10-modal .guide-card-cta-v105 {
  display: grid;
  gap: 13px;
  border-top: 1px solid var(--air-border);
  padding-top: 18px;
}

.ui-v10-modal .guide-card-price-v105 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.ui-v10-modal .guide-card-price-v105 > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ui-v10-modal .guide-card-price-v105 small {
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 500;
}

.ui-v10-modal .guide-card-price-v105 b {
  color: var(--air-text);
  font-size: 22px;
  font-weight: 690;
  letter-spacing: -0.035em;
}

.ui-v10-modal .guide-card-price-v105 em {
  max-width: 255px;
  color: var(--air-text-faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 440;
  line-height: 1.35;
  text-align: right;
}

.ui-v10-modal .guide-card-data-v105 {
  display: grid;
  gap: 10px;
  border: 1px solid var(--air-border);
  border-radius: 15px;
  background: var(--air-surface-muted);
  padding: 13px;
}

.ui-v10-modal .guide-card-data-v105 .guide-card-secrets {
  gap: 8px;
}

.ui-v10-modal .guide-card-action-v105 {
  width: 100%;
  min-height: 51px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 18px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 620;
  text-align: left;
}

.ui-v10-modal .guide-card-action-v105 > span:first-child {
  text-align: center;
}

.ui-v10-modal .guide-card-action-v105.is-disabled {
  border-color: var(--air-border);
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
}

.ui-v10-modal .guide-message {
  margin: 0;
  border: 0;
  border-radius: 11px;
  background: var(--air-danger-soft);
  color: var(--air-danger);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 520;
}

@media (max-width: 980px) {
  .ui-v10 .pay-card-layout-v105 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-v10 .card-overview-v105,
  .ui-v10 .card-add-summary-v105 {
    width: min(100%, 620px);
    justify-self: center;
  }

  .ui-v10 .card-deck {
    width: min(100%, 660px);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  body:has(.ui-v10) {
    background-image:
      radial-gradient(circle at 8% -3%, rgba(92, 104, 232, 0.13) 0, transparent 23rem),
      linear-gradient(180deg, #f7f8fa 0%, #f0f2f5 100%) !important;
  }

  html[data-app-theme="dark"] body:has(.ui-v10) {
    background-image:
      radial-gradient(circle at 8% -3%, rgba(86, 99, 217, 0.18) 0, transparent 23rem),
      linear-gradient(180deg, #101116 0%, #090a0d 100%) !important;
  }

  .ui-v10 .card-offer-banner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "stage"
      "action";
    gap: 26px;
  }

  .ui-v10 .offer-card-stage {
    width: min(100%, 470px);
  }

  .ui-v10 .service-tile.alpina-fulfilled {
    padding-block: 12px !important;
  }

  .ui-v10 .card-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ui-v10 .card-deck-shell {
    padding: 0;
  }

  .ui-v10 .card-deck-track {
    margin-inline: -4px;
    padding-inline: 4px 18px;
  }

  .ui-v10 .card-deck-slide {
    flex-basis: calc(100% - 30px);
  }

  .ui-v10 .card-deck-arrow {
    display: none;
  }

  .ui-v10-modal .service-plan-grid-v105.has-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-v10-modal .service-checkout-methods-v105 {
    grid-template-columns: 1fr;
  }

  .ui-v10-modal .service-checkout-method-v105 {
    min-height: 60px;
  }
}

@media (max-width: 520px) {
  .ui-v10 .pay-card-screen {
    border-radius: 20px;
    padding: 20px 14px;
  }

  .ui-v10 .card-deck-slide {
    flex-basis: calc(100% - 27px);
  }

  .ui-v10 .alpina-card-face {
    border-radius: 20px;
    padding: 18px;
  }

  .ui-v10 .alpina-card-face-number {
    font-size: 15px;
    letter-spacing: 0.035em;
  }

  .ui-v10 .alpina-card-face-foot b {
    max-width: 120px;
  }

  .ui-v10 .alpina-card-currency {
    display: none !important;
  }

  .ui-v10 .add-card-slide-button {
    border-radius: 20px;
    padding: 20px;
  }

  .ui-v10 .card-overview-v105,
  .ui-v10 .card-add-summary-v105 {
    border-radius: 18px;
    padding: 20px 17px;
  }

  .ui-v10 .card-overview-v105 .pay-main-buttons {
    grid-template-columns: 1fr !important;
  }

  .ui-v10 .card-overview-v105 .pay-main-buttons button,
  .ui-v10 .card-overview-v105 .pay-main-buttons button:first-child,
  .ui-v10 .card-overview-v105 .pay-main-buttons button:nth-child(2),
  .ui-v10 .card-overview-v105 .pay-main-buttons button:last-child {
    min-height: 48px;
    justify-content: flex-start;
    padding-inline: 15px;
    font-size: 13px;
  }

  .ui-v10-modal .service-guide-head-v105 {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .ui-v10-modal .service-guide-head-v105 .service-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ui-v10-modal .service-plan-grid-v105 {
    gap: 6px;
  }

  .ui-v10-modal .service-plan-grid-v105.has-three > button {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 7px;
  }

  .ui-v10-modal .service-plan-grid-v105 > button {
    min-height: 76px;
    border-radius: 12px;
    padding: 10px 8px;
  }

  .ui-v10-modal .service-plan-grid-v105 > button b {
    font-size: 13px;
  }

  .ui-v10-modal .service-plan-grid-v105 > button small {
    font-size: 9px;
  }

  .ui-v10-modal .service-plan-grid-v105.has-three > button small {
    display: none;
  }

  .ui-v10-modal .service-plan-grid-v105 > button strong {
    font-size: 14px;
  }

  .ui-v10-modal .service-plan-grid-v105 > button > i {
    display: none;
  }

  .ui-v10-modal .service-checkout-summary-v105 {
    grid-template-columns: 1fr;
  }

  .ui-v10-modal .service-checkout-account-v105 {
    border-top: 1px solid var(--air-border);
    border-left: 0;
  }

  .ui-v10-modal .guide-card-price-v105 {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .ui-v10-modal .guide-card-price-v105 em {
    max-width: none;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-v10 .card-deck-track {
    scroll-behavior: auto;
  }

  .ui-v10 .card-deck-slide,
  .ui-v10 .card-deck-pagination button {
    transition: none;
  }
}
/*
 * Alpina Pay v10.6
 * Pricing-aware card checkout, rebuilt wallet funding and Alpina VPN auth.
 */

/* ───────────────────────────── Authentication ───────────────────────────── */

body:has(.ui-v10-auth) {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 16% 12%, rgba(92, 126, 158, 0.13), transparent 34%),
    #060a0e !important;
  background-image:
    radial-gradient(circle at 16% 12%, rgba(92, 126, 158, 0.13), transparent 34%) !important;
}

.ui-v10-auth.auth-page {
  min-height: 100dvh;
  padding: 42px 20px;
  background: transparent !important;
}

.ui-v10-auth .auth-choice-card,
.ui-v10-auth .auth-choice-card.is-email {
  position: relative;
  width: min(560px, 100%);
  max-width: none !important;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 30px;
  background: #fff;
  color: #07111f;
  padding: 50px 56px 36px;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.35);
  scrollbar-width: none;
}

.ui-v10-auth .auth-choice-card::-webkit-scrollbar {
  display: none;
}

.ui-v10-auth .auth-modal-close-v106 {
  position: absolute;
  z-index: 4;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f2f3f4;
  color: #707781;
  padding: 0 0 3px;
  font-size: 30px;
  font-weight: 320;
  line-height: 1;
}

.ui-v10-auth .auth-modal-close-v106:hover {
  background: #e9ebed;
  color: #07111f;
}

.ui-v10-auth .auth-choice-head {
  margin: 0 0 30px;
  text-align: center;
}

.ui-v10-auth .auth-wordmark {
  display: none !important;
}

.ui-v10-auth .auth-choice-head h1 {
  max-width: 100%;
  margin: 4px auto 0;
  color: #06111e;
  font-family: "Roboto Flex", "Arial Narrow", var(--font-sans);
  font-size: clamp(58px, 7vw, 78px);
  font-stretch: 64%;
  font-variation-settings: "wdth" 58, "wght" 930;
  font-weight: 930;
  line-height: 0.9;
  letter-spacing: -0.075em;
  text-align: center;
  text-transform: uppercase;
}

.ui-v10-auth .auth-choice-head p,
.ui-v10-auth .auth-email-head p {
  max-width: none;
  margin: 22px 0 0;
  color: #69717c;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.ui-v10-auth .auth-provider-stack {
  display: grid;
  gap: 10px;
}

.ui-v10-auth .auth-provider-native,
.ui-v10-auth .auth-provider-visual-v106,
.ui-v10-auth .auth-choice-card .auth-email-entry {
  position: relative;
  width: 100%;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid #07111f;
  border-radius: 13px;
  background: #07111f;
  color: #fff;
  box-shadow: none;
}

.ui-v10-auth .auth-provider-visual-v106,
.ui-v10-auth .auth-choice-card .auth-email-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 48px;
  font-size: 15px;
  font-weight: 760;
  text-align: center;
}

.ui-v10-auth .auth-provider-native > span {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #fff;
  font-size: 15px;
  font-weight: 760;
  pointer-events: none;
}

.ui-v10-auth .auth-provider-visual-v106 img,
.ui-v10-auth .auth-provider-native > span img,
.ui-v10-auth .auth-choice-card .auth-email-entry > svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
}

.ui-v10-auth .google-native-v106 img {
  width: 25px;
  height: 25px;
}

.ui-v10-auth .auth-provider-overlay-v106 {
  position: absolute !important;
  z-index: 3;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  opacity: 0.001;
  cursor: pointer;
}

.ui-v10-auth .auth-provider-overlay-v106 > div,
.ui-v10-auth .auth-provider-overlay-v106 iframe {
  width: 100% !important;
  height: 100% !important;
}

.ui-v10-auth .auth-provider-unavailable-v106,
.ui-v10-auth .auth-yandex-entry-v106 {
  border-color: #d9dde1;
  background: #f5f6f7;
  color: #8b929a;
  opacity: 1;
}

.ui-v10-auth .auth-provider-unavailable-v106 small,
.ui-v10-auth .auth-yandex-entry-v106 small {
  position: absolute;
  right: 15px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e7e9ec;
  color: #737a83;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-v10-auth .provider-yandex {
  width: 27px;
  height: 27px;
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 8px;
  background: #ff3d24;
  color: #fff;
  font-size: 17px;
  font-style: normal;
  font-weight: 850;
}

.ui-v10-auth .auth-choice-card .auth-email-entry {
  grid-template-columns: none;
}

.ui-v10-auth .auth-choice-card .auth-email-entry > svg:first-child {
  color: #fff;
}

.ui-v10-auth .auth-qr-entry-v106 {
  border-color: #cedde8;
  background: linear-gradient(180deg, #f4fbff, #eaf5fb);
  color: #07111f;
}

.ui-v10-auth .provider-qr {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 8px;
  background: #44b7ec;
  color: #fff;
  font-size: 17px;
  font-style: normal;
  font-weight: 800;
}

.ui-v10-auth .auth-choice-switch {
  margin-top: 18px;
  color: #7b828b;
  font-size: 13px;
  font-weight: 600;
}

.ui-v10-auth .auth-choice-switch button {
  color: #07111f;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ui-v10-auth .auth-privacy {
  max-width: 390px;
  margin: 18px auto 0;
  color: #9aa0a7;
  font-size: 10px;
}

.ui-v10-auth .auth-back {
  margin-bottom: 22px;
  color: #69717c;
  font-size: 13px;
}

.ui-v10-auth .auth-email-head {
  margin: 0 0 24px;
  text-align: center;
}

.ui-v10-auth .auth-email-big-icon {
  margin: 0 auto 18px;
  border: 0;
  background: #eef1f3;
}

.ui-v10-auth .auth-email-head h2 {
  color: #07111f;
  font-size: 31px;
  text-align: center;
}

.ui-v10-auth .auth-choice-card .auth-email-field {
  min-height: 56px;
  border-color: #d9dde1;
  border-radius: 13px;
  background: #f8f9fa;
  color: #737b84;
}

.ui-v10-auth .auth-choice-card .auth-email-field input {
  color: #07111f;
  font-size: 15px;
}

.ui-v10-auth .auth-choice-card .auth-email-primary {
  min-height: 58px;
  border-radius: 13px;
  background: #07111f;
  color: #fff;
}

html[data-app-theme="dark"] .ui-v10-auth .auth-choice-card,
html[data-app-theme="dark"] .ui-v10-auth .auth-choice-card.is-email {
  border-color: rgba(255, 255, 255, 0.82);
  background: #fff;
  color: #07111f;
}

/* ───────────────────────────── Wallet funding ───────────────────────────── */

.ui-v10-modal:has(.wallet-modal-v106) {
  width: min(720px, 100%);
  max-height: min(92dvh, 940px);
  overflow: auto;
  border-radius: 24px;
  background: var(--air-surface);
  padding: 22px;
}

.ui-v10-modal:has(.wallet-modal-v106) .modal-head {
  padding: 2px 2px 22px;
}

.ui-v10-modal:has(.wallet-modal-v106) .modal-head h2 {
  font-size: 28px;
}

.ui-v10-modal:has(.wallet-modal-v106) .modal-head p {
  max-width: 520px;
  margin-top: 5px;
  color: var(--air-text-faint);
  font-size: 12px;
}

.ui-v10-modal .wallet-modal-v106 {
  display: grid;
  gap: 16px;
}

.ui-v10-modal .wallet-balance-hero-v106 {
  min-height: 116px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--air-border) !important;
  border-radius: 18px !important;
  background: var(--air-surface-muted) !important;
  padding: 22px 24px !important;
}

.ui-v10-modal .wallet-balance-copy-v106 {
  display: grid;
  gap: 3px;
}

.ui-v10-modal .wallet-balance-copy-v106 > span {
  color: var(--air-text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-v10-modal .wallet-balance-copy-v106 > strong {
  color: var(--air-text);
  font-size: 38px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.05em;
}

.ui-v10-modal .wallet-balance-note-v106 {
  min-width: 200px;
  display: grid;
  gap: 2px;
  border-left: 1px solid var(--air-border);
  padding-left: 22px;
}

.ui-v10-modal .wallet-balance-note-v106 b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 650;
}

.ui-v10-modal .wallet-balance-note-v106 small {
  max-width: 210px;
  color: var(--air-text-faint);
  font-size: 10px;
  line-height: 1.45;
}

.ui-v10-modal .wallet-amount-field-v106 {
  display: grid;
  gap: 7px;
}

.ui-v10-modal .wallet-amount-field-v106 > span {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 640;
}

.ui-v10-modal .wallet-amount-field-v106 > div {
  min-height: 62px;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface);
  padding: 0 16px;
}

.ui-v10-modal .wallet-amount-field-v106 > div:focus-within {
  border-color: var(--air-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-text) 7%, transparent);
}

.ui-v10-modal .wallet-amount-field-v106 input {
  color: var(--air-text);
  font-size: 27px;
  font-weight: 710;
  letter-spacing: -0.035em;
}

.ui-v10-modal .wallet-method-heading-v106 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.ui-v10-modal .wallet-method-heading-v106 b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 650;
}

.ui-v10-modal .wallet-method-heading-v106 small {
  color: var(--air-text-faint);
  font-size: 10px;
}

.ui-v10-modal .wallet-method-grid-v106 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ui-v10-modal .wallet-method-grid-v106 > button {
  position: relative;
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--air-border) !important;
  border-radius: 15px !important;
  background: var(--air-surface) !important;
  padding: 11px 12px !important;
  text-align: left;
}

.ui-v10-modal .wallet-method-grid-v106 > button.active {
  border-color: var(--air-text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--air-text) 6%, transparent) !important;
}

.ui-v10-modal .wallet-method-grid-v106 .payment-brand {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center;
  border: 1px solid var(--air-border);
  border-radius: 12px;
  background: #fff !important;
}

.ui-v10-modal .wallet-method-grid-v106 .payment-brand svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}

.ui-v10-modal .wallet-method-grid-v106 > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ui-v10-modal .wallet-method-grid-v106 b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 660;
}

.ui-v10-modal .wallet-method-grid-v106 small {
  color: var(--air-text-faint);
  font-size: 10px;
}

.ui-v10-modal .wallet-fee-badge-v106 {
  position: absolute;
  top: -9px;
  right: 12px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #0a965e;
  color: #fff;
  padding: 0 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
  transform: rotate(1.5deg);
}

.ui-v10-modal .wallet-quote {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 15px;
  background: var(--air-surface-muted);
  padding: 0;
}

.ui-v10-modal .wallet-quote > span {
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 0;
  border-right: 1px solid var(--air-border);
  background: transparent;
  padding: 10px 14px;
}

.ui-v10-modal .wallet-quote > span:last-child {
  border-right: 0;
  background: color-mix(in srgb, var(--air-text) 4%, transparent);
}

.ui-v10-modal .wallet-quote small {
  color: var(--air-text-faint);
  font-size: 9px;
  font-weight: 550;
}

.ui-v10-modal .wallet-quote b {
  color: var(--air-text);
  font-size: 14px;
  font-weight: 680;
}

.ui-v10-modal .wallet-submit-v106 {
  position: relative !important;
  z-index: auto !important;
  bottom: auto !important;
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  border: 1px solid var(--air-text);
  border-radius: 999px;
  background: var(--air-text);
  color: var(--air-bg);
  padding: 0 18px;
  box-shadow: none !important;
}

.ui-v10-modal .wallet-submit-v106::before,
.ui-v10-modal .wallet-submit-v106::after {
  display: none !important;
}

.ui-v10-modal .wallet-submit-label-v106 {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 20px;
}

.ui-v10-modal .wallet-submit-label-v106 i {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
}

.ui-v10-modal .wallet-submit-label-v106 b {
  font-size: 13px;
  font-weight: 650;
}

.ui-v10-modal .wallet-submit-v106 > svg {
  justify-self: end;
}

.ui-v10-modal .wallet-submit-v106:disabled {
  border-color: var(--air-border);
  background: var(--air-surface-muted);
  color: var(--air-text-faint);
  opacity: 1;
}

.ui-v10-modal .wallet-recent-v106 {
  display: grid;
  gap: 0;
  margin-top: 2px;
  border-top: 1px solid var(--air-border);
  padding-top: 15px;
}

.ui-v10-modal .wallet-recent-v106 > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.ui-v10-modal .wallet-recent-v106 > div:first-child b {
  color: var(--air-text);
  font-size: 13px;
  font-weight: 650;
}

.ui-v10-modal .wallet-recent-v106 > div:first-child small {
  color: var(--air-text-faint);
  font-size: 9px;
}

.ui-v10-modal .wallet-recent-v106 > span {
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--air-border);
}

.ui-v10-modal .wallet-recent-v106 > span:last-child {
  border-bottom: 0;
}

.ui-v10-modal .wallet-recent-v106 > span > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--air-surface-muted);
  color: var(--air-text);
  font-size: 13px;
  font-style: normal;
}

.ui-v10-modal .wallet-recent-v106 em {
  min-width: 0;
  display: grid;
  gap: 2px;
  font-style: normal;
}

.ui-v10-modal .wallet-recent-v106 em b,
.ui-v10-modal .wallet-recent-v106 > span > strong {
  color: var(--air-text);
  font-size: 12px;
  font-weight: 630;
}

.ui-v10-modal .wallet-recent-v106 em small {
  color: var(--air-text-faint);
  font-size: 9px;
}

/* ───────────────────── Card-plan estimates and instant funding ───────────────────── */

.ui-v10-modal .guide-card-plans-v106 {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--air-border);
  padding-top: 18px;
}

.ui-v10-modal .guide-card-plans-head-v106 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.ui-v10-modal .guide-card-plans-head-v106 > span {
  display: grid;
  gap: 3px;
}

.ui-v10-modal .guide-card-plans-head-v106 b {
  color: var(--air-text);
  font-size: 15px;
  font-weight: 660;
}

.ui-v10-modal .guide-card-plans-head-v106 small,
.ui-v10-modal .guide-card-plans-head-v106 em {
  color: var(--air-text-faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.ui-v10-modal .guide-card-plans-head-v106 em {
  flex: 0 0 auto;
  border: 1px solid var(--air-border);
  border-radius: 999px;
  padding: 4px 8px;
}

.ui-v10-modal .guide-card-plan-grid-v106 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 14px;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 13px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 11px 13px;
  text-align: left;
  box-shadow: none;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button:hover {
  border-color: color-mix(in srgb, var(--air-text) 30%, var(--air-border));
}

.ui-v10-modal .guide-card-plan-grid-v106 > button.active {
  border-color: var(--air-text);
  background: var(--air-text);
  color: var(--air-bg);
}

.ui-v10-modal .guide-card-plan-grid-v106 > button > span {
  min-width: 0;
  display: grid;
  grid-row: 1 / 3;
  gap: 3px;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button b {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button small {
  overflow: hidden;
  color: var(--air-text-faint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button.active small {
  color: color-mix(in srgb, var(--air-bg) 68%, transparent);
}

.ui-v10-modal .guide-card-plan-grid-v106 > button strong {
  align-self: end;
  color: inherit;
  font-size: 12px;
  font-weight: 690;
  white-space: nowrap;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button em {
  align-self: start;
  color: var(--air-text-faint);
  font-size: 9px;
  font-style: normal;
  text-align: right;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button.active em {
  color: color-mix(in srgb, var(--air-bg) 72%, transparent);
}

.ui-v10-modal .guide-card-plan-grid-v106 > button > i {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  display: none;
  border-radius: 50%;
  background: #70daa8;
}

.ui-v10-modal .guide-card-plan-grid-v106 > button.active > i {
  display: block;
}

.ui-v10-modal .guide-card-plans-v106.is-single {
  gap: 0;
}

.ui-v10-modal .guide-card-cta-v106 {
  gap: 12px;
  border-top: 0;
  padding-top: 0;
}

.ui-v10-modal .guide-card-funding-v106 {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.75fr;
  overflow: hidden;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
}

.ui-v10-modal .guide-card-funding-v106 > span {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 3px;
  border-right: 1px solid var(--air-border);
  padding: 10px 13px;
}

.ui-v10-modal .guide-card-funding-v106 > span:last-child {
  border-right: 0;
}

.ui-v10-modal .guide-card-funding-v106 small {
  color: var(--air-text-faint);
  font-size: 9px;
  font-weight: 500;
}

.ui-v10-modal .guide-card-funding-v106 b {
  color: var(--air-text);
  font-size: 11px;
  font-weight: 650;
}

.ui-v10-modal .guide-card-funding-v106 .is-ready {
  background: rgba(10, 150, 94, 0.08);
}

.ui-v10-modal .guide-card-funding-v106 .is-ready b {
  color: #078454;
}

.ui-v10-modal .guide-card-actions-v106 {
  display: grid;
  gap: 8px;
}

.ui-v10-modal .guide-card-topup-v106 {
  min-height: 61px;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  border-radius: 15px;
}

.ui-v10-modal .guide-card-topup-v106 .payment-brand {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
}

.ui-v10-modal .guide-card-topup-v106 .payment-brand svg {
  width: 31px;
  height: 31px;
}

.ui-v10-modal .guide-card-topup-v106 > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.ui-v10-modal .guide-card-topup-v106 > span:nth-child(2) b {
  color: inherit;
  font-size: 12px;
  font-weight: 660;
}

.ui-v10-modal .guide-card-topup-v106 > span:nth-child(2) small {
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 9px;
  font-weight: 500;
}

.ui-v10-modal .guide-card-secondary-v106 {
  border-color: var(--air-border);
  background: var(--air-surface);
  color: var(--air-text);
}

.ui-v10-modal .guide-card-add-funds-v106 {
  width: max-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: center;
  border: 0;
  background: transparent;
  color: var(--air-text-soft);
  padding: 0 5px;
  font-size: 10px;
  font-weight: 580;
}

/* ───────────────────────────── Card top-up context ───────────────────────────── */

.ui-v10-modal .topup-service-context-v106 {
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
  padding: 10px 12px;
}

.ui-v10-modal .topup-service-context-v106 .service-logo {
  width: 38px;
  height: 38px;
}

.ui-v10-modal .topup-service-context-v106 > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ui-v10-modal .topup-service-context-v106 small {
  color: var(--air-text-faint);
  font-size: 9px;
}

.ui-v10-modal .topup-service-context-v106 b {
  overflow: hidden;
  color: var(--air-text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-v10-modal .topup-service-context-v106 > strong {
  color: var(--air-text);
  font-size: 15px;
  font-weight: 690;
}

.ui-v10-modal .topup-minimum-note-v106 {
  margin: -3px 0 0;
  border-radius: 11px;
  background: var(--air-warning-soft);
  color: var(--air-warning);
  padding: 9px 11px;
  font-size: 10px;
  line-height: 1.45;
}

@media (min-width: 741px) {
  .ui-v10-modal:has(.wallet-modal-v106) {
    width: min(880px, 100%);
  }

  .ui-v10-modal .wallet-modal-v106 {
    grid-template-columns: minmax(0, 1.16fr) minmax(270px, 0.84fr);
    column-gap: 18px;
    align-items: start;
  }

  .ui-v10-modal .wallet-balance-hero-v106 {
    grid-column: 1 / -1;
  }

  .ui-v10-modal .wallet-amount-field-v106,
  .ui-v10-modal .wallet-method-heading-v106,
  .ui-v10-modal .wallet-method-grid-v106,
  .ui-v10-modal .wallet-saved-methods,
  .ui-v10-modal .wallet-quote,
  .ui-v10-modal .wallet-submit-v106,
  .ui-v10-modal .wallet-message {
    grid-column: 1;
  }

  .ui-v10-modal .wallet-recent-v106 {
    grid-column: 2;
    grid-row: 2 / span 8;
    min-height: 100%;
    align-content: start;
    margin: 0;
    border: 1px solid var(--air-border);
    border-radius: 16px;
    background: var(--air-surface-muted);
    padding: 15px;
  }

  .ui-v10-modal .wallet-recent-v106 > span {
    min-height: 62px;
  }
}

@media (max-width: 640px) {
  .ui-v10-auth.auth-page {
    padding: 12px;
  }

  .ui-v10-auth .auth-choice-card,
  .ui-v10-auth .auth-choice-card.is-email {
    max-height: calc(100dvh - 24px);
    border-radius: 24px;
    padding: 42px 20px 24px;
  }

  .ui-v10-auth .auth-modal-close-v106 {
    top: 13px;
    right: 13px;
    width: 38px;
    height: 38px;
    font-size: 26px;
  }

  .ui-v10-auth .auth-choice-head h1 {
    font-size: 50px;
  }

  .ui-v10-auth .auth-choice-head p {
    margin-top: 16px;
    font-size: 14px;
  }

  .ui-v10-auth .auth-provider-native,
  .ui-v10-auth .auth-provider-visual-v106,
  .ui-v10-auth .auth-choice-card .auth-email-entry {
    min-height: 54px;
  }

  .ui-v10-auth .auth-provider-native > span {
    min-height: 54px;
    font-size: 13px;
  }

  .ui-v10-auth .auth-provider-visual-v106,
  .ui-v10-auth .auth-choice-card .auth-email-entry {
    padding: 0 38px;
    font-size: 13px;
  }

  .ui-v10-modal:has(.wallet-modal-v106) {
    width: 100%;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }

  .ui-v10-modal .wallet-balance-hero-v106 {
    min-height: 102px;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px !important;
  }

  .ui-v10-modal .wallet-balance-copy-v106 > strong {
    font-size: 33px;
  }

  .ui-v10-modal .wallet-balance-note-v106 {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    border-top: 1px solid var(--air-border);
    border-left: 0;
    padding-top: 9px;
    padding-left: 0;
  }

  .ui-v10-modal .wallet-method-grid-v106 {
    grid-template-columns: 1fr;
  }

  .ui-v10-modal .wallet-method-grid-v106 > button {
    min-height: 68px;
  }

  .ui-v10-modal .wallet-quote > span {
    min-height: 58px;
    padding: 8px 10px;
  }

  .ui-v10-modal .wallet-recent-v106 > div:first-child small,
  .ui-v10-modal .wallet-method-heading-v106 small {
    display: none;
  }

  .ui-v10-modal .guide-card-plans-head-v106 {
    align-items: start;
  }

  .ui-v10-modal .guide-card-plans-head-v106 em {
    margin-top: -2px;
  }

  .ui-v10-modal .guide-card-plan-grid-v106 {
    grid-template-columns: 1fr;
  }

  .ui-v10-modal .guide-card-funding-v106 {
    grid-template-columns: 1fr 1fr;
  }

  .ui-v10-modal .guide-card-funding-v106 > span:first-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--air-border);
  }

  .ui-v10-modal .guide-card-funding-v106 > span:nth-child(2) {
    border-right: 1px solid var(--air-border);
  }

  .ui-v10-modal .guide-card-topup-v106 {
    padding: 0 13px;
  }
}
/*
 * Alpina Pay v10.7.1
 * Final release layer: calm canvas, floating navigation, branded plan chooser,
 * compact wallet and a restrained two-product card system.
 */

body:has(.ui-v10) {
  min-width: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: #f4f5f7 !important;
  background-image:
    radial-gradient(circle at 8% 2%, rgba(92, 106, 223, 0.075), transparent 31rem),
    radial-gradient(circle at 92% 22%, rgba(77, 173, 186, 0.055), transparent 28rem) !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-attachment: fixed !important;
}

html[data-app-theme="dark"] body:has(.ui-v10) {
  background-color: #0b0d11 !important;
  background-image:
    radial-gradient(circle at 8% 0, rgba(91, 106, 228, 0.11), transparent 31rem),
    radial-gradient(circle at 94% 24%, rgba(62, 145, 165, 0.065), transparent 28rem) !important;
}

.ui-v10 .services-home {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-v10.pay-home {
  padding-top: 12px !important;
}

.ui-v10 .pay-home-topbar {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 50px !important;
  position: sticky !important;
  top: 10px !important;
  z-index: 80 !important;
  grid-column: 1 / -1 !important;
  margin: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.ui-v10 .pay-brand {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid color-mix(in srgb, var(--air-border) 76%, transparent) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--air-surface) 88%, transparent) !important;
  padding: 0 14px !important;
  box-shadow: 0 18px 48px -38px rgba(7, 17, 31, 0.48) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
}

.ui-v10 .topbar-wallet-pill {
  min-width: 112px !important;
  height: 42px !important;
  gap: 10px !important;
  background: color-mix(in srgb, var(--air-surface-muted) 78%, transparent) !important;
}

.ui-v10 .topbar-wallet-pill small {
  display: none !important;
}

.ui-v10 .topbar-wallet-pill b {
  font-size: 14px !important;
}

.ui-v10 .user-menu-trigger,
.ui-v10 .user-avatar,
.ui-v10 .user-avatar-button {
  aspect-ratio: 1 !important;
}

.ui-v10 .user-menu-trigger img,
.ui-v10 .user-avatar img,
.ui-v10 .user-avatar-button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* One service mark belongs to the selector, not to every tile. */
.ui-v10-modal.modal-wide:has(.service-modal-v105) {
  padding: 20px !important;
}

.ui-v10-modal .service-modal-v105,
.ui-v10-modal .service-order-flow-v105 {
  gap: 14px !important;
}

.ui-v10-modal .service-guide-head-v105 {
  min-height: 52px !important;
  padding-bottom: 12px !important;
}

.ui-v10-modal .service-plan-picker-v105 {
  --service-mark: none;
  --service-tint: 82, 98, 236;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 10px !important;
  border: 1px solid color-mix(in srgb, var(--air-border) 76%, transparent) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(rgba(var(--service-tint), 0.045), rgba(var(--service-tint), 0.045)),
    color-mix(in srgb, var(--air-surface) 94%, transparent) !important;
  padding: 14px !important;
}

.ui-v10-modal .service-plan-picker-v105.is-vpn {
  --service-mark: url("/logo.svg");
  --service-tint: 43, 134, 232;
}

.ui-v10-modal .service-plan-picker-v105.is-chatgpt {
  --service-mark: url("/assets/brands/chatgpt.svg");
  --service-tint: 16, 163, 127;
}

.ui-v10-modal .service-plan-picker-v105.is-chatgpt .service-plan-grid-v105 small {
  display: none !important;
}

.ui-v10-modal .service-plan-picker-v105.is-telegram {
  --service-mark: url("/assets/brands/telegram.svg");
  --service-tint: 36, 161, 222;
}

.ui-v10-modal .service-plan-picker-v105::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -58px;
  right: -36px;
  width: 184px;
  height: 184px;
  background-image: var(--service-mark);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.065;
  filter: blur(6px) saturate(1.15);
  transform: rotate(-7deg);
  pointer-events: none;
}

.ui-v10-modal .service-plan-heading,
.ui-v10-modal .service-plan-grid-v105 {
  position: relative;
  z-index: 1;
}

.ui-v10-modal .service-plan-grid-v105.has-four {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ui-v10-modal .service-plan-grid-v105 > button {
  min-height: 78px !important;
  position: relative;
  overflow: visible !important;
  grid-template-rows: 1fr auto !important;
  border-color: color-mix(in srgb, var(--air-border) 86%, transparent) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--air-surface-muted) 88%, rgba(var(--service-tint), 0.07)) !important;
  padding: 12px !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.ui-v10-modal .service-plan-grid-v105 > button:hover {
  transform: translateY(-1px) !important;
}

.ui-v10-modal .service-plan-grid-v105 > button.active {
  border-color: rgba(var(--service-tint), 0.7) !important;
  background: color-mix(in srgb, var(--air-surface) 82%, rgba(var(--service-tint), 0.18)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--service-tint), 0.18),
    0 16px 34px -30px rgba(var(--service-tint), 0.72) !important;
}

.ui-v10-modal .service-plan-grid-v105 > button.active > i {
  border-color: rgb(var(--service-tint)) !important;
  background: rgb(var(--service-tint)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-surface) 94%, transparent) !important;
}

.ui-v10-modal .service-plan-grid-v105 > button b {
  font-size: 15px !important;
}

.ui-v10-modal .service-plan-grid-v105 > button strong {
  font-size: 19px !important;
}

.ui-v10-modal .service-plan-discount-v107 {
  position: absolute;
  top: -8px;
  right: 10px;
  border: 0;
  border-radius: 999px;
  background: #0a9962;
  color: #fff;
  padding: 3px 7px;
  box-shadow: 0 5px 12px rgba(10, 153, 98, 0.18);
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.2;
  transform: rotate(1.5deg);
}

html[data-app-theme="dark"] .ui-v10-modal .service-plan-picker-v105::before {
  filter: blur(6px) saturate(0.8) brightness(1.8) grayscale(0.15);
}

/* Telegram recipient preview is informational, not a fake verification badge. */
.telegram-recipient-preview-v107 {
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  border: 1px solid var(--air-border);
  border-radius: 14px;
  background: var(--air-surface-muted);
  padding: 6px 10px;
}

.telegram-recipient-preview-v107 img,
.telegram-recipient-preview-v107 > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #229ed9;
  color: #fff;
  object-fit: cover;
  font-style: normal;
  font-weight: 750;
}

.telegram-recipient-preview-v107 > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.telegram-recipient-preview-v107 b {
  overflow: hidden;
  color: var(--air-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-recipient-preview-v107 small {
  color: var(--air-text-faint);
  font-size: 10px;
}

.telegram-recipient-preview-v107 em {
  border-radius: 999px;
  background: rgba(16, 163, 127, 0.12);
  color: #08785e;
  padding: 6px 8px;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.telegram-recipient-preview-v107 > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--air-text-faint);
  font-size: 11px;
}

.telegram-recipient-preview-v107.is-loading,
.telegram-recipient-preview-v107.is-missing,
.telegram-recipient-preview-v107.is-invalid {
  min-height: 44px;
  grid-template-columns: 1fr;
}

.telegram-recipient-preview-v107.is-missing,
.telegram-recipient-preview-v107.is-invalid {
  border-color: rgba(205, 73, 84, 0.2);
  background: rgba(205, 73, 84, 0.06);
}

.service-checkout-account-v105.has-recipient {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  column-gap: 10px !important;
}

.service-checkout-account-v105.has-recipient img {
  width: 38px;
  height: 38px;
  grid-row: 1 / span 3;
  border-radius: 50%;
  object-fit: cover;
}

.service-checkout-account-v105.has-recipient em {
  color: var(--air-text-faint);
  font-size: 10px;
  font-style: normal;
}

.ui-v10-modal .service-order-fields-v105 {
  gap: 9px !important;
}

.ui-v10-modal .service-order-fields-v105 label {
  gap: 6px !important;
}

.ui-v10-modal .service-order-fields-v105 input,
.ui-v10-modal .service-order-fields-v105 .service-usd-input {
  min-height: 46px !important;
}

.ui-v10-modal .service-order-total-v105 {
  min-height: 55px !important;
}

.ui-v10-modal .service-primary-action-v105,
.ui-v10-modal .service-order-submit.service-primary-action-v105 {
  min-height: 48px !important;
}

/* Wallet top-up: balance, amount, two methods, total and action. */
.ui-v10-modal:has(.wallet-modal-v106) {
  width: min(468px, 100%) !important;
  max-height: min(92dvh, 680px) !important;
  padding: 20px !important;
}

.ui-v10-modal:has(.wallet-modal-v106) .modal-head {
  min-height: 42px !important;
  margin-bottom: 9px !important;
  padding: 0 !important;
}

.ui-v10-modal:has(.wallet-modal-v106) .modal-head h2 {
  font-size: 23px !important;
}

.ui-v10-modal .wallet-modal-v106 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.ui-v10-modal .wallet-balance-hero-v106 {
  min-height: 54px !important;
  display: grid !important;
  grid-column: auto !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid var(--air-border) !important;
  border-radius: 14px !important;
  background: var(--air-surface-muted) !important;
  padding: 10px 13px !important;
}

.ui-v10-modal .wallet-balance-hero-v106 > span {
  color: var(--air-text-soft) !important;
  font-size: 12px !important;
  font-weight: 540 !important;
}

.ui-v10-modal .wallet-balance-hero-v106 > strong {
  color: var(--air-text) !important;
  font-size: 21px !important;
  font-weight: 690 !important;
  letter-spacing: -0.035em !important;
}

.ui-v10-modal .wallet-amount-field-v106,
.ui-v10-modal .wallet-method-heading-v106,
.ui-v10-modal .wallet-method-grid-v106,
.ui-v10-modal .wallet-saved-methods,
.ui-v10-modal .wallet-quote,
.ui-v10-modal .wallet-submit-v106,
.ui-v10-modal .wallet-message {
  grid-column: auto !important;
}

.ui-v10-modal .wallet-amount-field-v106 > div {
  min-height: 58px !important;
}

.ui-v10-modal .wallet-amount-field-v106 input {
  font-size: 26px !important;
}

.ui-v10-modal .wallet-method-grid-v106 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ui-v10-modal .wallet-method-grid-v106 > button {
  min-height: 64px !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  gap: 8px !important;
  border-radius: 13px !important;
  padding: 9px !important;
}

.ui-v10-modal .wallet-method-grid-v106 .payment-brand {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

.ui-v10-modal .wallet-method-grid-v106 .payment-brand svg {
  width: 27px !important;
  height: 27px !important;
}

.ui-v10-modal .wallet-quote-v107 {
  grid-template-columns: 1fr 1fr !important;
  border-radius: 14px !important;
}

.ui-v10-modal .wallet-quote-v107 > span {
  grid-column: auto !important;
  min-height: 50px !important;
  padding: 8px 11px !important;
}

.ui-v10-modal .wallet-quote-v107 > span + span {
  border-left: 1px solid var(--air-border) !important;
}

.ui-v10-modal .wallet-submit-v106 {
  min-height: 52px !important;
  position: relative !important;
  justify-content: center !important;
}

.ui-v10-modal .wallet-submit-label-v106 {
  justify-content: center !important;
  padding-left: 0 !important;
}

.ui-v10-modal .wallet-submit-v106 > svg {
  position: absolute !important;
  right: 17px !important;
}

/* Card face: ice for subscriptions, graphite for universal. */
.ui-v10 .alpina-card-face {
  isolation: isolate;
  grid-template-rows: auto 1fr auto !important;
  border-color: rgba(55, 66, 112, 0.14) !important;
  border-radius: 23px !important;
  background: linear-gradient(142deg, #eef1ff 0%, #dfe5ff 54%, #d8def8 100%) !important;
  color: #12182a !important;
  box-shadow:
    0 24px 56px -40px rgba(39, 49, 92, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

.ui-v10 .alpina-card-face.product-universal {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(145deg, #20242d 0%, #12151c 58%, #0d0f14 100%) !important;
  color: #f7f8fb !important;
  box-shadow:
    0 28px 62px -40px rgba(2, 5, 12, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.ui-v10 .alpina-card-face::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 58%;
  aspect-ratio: 1;
  top: -38%;
  right: -8%;
  border: clamp(30px, 5vw, 48px) solid rgba(73, 88, 173, 0.105);
  border-radius: 50%;
  pointer-events: none;
}

.ui-v10 .alpina-card-face.product-universal::before {
  border-color: rgba(145, 160, 255, 0.1);
}

.ui-v10 .alpina-card-face::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.34), transparent 31% 100%) !important;
  pointer-events: none;
}

.ui-v10 .alpina-card-face.product-universal::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.075), transparent 31% 100%) !important;
}

.ui-v10 .alpina-card-face:not(.product-universal) .alpina-card-wordmark,
.ui-v10 .alpina-card-face:not(.product-universal) .alpina-card-wordmark i,
.ui-v10 .alpina-card-face:not(.product-universal) .alpina-card-face-number,
.ui-v10 .alpina-card-face:not(.product-universal) .alpina-card-face-foot b {
  color: #12182a !important;
}

.ui-v10 .alpina-card-face:not(.product-universal) .alpina-card-wordmark i,
.ui-v10 .alpina-card-face:not(.product-universal) .alpina-card-face-foot small {
  color: rgba(18, 24, 42, 0.52) !important;
}

.ui-v10 .alpina-card-face:not(.product-universal) .card-network-mark.visa {
  color: #172554 !important;
}

.ui-v10 .alpina-card-face-number {
  align-self: end !important;
  padding-bottom: clamp(19px, 5%, 27px) !important;
}

.ui-v10 .alpina-card-face-foot > span:first-child {
  max-width: 74% !important;
}

.ui-v10 .pay-card-screen {
  border-color: color-mix(in srgb, var(--air-border) 74%, transparent) !important;
  background: color-mix(in srgb, var(--air-surface) 82%, transparent) !important;
  box-shadow: 0 30px 72px -58px rgba(7, 17, 31, 0.38) !important;
  backdrop-filter: blur(18px) !important;
}

.ui-v10 .card-overview-v105 {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 4px 0 !important;
}

.ui-v10 .card-overview-v105 .pay-main-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ui-v10 .card-overview-v105 .pay-main-buttons > button:first-child {
  grid-column: 1 / -1 !important;
  min-height: 48px !important;
}

.ui-v10 .card-overview-v105 .pay-main-buttons > button:nth-child(2),
.ui-v10 .card-overview-v105 .pay-main-buttons > button:nth-child(3) {
  min-height: 43px !important;
}

.ui-v10 .card-overview-v105 .card-rules-trigger {
  min-height: 49px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
}

.ui-v10 .card-overview-v105 .card-rules-trigger > strong {
  width: 29px !important;
  height: 29px !important;
  font-size: 10px !important;
}

/* Card management: one primary action and two quiet actions. */
.card-manage-status {
  grid-template-columns: 10px minmax(0, 1fr) 44px 34px !important;
  min-height: 68px !important;
  border: 1px solid var(--air-border) !important;
  border-radius: 15px !important;
  background: var(--air-surface-muted) !important;
  color: var(--air-text) !important;
}

.card-manage-status b {
  color: var(--air-text) !important;
}

.card-manage-status small {
  color: var(--air-text-faint) !important;
}

.card-manage-refresh-v107 {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--air-border);
  border-radius: 10px;
  background: var(--air-surface);
  color: var(--air-text);
  padding: 0;
}

.card-manage-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.card-manage-grid button {
  min-height: 64px !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  justify-items: stretch;
  gap: 9px !important;
  border-radius: 14px !important;
  text-align: left !important;
}

.card-manage-grid button:first-child {
  grid-column: 1 / -1 !important;
  min-height: 70px !important;
  border-color: var(--air-text) !important;
  background: var(--air-text) !important;
  color: var(--air-bg) !important;
}

.card-manage-grid button:first-child b,
.card-manage-grid button:first-child small {
  color: inherit !important;
}

.card-manage-grid button > svg,
.card-manage-grid button > span:first-child {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--air-text) 9%, transparent) !important;
  color: var(--air-text);
  padding: 6px;
}

.card-manage-grid button > span:first-child {
  padding: 0;
}

.card-manage-grid button:first-child > span:first-child {
  background: color-mix(in srgb, var(--air-bg) 14%, transparent) !important;
  color: inherit !important;
}

.card-manage-grid button b {
  font-size: 12px !important;
}

.issue-another-card {
  min-height: 40px !important;
  border: 1px solid var(--air-border) !important;
  background: transparent !important;
  color: var(--air-text) !important;
  font-size: 10px !important;
}

@media (max-width: 720px) {
  .ui-v10-modal .service-guide-head-v105 {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
  }

  .ui-v10-modal .service-guide-head-v105 .service-status {
    grid-column: auto !important;
    justify-self: end !important;
  }

  .ui-v10 .pay-home-topbar {
    min-height: 48px !important;
    top: 7px !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
  }

  .ui-v10 .pay-brand {
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 11px !important;
  }

  .ui-v10 .topbar-wallet-pill {
    min-width: 108px !important;
  }

  .ui-v10-modal .service-plan-grid-v105.has-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ui-v10-modal .service-plan-grid-v105 > button {
    min-height: 78px !important;
    padding: 12px !important;
  }

  .ui-v10-modal .service-plan-grid-v105 > button b {
    font-size: 13px !important;
  }

  .ui-v10-modal .service-plan-grid-v105 > button strong {
    font-size: 16px !important;
  }

  .ui-v10-modal:has(.wallet-modal-v106) {
    width: 100% !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .ui-v10-modal .wallet-amount-field-v106 > div {
    min-height: 52px !important;
  }

  .ui-v10-modal .wallet-method-grid-v106 > button {
    min-height: 58px !important;
  }

  .ui-v10-modal .wallet-quote-v107 > span {
    min-height: 44px !important;
  }

  .ui-v10-modal .wallet-submit-v106 {
    min-height: 48px !important;
  }
}

@media (max-width: 460px) {
  .ui-v10-modal .service-plan-grid-v105.has-three {
    grid-template-columns: 1fr !important;
  }

  .ui-v10-modal .service-plan-picker-v105.is-chatgpt .service-plan-grid-v105.has-three,
  .ui-v10-modal .service-plan-picker-v105.is-telegram .service-plan-grid-v105.has-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ui-v10-modal .service-plan-grid-v105 > button {
    min-height: 76px !important;
  }

  .ui-v10-modal .service-plan-picker-v105.is-chatgpt .service-plan-grid-v105 > button,
  .ui-v10-modal .service-plan-picker-v105.is-telegram .service-plan-grid-v105 > button {
    padding: 10px 8px !important;
  }

  .ui-v10-modal .service-plan-picker-v105.is-chatgpt .service-plan-grid-v105 > button b,
  .ui-v10-modal .service-plan-picker-v105.is-telegram .service-plan-grid-v105 > button b {
    font-size: 12px !important;
  }

  .ui-v10-modal .service-plan-picker-v105.is-chatgpt .service-plan-grid-v105 > button strong,
  .ui-v10-modal .service-plan-picker-v105.is-telegram .service-plan-grid-v105 > button strong {
    font-size: 15px !important;
  }

  .telegram-recipient-preview-v107 {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .telegram-recipient-preview-v107 img,
  .telegram-recipient-preview-v107 > i {
    width: 38px;
    height: 38px;
  }

  .telegram-recipient-preview-v107 em {
    grid-column: 1 / -1;
    width: max-content;
    margin-left: 48px;
  }

  .card-manage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .card-manage-grid button {
    min-height: 64px !important;
    padding: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-v10-modal .service-plan-grid-v105 > button,
  .ui-v10 .card-deck-track {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .ui-v10-modal .service-plan-grid-v105 > button:hover {
    transform: none !important;
  }
}