:root {
  color-scheme: dark;
  --bg: #0e0b27;
  --card: rgba(32, 27, 72, 0.72);
  --card-border: rgba(255, 255, 255, 0.11);
  --text: #f7f5ff;
  --muted: #aaa5c8;
  --violet: #8b6cff;
  --violet-light: #b9a8ff;
  --cyan: #5ce1e6;
  --danger: #ff829b;
  --success: #6fe4b2;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(107, 72, 255, 0.36), transparent 42%),
    linear-gradient(155deg, #16103d 0%, var(--bg) 48%, #09071b 100%);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; border-radius: 50%; filter: blur(2px); opacity: .28; pointer-events: none; }
.ambient--one { width: 260px; height: 260px; top: 25%; right: -190px; background: #7c5cff; box-shadow: 0 0 100px 40px #7c5cff; }
.ambient--two { width: 220px; height: 220px; bottom: 5%; left: -180px; background: #25b8d0; box-shadow: 0 0 110px 30px #25b8d0; }
.page-shell { width: calc(100% - 28px); max-width: 620px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 0 max(36px, env(safe-area-inset-bottom)); position: relative; }
.hero { display: flex; gap: 16px; align-items: center; margin: 10px 6px 28px; }
.hero h1 { margin: 2px 0 5px; font-size: clamp(30px, 8vw, 42px); letter-spacing: -.04em; }
.hero p { margin: 0; color: var(--muted); font-size: 14px; }
.hero .eyebrow { color: var(--cyan); font-size: 10px; letter-spacing: .24em; font-weight: 800; }
.brand-mark { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-content: center; border-radius: 18px; transform: rotate(45deg); background: linear-gradient(135deg, #a68cff, #5d42ed); box-shadow: 0 16px 38px rgba(90, 61, 221, .42), inset 0 1px rgba(255,255,255,.34); }
.brand-mark span { display: block; width: 22px; height: 5px; border-radius: 9px; background: white; margin: 2px; transform: rotate(-45deg); opacity: .92; }
.glass-card, .summary-card { border: 1px solid var(--card-border); background: var(--card); box-shadow: 0 22px 54px rgba(3, 1, 20, .27), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.glass-card { border-radius: 22px; padding: 20px; margin-bottom: 14px; }
.section-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.section-heading h2 { font-size: 17px; margin: 0 0 4px; }
.section-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.step { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: rgba(139, 108, 255, .16); color: var(--violet-light); font-size: 11px; font-weight: 800; }
.search-box { display: flex; align-items: center; height: 54px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(8, 6, 28, .42); transition: .2s ease; }
.search-box:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,108,255,.15); }
.search-box input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; color: var(--text); background: transparent; padding: 0 8px; }
.search-box input::placeholder { color: #777293; }
.search-icon { width: 17px; height: 17px; border: 2px solid var(--muted); border-radius: 50%; margin-left: 17px; position: relative; }
.search-icon::after { content: ""; position: absolute; width: 7px; height: 2px; background: var(--muted); right: -6px; bottom: -3px; transform: rotate(45deg); }
.text-button { border: 0; background: transparent; color: var(--violet-light); font-weight: 700; padding: 12px 16px; cursor: pointer; }
.text-button:disabled { opacity: .5; cursor: wait; }
.field-hint { min-height: 18px; margin: 7px 3px 0; color: var(--muted); font-size: 12px; }
.field-hint.is-error { color: var(--danger); }
.user-results { display: grid; gap: 9px; }
.user-results:not(:empty) { margin-top: 10px; }
.user-card { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.045); color: var(--text); display: flex; align-items: center; gap: 10px; padding: 14px 15px; text-align: left; cursor: pointer; transition: .2s ease; }
.user-card:hover, .user-card.is-selected { border-color: var(--violet); background: rgba(139,108,255,.13); transform: translateY(-1px); }
.user-info { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
.user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.user-uid { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.07); font-size: 11px; line-height: 1; white-space: nowrap; }
.selected-check { flex: 0 0 auto; margin-left: auto; color: var(--success); opacity: 0; font-size: 20px; }
.user-card.is-selected .selected-check { opacity: 1; }
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tier-card { min-height: 78px; padding: 11px 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.045); cursor: pointer; transition: .2s ease; }
.tier-card strong { font-size: 18px; }
.tier-diamonds { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 12px; margin-top: 7px; }
.tier-diamonds b { font-weight: 600; }
.diamond-icon { display: inline-flex; width: 15px; height: 14px; flex: 0 0 auto; filter: drop-shadow(0 2px 5px rgba(92,225,230,.35)); }
.diamond-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.diamond-icon__top { fill: #a996ff; }
.diamond-icon__left { fill: #5ce1e6; }
.diamond-icon__right { fill: #7468f5; }
.diamond-icon__shine { fill: rgba(255,255,255,.74); }
.tier-card:hover, .tier-card.is-selected { border-color: var(--violet); background: linear-gradient(145deg, rgba(139,108,255,.24), rgba(92,225,230,.08)); box-shadow: 0 10px 24px rgba(25, 13, 80, .24); }
.manual-toggle { width: 100%; margin-top: 12px; padding: 12px 3px 4px; display: flex; justify-content: space-between; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.chevron { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.manual-toggle[aria-expanded="true"] .chevron { transform: rotate(225deg); }
.manual-panel { padding-top: 12px; }
.manual-panel label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.money-input { display: flex; align-items: center; height: 52px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(8,6,28,.42); padding: 0 16px; }
.money-input span { color: var(--violet-light); font-size: 20px; font-weight: 700; }
.money-input input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 22px; font-weight: 800; padding-left: 9px; }
.channel-list { display: grid; gap: 10px; }
.channel-card { display: flex; align-items: center; width: 100%; min-height: 58px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.04); cursor: pointer; text-align: left; }
.channel-card.is-selected { border-color: var(--violet); background: rgba(139,108,255,.12); }
.channel-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; margin-right: 11px; background: #6d57e9; font-weight: 900; }
.channel-card small { display: block; color: var(--muted); margin-top: 2px; }
.radio-dot { width: 20px; height: 20px; border: 2px solid #625d7d; border-radius: 50%; margin-left: auto; position: relative; }
.channel-card.is-selected .radio-dot { border-color: var(--violet-light); }
.channel-card.is-selected .radio-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--violet-light); }
.empty-state { color: var(--muted); text-align: center; padding: 20px 8px; font-size: 13px; }
.skeleton { min-height: 78px; border-radius: 15px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 220% 100%; animation: shimmer 1.4s infinite; }
.summary-card { border-radius: 20px; margin: 18px 0 14px; padding: 17px 20px; }
.summary-card > div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.summary-card span { color: var(--muted); font-size: 13px; }
.summary-card strong { font-size: 14px; }
.summary-card .diamond-value { color: var(--cyan); font-size: 20px; }
.diamond-value .diamond-icon { width: 17px; height: 16px; margin-right: 6px; }
.primary-button { width: 100%; min-height: 56px; border: 0; border-radius: 17px; background: linear-gradient(105deg, #6b50eb, #9b75ff 60%, #6e65ee); color: white; font-weight: 800; font-size: 16px; box-shadow: 0 15px 32px rgba(91, 61, 220, .34); cursor: pointer; position: relative; }
.primary-button:disabled { filter: grayscale(.45); opacity: .48; cursor: not-allowed; box-shadow: none; }
.primary-button.is-loading .button-label { opacity: 0; }
.button-loader { display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border: 3px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }
.primary-button.is-loading .button-loader { display: block; }
.security-note { text-align: center; color: var(--muted); font-size: 11px; margin: 13px 0 0; }
.security-note span { color: var(--success); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: max(30px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 12px; background: rgba(18,14,46,.95); border: 1px solid var(--card-border); box-shadow: 0 15px 40px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: .25s ease; font-size: 13px; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.order-dialog { width: min(calc(100% - 36px), 410px); border: 1px solid var(--card-border); border-radius: 23px; padding: 28px; color: var(--text); background: #211a4d; text-align: center; }
.order-dialog::backdrop { background: rgba(4,2,18,.72); backdrop-filter: blur(6px); }
.order-dialog h2 { margin: 10px 0 8px; }
.order-dialog p { color: var(--muted); line-height: 1.7; font-size: 13px; }
.dialog-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: auto; border-radius: 15px; color: #181033; background: var(--violet-light); font-size: 24px; font-weight: 900; }
.order-number { display: flex; justify-content: space-between; gap: 10px; padding: 13px; margin: 18px 0; border-radius: 12px; background: rgba(0,0,0,.18); font-size: 12px; }
.order-number span { color: var(--muted); }
.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; }
@keyframes shimmer { to { background-position: -120% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 390px) { .glass-card { padding: 17px; } .tier-grid { gap: 7px; } .tier-card strong { font-size: 16px; } }
@media (max-width: 350px) { .user-info { gap: 6px; } .user-uid { padding-inline: 6px; font-size: 10px; } }
@media (min-width: 700px) { .page-shell { padding-top: 48px; } .glass-card { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }