@font-face { font-family: Manrope; src: url(/static/manrope.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
:root { --page:#16171c; --card:#1B1C22; --field:#25262E; --line:#2b2c35; --text:#fff; --muted:#a4a6b2; --brand:#ffb020; --auto:#7B3FE4; --ver:#2F6BFF; --error:#FF4D5E; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.45 Manrope, Inter, system-ui, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.notice { background: #2c2510; color: #ffd98a; font-size: 14px; padding: 8px 16px; text-align: center; }
.notice.warn { background: #3a1a20; color: #ffc0c6; }
.top { max-width: 1600px; margin: 0 auto; padding: 18px 28px 4px; }
.logo { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 24px; letter-spacing: -.5px; text-decoration: none; color: var(--brand); }
.logo svg { width: 24px; height: 24px; }
main { max-width: 1600px; margin: 0 auto; padding: 0 28px 48px; }

.shelf-wrap { position: relative; margin: 8px 0 28px; }
.shelf { display: flex; gap: 16px; overflow-x: auto; padding: 8px 2px; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.plat { flex: 0 0 80px; text-align: center; text-decoration: none; transition: transform .15s; }
.plat:hover { transform: translateY(-2px); }
.plat-ic { position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin-bottom: 7px; border-radius: 20px; background: linear-gradient(145deg, var(--a), var(--b)); }
.plat-ic svg { width: 44px; height: 44px; color: #fff; }
.plat.on .plat-ic { outline: 2px solid var(--brand); outline-offset: 0; box-shadow: 0 0 16px rgba(255,176,32,.4); }
.plat-b { position: absolute; top: -6px; right: -6px; background: #d9dbe3; color: #15161b; font: 700 11px/1 Manrope, system-ui, sans-serif; padding: 4px 6px; border-radius: 8px; }
.plat-n { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-go { position: absolute; top: 28px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3a3b46; background: rgba(27,28,34,.85); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
.shelf-go.r { right: -6px; }
.shelf-go.l { left: -6px; }

.buy { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.rail { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid #2c2d33; border-radius: 31px; padding: 5px 0; }
.rail-i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; opacity: .55; transition: opacity .15s, background-color .15s; }
.rail-i svg { width: 30px; height: 30px; }
.rail-i:hover { opacity: .85; }
.rail-i.on { background: #3a3b42; opacity: 1; }
.buy-card { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 24px; background: #1c1d22; border: 1px solid #2c2d33; border-radius: 32px; padding: 20px; }
.cover { height: 222px; border-radius: 20px; overflow: hidden; }
.art { display: block; width: 100%; height: 100%; font-family: Manrope, system-ui, sans-serif; }
.form { position: relative; min-width: 0; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "title fee" "tiles pay" "badges side"; gap: 16px 24px; align-items: center; }
.form h1 { grid-area: title; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; }
.fee { grid-area: fee; justify-self: end; margin: 0; color: #b6b8c2; font-size: 16px; }
.fee b { display: inline-block; margin-left: 4px; padding: 0 10px; border-radius: 12px; color: #fff; font-weight: 800; background: linear-gradient(90deg, #2f6bff, #2cb5ff); }
.tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: center; height: 76px; background: #292a31; border-radius: 14px; padding: 0 20px; border: 1px solid transparent; margin: 0; }
.tile span, .tile > label { display: block; color: #a4a6b2; font-size: 15px; line-height: 1.3; }
.tile input, .tile select { width: 100%; background: none; border: 0; color: #fff; font: 700 19px/1.3 Manrope, system-ui, sans-serif; padding: 0; outline: none; appearance: none; -moz-appearance: textfield; }
.tile input::-webkit-outer-spin-button, .tile input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tile input::placeholder { color: #8e909c; font-weight: 500; }
.tile select option { background: #292a31; }
.tile:focus-within { border-color: var(--brand); }
.tile.bad { border-color: var(--error); }
.tile.bare { flex-direction: row; align-items: center; }
.tile.bare input { font-size: 18px; font-weight: 500; flex: 1; min-width: 0; }
.tile.sel select { padding-right: 28px; cursor: pointer; }
.chev { position: absolute; right: 20px; top: 26px; width: 24px; height: 24px; color: #b6b8c2; pointer-events: none; }
.info { flex: none; width: 20px; height: 20px; color: #8e909c; }
.val { display: flex; align-items: center; gap: 6px; }
.val input { width: auto; flex: 0 1 auto; field-sizing: content; min-width: 2ch; max-width: 100%; }
.suf { display: inline-flex; font-style: normal; }
.suf svg { width: 20px; height: 20px; }
.val b { font-size: 19px; }
.money { padding-right: 130px; }
.cur { position: absolute; right: 20px; top: 25px; display: flex; gap: 12px; }
.cur button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #111216; color: #fff; font: 700 13px Manrope, system-ui, sans-serif; cursor: pointer; }
.cur button.on { background: #2463eb; }
.err-t { display: block; margin-top: 4px; }
.pay { grid-area: pay; position: relative; }
.btn { display: block; width: 100%; height: 52px; min-height: 52px; border: 0; border-bottom: 2px solid rgba(0,0,0,.28); border-radius: 8px; color: #fff; font: 700 18px Manrope, system-ui, sans-serif; background: linear-gradient(90deg, var(--b1, #2463eb), var(--b2, #2463eb)); cursor: pointer; }
.btn:disabled { color: rgba(255,255,255,.42); filter: saturate(.75) brightness(.72); cursor: default; }
.pill { position: absolute; right: 4px; top: -13px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 3px 0 9px; border-radius: 14px; background: #fff; border: 1.5px solid #15161b; color: #15161b; font-size: 15px; }
.pill b { font-weight: 800; }
.coin { display: block; width: 19px; height: 19px; border-radius: 50%; background: conic-gradient(from 40deg, #ffb020, #ff5ab0, #7b3fe4, #2f6bff, #ffb020); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); }
.badges { grid-area: badges; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.b { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.b svg { width: 16px; height: 16px; }
.b.auto { background: #4b1b6e; color: #f08cff; }
.b.ver { background: #16306b; color: #a9c3ff; }
.side { grid-area: side; justify-self: end; }
.rate { margin: 0; color: #b6b8c2; font-size: 16px; text-align: right; }
.rate:empty { display: none; }
.promo { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: #4f7dff; font: 500 16px Manrope, system-ui, sans-serif; cursor: pointer; }
.promo svg { width: 18px; height: 18px; }
.promo-in { width: 180px; height: 34px; padding: 0 12px; border: 1px solid #383a45; border-radius: 8px; background: #292a31; color: #fff; font: 500 15px Manrope, system-ui, sans-serif; }
.form-err { grid-column: 1 / -1; margin: 0; }

.block { margin-top: 36px; }
.block h2 { font-size: 22px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.steps b, .steps span { display: block; }
.steps span { color: var(--muted); font-size: 14px; margin-top: 4px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px; max-width: 560px; margin: 16px auto; }
.panel h1 { font-size: 24px; margin: 0 0 14px; word-break: break-word; }
.panel .tile { height: auto; padding: 10px 14px; margin-bottom: 12px; }
.panel .tile span { font-size: 13px; }
.sum { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; }
.sum dt { color: var(--muted); }
.sum dd { margin: 0; text-align: right; word-break: break-word; }
.big { font-size: 22px; font-weight: 700; }
.methods { border: 0; padding: 0; margin: 0 0 12px; }
.methods legend { color: var(--muted); font-size: 13px; margin-bottom: 6px; padding: 0; }
.methods label { display: block; padding: 6px 0; }
.chk { display: block; padding: 6px 0; font-size: 14px; }
.chk input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.wide { margin-top: 12px; height: 56px; --b1:#2463eb; --b2:#2463eb; }
.status { font-size: 18px; font-weight: 600; color: var(--brand); margin: 0 0 12px; }
.prog { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 18px; font-size: 13px; }
.prog li { flex: 1; text-align: center; padding: 8px 2px; background: var(--field); border-radius: 10px; color: var(--muted); }
.prog li.on { background: var(--auto); color: #fff; }
.code { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--field); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.code code { font-size: 18px; font-weight: 700; word-break: break-all; }
.chip { background: #33343e; color: var(--text); border: 0; border-radius: 10px; padding: 8px 12px; font: 600 14px Manrope, system-ui, sans-serif; cursor: pointer; min-height: 40px; }
footer { max-width: 1600px; margin: 0 auto; padding: 20px 28px 40px; color: var(--muted); font-size: 13px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }

@media (max-width: 1240px) {
  .buy-card { grid-template-columns: 220px minmax(0, 1fr); }
  .cover { height: auto; aspect-ratio: 300 / 222; align-self: center; }
  .form { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title fee" "tiles tiles" "pay pay" "badges side"; gap: 12px; }
}
@media (max-width: 767px) {
  .top, main, footer { padding-left: 16px; padding-right: 16px; }
  .shelf-wrap { margin: 6px -16px 12px; }
  .shelf { padding: 8px 16px; gap: 14px; }
  .shelf-go { display: none; }
  .buy { grid-template-columns: 1fr; gap: 8px; }
  .rail { flex-direction: row; justify-content: space-between; border-radius: 16px; padding: 4px; background: #1c1d22; }
  .rail-i { flex: 1 1 0; height: 44px; width: auto; border-radius: 12px; }
  .rail-i svg { width: 26px; height: 26px; }
  .buy-card { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
  .cover { display: none; }
  .form { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "badges badges" "tiles tiles" "fee side" "pay pay"; gap: 8px; }
  .form h1 { font-size: 18px; }
  .fee { justify-self: start; font-size: 14px; }
  .fee b { padding: 0 8px; }
  .tiles { gap: 8px; }
  .tile { height: 60px; padding: 0 12px; border-radius: 12px; }
  .tile span, .tile > label { font-size: 12px; }
  .tile input, .tile select { font-size: 16px; }
  .tile.bare input { font-size: 15px; }
  .chev { right: 10px; top: 18px; }
  .money { position: static; padding-right: 12px; }
  .cur { top: 0; right: 0; gap: 8px; }
  .b { height: 22px; font-size: 12px; padding: 0 7px; }
  .b svg { width: 14px; height: 14px; }
  .side { justify-self: end; }
  .promo { font-size: 14px; }
  .rate { font-size: 14px; }
  .pay { position: sticky; bottom: 8px; z-index: 2; margin-top: 8px; }
  .pill { right: 2px; top: -13px; }
  .steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.plat-ic img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; } .rail-i img { width: 30px; height: 30px; object-fit: contain; }
.plat-ic img { width: 62%; height: 62%; border-radius: 0; object-fit: contain; }

/* Liquid glass: blocks refract colored light placed behind them. */
body { background: #0e0f15; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(620px 420px at 12% 18%, rgba(70,110,255,.42), transparent 70%),
  radial-gradient(560px 460px at 88% 12%, rgba(170,70,255,.34), transparent 70%),
  radial-gradient(700px 480px at 62% 92%, rgba(0,190,200,.26), transparent 70%); }
main { padding-top: 18px; }
.buy { position: relative; isolation: isolate; }
.buy::before { content: ""; position: absolute; inset: -30px 8% -30px 4%; z-index: -1; pointer-events: none; opacity: .6; filter: blur(70px); background: linear-gradient(100deg, var(--b1), var(--b2)); }
.buy-card, .rail, .panel, .steps li {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 45%, rgba(255,255,255,.1));
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  backdrop-filter: blur(30px) saturate(185%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 1px 0 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.1), 0 26px 60px -22px rgba(0,0,0,.6);
}
.buy-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px 150px at 18% 0, rgba(255,255,255,.2), transparent 70%); }
.buy-card > * { position: relative; }
.rail { overflow-y: auto; max-height: 264px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-i { flex: none; }
.rail-i.on { background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.tile {
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.tile select option { background: #24252e; }
.tile input::placeholder { color: #b3b5c2; }
.tile span, .tile > label, .rate, .fee { color: #d0d2db; }
.cover { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 16px 34px -14px rgba(0,0,0,.65); }
.btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -10px var(--b1, #2463eb); }
.btn:disabled { box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.cur button { background: rgba(0,0,0,.42); }
@media (max-width: 767px) {
  .rail { max-height: none; overflow-x: auto; overflow-y: hidden; border-radius: 18px; }
  .rail-i { flex: 1 0 44px; }
  .buy-card { background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .buy-card::before { display: none; }
  .buy::before { inset: 20px 0; }
}
@media (max-width: 767px) { .money { -webkit-backdrop-filter: none; backdrop-filter: none; } }

.top { display: flex; align-items: center; justify-content: space-between; }
.acct-link { color: #e6e7ec; font-size: 14px; font-weight: 600; text-decoration: none; }
.gw-nav { margin-left: auto; margin-right: 18px; padding: 7px 14px; border-radius: 12px; background: var(--brand); color: #15161b; font-size: 14px; font-weight: 800; text-decoration: none; animation: gw-pulse 2.4s ease-in-out infinite; }
@keyframes gw-pulse { 50% { box-shadow: 0 0 0 7px rgba(255,176,32,.16); } }
@media (prefers-reduced-motion: reduce) { .gw-nav { animation: none; } }
.gw-banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 18px 22px; border-radius: 20px; background: rgba(255,176,32,.14); border: 1px solid rgba(255,176,32,.32); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-decoration: none; }
.note { color: #c3c5d0; font-size: 14px; margin: 10px 0 0; }
.note a { color: #fff; }
.panel.acct { max-width: 860px; }
.panel h2 { font-size: 18px; margin: 24px 0 10px; }
.acct-top { display: flex; justify-content: space-between; align-items: center; }
.acct-top h1 { margin: 0; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.stat b { font-size: 18px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.row-o { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.row-o a { flex: 1; min-width: 0; text-decoration: none; }
.row-o a span, .row-o > span:first-child { display: block; font-size: 13px; color: #c3c5d0; }
.row-o > span:first-child { flex: 1; }
.row-o .r { text-align: right; white-space: nowrap; }
.row-o small { display: block; color: #c3c5d0; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.chip.danger { color: #ff9aa4; }
#tg { margin-bottom: 12px; }
#tg-box { margin-bottom: 12px; }
#tg-box svg { width: 160px; height: 160px; border-radius: 12px; }
.btn.login { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-bottom: 16px; }
@media (max-width: 600px) { .row-o { flex-wrap: wrap; } .row-o a { flex-basis: 60%; } }

/* Owner content: only rendered when the owner has added something. */
.logo img { display: block; height: 28px; width: auto; max-width: 180px; }
.b.own { background: rgba(255,255,255,.14); color: #fff; }
.f-hint { display: block; margin-top: 4px; color: #c3c5d0; font-size: 12px; line-height: 1.35; }
.product-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.info-card, .banner {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 45%, rgba(255,255,255,.1));
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  backdrop-filter: blur(30px) saturate(185%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 1px 0 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.1), 0 26px 60px -22px rgba(0,0,0,.6);
}
.info-card { padding: 20px 22px; min-width: 0; }
.info-card h2 { font-size: 20px; margin: 0 0 8px; }
.info-text { color: #dcdde5; font-size: 15px; overflow-wrap: anywhere; }
.info-text p, .info-text ul, .info-text ol { margin: 0 0 8px; }
.info-text ul, .info-text ol { padding-left: 20px; }
.info-text a { color: var(--brand); }
.info-text h2, .info-text h3 { font-size: 16px; margin: 10px 0 6px; }
.banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.banner { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.banner img { display: block; width: 100%; height: 160px; object-fit: cover; }
.banner-t { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; }
.banner-t b { font-size: 18px; }
.banner-t span { color: #d0d2db; font-size: 14px; }
a.banner:hover { border-color: rgba(255,255,255,.4); }
@media (max-width: 767px) { .info-card { padding: 16px; border-radius: 18px; } .banner { border-radius: 18px; } .banner img { height: 130px; } }