:root {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f5f6f8;
  --ink: #262d35;
  --muted: #737d88;
  --line: #e9ecf0;
  --blue: #337e9f;
  --blue-soft: #edf5f9;
  --green: #337e9f;
  --action: #2b3540;
  --action-hover: #3a4856;
  --action-text: #ffffff;
  --danger: #b4424d;
  --shadow: 0 16px 45px -30px #20324426;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); transition: background .2s, color .2s; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; transition: background .16s, border-color .16s; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.site-header { height: 84px; background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1140px; margin: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 23px; letter-spacing: -.7px; font-weight: 700; flex-shrink: 0; }
.brand-light { font-weight: 500; }
.brand-planet { object-fit: contain; width: 42px; height: 42px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.currency-control { position: relative; display: flex; align-items: center; }
.currency-control select { appearance: none; background: var(--surface-soft); border: 0; height: 40px; padding: 0 31px 0 13px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; border-radius: 12px; }
.currency-control option { background: var(--surface); color: var(--ink); }
.currency-control .icon { position: absolute; right: 10px; width: 13px; pointer-events: none; color: var(--muted); }
.icon-button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--surface-soft); }
.icon-button:hover { background: var(--line); }
.theme-toggle .icon { width: 19px; height: 19px; color: var(--muted); }
.header-divider { height: 20px; width: 1px; background: var(--line); margin: 0 8px; }
.login-button { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; border: 0; background: transparent; padding: 11px 12px; border-radius: 12px; }
.login-button:hover { background: var(--surface-soft); }
.login-button .icon { width: 17px; height: 17px; }
.register-button { background: var(--action); color: var(--action-text); border: 0; border-radius: 12px; padding: 12px 17px; font-size: 14px; font-weight: 500; }
.register-button:hover { background: var(--action-hover); }
.page-shell { max-width: 936px; margin: 0 auto; padding: 66px 28px 30px; }
.page-heading { margin-bottom: 30px; }
.category-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 14px; }
.category-label .icon { width: 17px; height: 17px; color: var(--blue); }
h1 { font-size: 36px; line-height: 1.2; letter-spacing: -1.2px; font-weight: 600; margin: 0 0 11px; }
.page-heading p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.store-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 18px; align-items: start; }
.methods-card, .purchase-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: 0 2px 3px #182c3802; }
.card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; }
.step-number { color: var(--muted); background: var(--surface-soft); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; font-size: 12px; font-weight: 500; flex-shrink: 0; }
h2 { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.35px; margin: 0; }
.methods { display: flex; flex-direction: column; gap: 10px; }
.method { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 17px; min-height: 82px; padding: 16px; background: var(--surface-soft); text-align: left; }
.method-icon { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--muted); flex-shrink: 0; }
.method-icon .icon { width: 20px; height: 20px; }
.method-description { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.method b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.method b span { font-weight: 400; }
.method small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.method.active { background: var(--blue-soft); border-color: #b9d5e3; }
.method.active .method-icon { background: #dcecf4; color: var(--blue); }
.method.active small { color: var(--blue); }
.selected-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; flex-shrink: 0; }
.selected-check .icon { width: 11px; height: 11px; stroke-width: 2.5; }
.method.unavailable { color: #9ba2aa; }
.method.unavailable .method-icon { color: #abb1b8; background: transparent; }
.method.unavailable small { color: #9ba2aa; }
.method-lock { width: 14px; height: 14px; color: #aab1b9; }
.method-footnote { margin: 24px 0 0; display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 12px; line-height: 1.7; }
.method-footnote .icon { width: 16px; height: 16px; margin-top: 2px; }
.amount-field { display: flex; align-items: center; gap: 12px; background: var(--surface-soft); border: 1px solid transparent; border-radius: 17px; padding: 0 18px; height: 81px; }
.amount-field:focus-within { border-color: #9bbdce; }
.amount-field>.icon { width: 26px; height: 26px; color: var(--blue); }
.amount-field input { font-weight: 500; font-size: 33px; letter-spacing: -.8px; color: var(--ink); border: 0; background: none; min-width: 0; width: 100%; height: 100%; outline: none; appearance: textfield; -moz-appearance: textfield; }
.amount-field input::-webkit-outer-spin-button, .amount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-field input:focus-visible { outline: none; }
.amount-field>span { font-size: 14px; color: var(--muted); }
.presets { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.presets button { font-size: 14px; font-weight: 500; padding: 11px 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.presets button:hover, .presets button[aria-pressed=true] { background: var(--blue-soft); border-color: #bad2df; color: var(--blue); }
.amount-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.field-hint, .rate { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.rate { white-space: nowrap; }
.error-text { color: var(--danger); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.price-summary { margin-top: 27px; padding-top: 22px; border-top: 1px solid var(--line); }
.summary-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; color: var(--muted); }
.summary-line b { display: flex; gap: 5px; align-items: center; color: var(--ink); font-size: 14px; font-weight: 500; }
.summary-line .icon { width: 15px; height: 15px; color: var(--muted); }
.total-line { margin-top: 17px; }
.total-line>span { color: var(--ink); }
.total-line strong { color: var(--ink); font-size: 29px; letter-spacing: -1px; font-weight: 600; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; min-height: 53px; background: var(--action); color: var(--action-text); border: 1px solid transparent; border-radius: 14px; font-size: 15px; font-weight: 500; }
.primary-button:hover:not(:disabled) { background: var(--action-hover); }
.primary-button:disabled { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
.buy-button { width: 100%; margin-top: 21px; justify-content: space-between; }
.buy-button .icon { width: 19px; height: 19px; }
.card-note { text-align: center; color: var(--muted); font-size: 12px; margin: 13px 0 0; line-height: 1.5; }
.site-footer { max-width: 936px; margin: 0 auto; padding: 0 28px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.site-footer>div { display: flex; flex-direction: column; gap: 3px; }
.footer-brand { font-weight: 500; color: var(--ink); }
.preview-label { font-size: 12px; }
.overline { font-size: 11px; letter-spacing: .8px; font-weight: 500; color: var(--muted); }


.modal{border:1px solid var(--line);border-radius:23px;padding:0;background:var(--surface);color:var(--ink);width:calc(100% - 32px);max-width:510px;max-height:calc(100dvh - 40px);box-shadow:0 25px 100px #0003;overflow:auto}.modal::backdrop{background:#10253565;backdrop-filter:blur(5px)}.modal-shell{padding:28px}.modal-header{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:22px}.modal-header h2{font-size:25px;margin:2px 0 0}.modal-header .icon-button{width:34px;height:34px;border:0;background:var(--surface-soft);flex-shrink:0}.modal-subtitle{color:var(--muted);font-size:14px;line-height:1.65;margin:10px 0 22px}.flow-steps{display:flex;gap:10px;margin:0 0 24px;padding:0;list-style:none}.flow-steps li{flex:1;display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);border-bottom:2px solid var(--line);padding-bottom:11px}.flow-steps li span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-soft);font-size:10px;font-weight:800}.flow-steps li.current{color:var(--blue);border-color:var(--blue);font-weight:800}.flow-steps li.current span{background:var(--blue-soft);color:var(--blue)}.flow-steps li.complete{color:var(--green);border-color:#a7d45f}.order-chip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;background:var(--surface-soft);border-radius:12px;font-size:13px;margin-bottom:22px}.order-chip strong{display:flex;align-items:center;gap:7px}.order-chip .icon{width:18px;height:18px;color:var(--blue)}.order-chip>span{font-size:12px;color:var(--muted)}.form-label{font-size:14px;font-weight:700;display:block;margin-bottom:9px}.text-input{width:100%;height:49px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft);color:var(--ink);padding:0 14px;font-size:15px;min-width:0}.text-input:focus{border-color:var(--blue)}.search-row{display:flex;gap:8px}.search-row .primary-button{min-height:49px;padding:12px 15px}.demo-note{font-size:12px;line-height:1.6;color:var(--muted);background:var(--surface-soft);border-radius:10px;padding:11px 13px;margin:15px 0}.demo-note b{font-weight:700;color:var(--ink)}.search-status{font-size:14px;line-height:1.6;color:var(--muted);padding:22px 8px;text-align:center}.profile-results{display:flex;flex-direction:column;gap:9px;margin:15px 0;max-height:240px;overflow:auto}.profile-option{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);border:1px solid var(--line);padding:12px;border-radius:12px;text-align:left}.profile-option:hover{background:var(--surface-soft)}.profile-option.selected{border-color:var(--blue);background:var(--blue-soft)}.avatar{display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border-radius:13px;width:51px;height:51px;flex-shrink:0;overflow:hidden}.avatar .icon{width:26px;height:26px}.avatar img{width:100%;height:100%;object-fit:cover}.profile-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.profile-text b{font-size:14px;overflow-wrap:anywhere}.profile-text small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.selection-circle{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0}.profile-option.selected .selection-circle{background:var(--blue);color:#fff;border-color:var(--blue)}.selection-circle .icon{width:13px;height:13px}.modal-actions{display:flex;gap:10px;margin-top:23px}.modal-actions>.primary-button{flex:1}.secondary-button{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 17px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}.secondary-button:hover{background:var(--surface-soft)}.secondary-button .icon{width:17px;height:17px}.confirm-profile{text-align:center;padding:22px 15px;background:var(--surface-soft);border-radius:16px}.confirm-profile .avatar{width:86px;height:86px;border-radius:22px;margin:0 auto 12px;background:var(--surface)}.confirm-profile .avatar .icon{width:43px;height:43px}.confirm-profile h3{font-size:21px;margin:0 0 5px;overflow-wrap:anywhere}.confirm-profile p{font-size:14px;color:var(--muted);margin:0 0 12px;overflow-wrap:anywhere}.profile-link{font-size:12px;color:var(--blue);text-decoration:underline;text-underline-offset:3px}.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.6;margin:20px 0 0;cursor:pointer}.checkbox-row input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue);flex-shrink:0}.review-list{margin:18px 0 0}.review-list>div{display:flex;justify-content:space-between;gap:18px;font-size:14px;padding:13px 0;border-bottom:1px solid var(--line)}.review-list dt{color:var(--muted)}.review-list dd{font-weight:700;margin:0;text-align:right;overflow-wrap:anywhere;min-width:0}.review-total{font-size:20px!important;border-bottom:0!important}.review-total dd{font-size:25px}.status-panel{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:13px;line-height:1.6;color:var(--muted)}.status-panel .icon{color:var(--blue);width:19px;height:19px;margin-top:2px}.auth-tabs{display:flex;background:var(--surface-soft);padding:4px;border-radius:12px;margin:20px 0 23px}.auth-tabs button{width:50%;background:transparent;border:0;border-radius:9px;padding:10px;font-size:14px;font-weight:700;color:var(--muted)}.auth-tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 2px 5px #00000008}.form-group{margin-bottom:17px}.password-wrap{position:relative}.password-wrap input{padding-right:80px}.password-toggle{position:absolute;right:8px;top:8px;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:700;height:33px;padding:0 5px}.auth-submit{width:100%;margin-top:22px}.auth-note{font-size:12px;color:var(--muted);line-height:1.6;text-align:center;margin-bottom:0}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:15px 22px;border-radius:13px;max-width:calc(100% - 32px);z-index:10;font-size:14px;box-shadow:var(--shadow)}body:has(dialog[open]){overflow:hidden}


.modal { border-radius: 24px; }
.modal-header h2 { font-weight: 600; letter-spacing: -.6px; }
.flow-steps li { font-size: 12px; }
.flow-steps li.complete { color: var(--blue); border-color: #bad2df; }
.checkbox-row { font-size: 14px; }
.secondary-button { border-radius: 14px; font-weight: 500; }
.auth-tabs button { font-weight: 500; }
.text-input { border-radius: 13px; height: 51px; }
.confirm-profile h3 { font-weight: 600; }
.password-toggle { font-size: 12px; }
.order-chip { flex-wrap: wrap; row-gap: 6px; }
.text-button { display: inline; padding: 0; background: transparent; border: 0; color: var(--blue); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.spinner { width: 20px; height: 20px; border: 2px solid #ffffff40; border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-theme=dark] { color-scheme: dark; --bg: #15191e; --surface: #1d232a; --surface-soft: #252c34; --ink: #e5eaf0; --muted: #9ba5b0; --line: #303842; --blue: #8fbad1; --blue-soft: #273540; --green: #8fbad1; --action: #b2ccda; --action-hover: #c3d9e4; --action-text: #202c34; --shadow: 0 20px 50px -25px #0008; --danger: #ee98a0; }
[data-theme=dark] .method.active { border-color: #4c697a; }
[data-theme=dark] .method.active .method-icon { background: #354a57; }
[data-theme=dark] .selected-check { color: #1e2d36; }
[data-theme=dark] .method.unavailable, [data-theme=dark] .method.unavailable small, [data-theme=dark] .method.unavailable .method-icon { color: #7d8792; }
[data-theme=dark] .presets button[aria-pressed=true], [data-theme=dark] .presets button:hover { border-color: #4c697a; }
@media(min-width:1600px) { .page-shell { padding-top: 86px; } }
@media(max-width:900px) { .store-layout { grid-template-columns: .88fr 1.12fr; gap: 14px; } .methods-card,.purchase-card { padding: 22px; } .method { padding: 14px 12px; gap: 10px; } .method-icon { width: 33px; height: 33px; } .method b { font-size: 13px; } .page-shell { padding-top: 48px; } }
@media(max-width:700px) { .site-header { height: 74px; } .header-inner { padding: 0 20px; gap: 12px; } .brand { font-size: 22px; } .brand-planet { width: 37px; height: 37px; } .register-button { display: none; } .header-divider { margin: 0 3px; } .header-actions { gap: 6px; } .login-button { padding: 11px 7px; } .page-shell { padding: 37px 20px 23px; } .page-heading { margin-bottom: 24px; } h1 { font-size: 32px; } .page-heading p { font-size: 15px; } .category-label { margin-bottom: 11px; } .store-layout { display: flex; flex-direction: column; gap: 14px; } .methods-card, .purchase-card { width: 100%; border-radius: 21px; padding: 23px; } .card-heading { margin-bottom: 20px; } .methods { flex-direction: row; gap: 8px; } .method { width: 33.333%; min-height: 119px; flex-direction: column; align-items: flex-start; gap: 10px; border-radius: 15px; padding: 13px 12px; } .method-icon { width: 28px; height: 28px; border-radius: 9px; background: transparent; } .method.active .method-icon { background: transparent; } .method-description { gap: 5px; } .method b { font-size: 14px; } .method b span { font-size: 12px; } .method small { font-size: 11px; } .selected-check, .method-lock { position: absolute; top: 16px; right: 12px; } .selected-check { width: 15px; height: 15px; } .selected-check .icon { width: 9px; height: 9px; } .method-lock { width: 12px; height: 12px; } .method-footnote { margin-top: 15px; font-size: 12px; } .method-footnote span { max-width: 300px; } .amount-field { height: 77px; } .price-summary { margin-top: 23px; } .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 24px 28px; } .site-footer>div { flex-direction: row; gap: 8px; flex-wrap: wrap; } .preview-label { font-size: 11px; } }
@media(max-width:430px) { .header-inner { padding: 0 14px; gap: 6px; } .brand { font-size: 20px; gap: 3px; } .brand-planet { width: 33px; height: 33px; } .header-divider, .login-button .icon { display: none; } .header-actions { gap: 5px; } .currency-control select { font-size: 12px; padding-left: 10px; padding-right: 26px; } .currency-control .icon { right: 8px; width: 12px; } .icon-button { width: 36px; height: 40px; } .login-button { font-size: 13px; padding-left: 7px; padding-right: 2px; } .page-shell { padding-left: 16px; padding-right: 16px; padding-top: 30px; } h1 { font-size: 30px; } .methods-card,.purchase-card { padding: 21px; } h2 { font-size: 16px; } .method { padding: 12px 9px; min-height: 116px; } .method b { font-size: 12px; } .method b span { font-size: 10px; } .method small { font-size: 10px; } .selected-check,.method-lock { right: 9px; } .amount-meta { gap: 5px; } .amount-meta .field-hint, .rate { font-size: 11px; } .modal-shell { padding: 23px; } .flow-steps { gap: 6px; } .flow-steps li { font-size: 10px; gap: 5px; } .flow-steps li span { width: 18px; height: 18px; } .modal-actions { gap: 8px; } .modal-actions .primary-button,.modal-actions .secondary-button { font-size: 13px; padding: 14px; } }
@media(max-width:360px) { .header-actions { gap: 3px; } .brand { font-size: 18px; } .brand-planet { width: 29px; height: 29px; } .currency-control select { padding-left: 8px; padding-right: 23px; font-size: 11px; } .login-button { font-size: 12px; } .methods-card,.purchase-card { padding: 17px; } .method { padding: 11px 7px; } .method b { font-size: 11px; } .method b span { font-size: 10px; } .method-footnote { font-size: 11px; } .modal-shell { padding: 18px; } }
@media(max-width:700px) {
  .methods { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .method { width:100%; min-height:84px; flex-direction:row; align-items:center; padding:13px 10px; gap:8px; }
  .method.active { grid-column:1 / -1; min-height:65px; padding:13px; }
  .method-description { min-width:0; }
  .method b,.method b span { font-size:14px; }
  .method small { font-size:12px; }
  .method-icon { width:24px; height:28px; }
  .method.active .method-icon { width:32px; height:32px; background:#dcecf4; }
  .selected-check { position:static; width:18px; height:18px; }
  .selected-check .icon { width:11px; height:11px; }
  .method-lock { display:none; }
  .method-footnote { font-size:12px; }
  .flow-steps li { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }