:root {
  color-scheme: dark;
  --page: #171322;
  --text: #f5f1fa;
  --muted: #bdb3cc;
  --lavender: #d5c3ff;
  --edge: #dfcaff3b;
  --shine: inset 0 1px 0 #f5e9ff24, inset 0 -1px 0 #9a7be410;
  --glass: linear-gradient(145deg, #b5a1da23, #7c5bab14 48%, #ac8cda22);
  --bottom: max(env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #100d18;
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #e4d5ff; outline-offset: 3px;
}
h1, h2, p { margin: 0; }
h1 { font-size: clamp(34px, 9.7vw, 43px); line-height: .99; font-weight: 460; letter-spacing: -.055em; }
h2 { font-size: 16px; line-height: 1.3; font-weight: 550; letter-spacing: -.02em; }
p { line-height: 1.52; }
svg { flex: none; }

.shell {
  position: relative;
  isolation: isolate;
  max-width: 480px;
  min-height: 100dvh;
  margin-inline: auto;
  background: #181421;
}
.shell::before {
  position: fixed;
  z-index: -1;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: min(100%, 480px);
  content: "";
  background:
    radial-gradient(ellipse 78% 31% at -12% 5%, #6644a9bc, transparent 84%),
    radial-gradient(ellipse 65% 22% at 32% 28%, #39265d52, transparent 85%),
    radial-gradient(ellipse 70% 50% at 106% 67%, #5a399f95, transparent 78%),
    radial-gradient(ellipse 56% 32% at 86% 92%, #6642a86e, transparent 88%),
    linear-gradient(125deg, #1a1428 4%, #171421 36%, #14111a 61%, #241935);
  pointer-events: none;
}
main {
  min-height: 100dvh;
  padding: 12px clamp(15px, 5vw, 25px) calc(100px + var(--bottom));
}
.preview-note {
  padding: 6px 8px;
  border-bottom: 1px solid #e9dbff19;
  background: #d1b6ff12;
  text-align: center;
  font-size: 11px;
  color: #d4c7e6;
}

.mast, .screen-toolbar, .section-heading, .sheet-heading, .item-name { display: flex; align-items: center; justify-content: space-between; }
.mast, .screen-toolbar { min-height: 44px; gap: 8px; }
.toolbar-button, .round {
  display: inline-grid; place-items: center; width: 41px; height: 41px; flex: none;
  padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #d6cce4;
}
.round { border-color: var(--edge); background: var(--glass); box-shadow: var(--shine); }
.brand-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 8px 3px 12px;
  border: 1px solid #d5c0fd31; border-radius: 999px; background: #bd9ef61b; box-shadow: var(--shine);
  font-size: 13px; font-weight: 550;
}
.brand-chip span { padding: 2px 6px; border-radius: 999px; background: #8564d859; color: #efe6ff; font-size: 10px; }
.brand-chip svg { color: var(--muted); }
.intro { padding: 34px 0 33px; text-align: center; }
.intro p { margin-bottom: 15px; color: #e0d5ee; font-size: 14px; overflow-wrap: anywhere; }
.intro h1 { color: #f6f1fb; text-wrap: balance; }
.page-heading { margin-bottom: 19px; }
.page-heading h1 { margin-top: 9px; overflow-wrap: anywhere; }

.search {
  display: flex; align-items: center; min-height: 47px; padding: 4px 7px 4px 13px;
  border: 1px solid #d8c7f84b; border-radius: 999px; background: #261c3c59; box-shadow: var(--shine);
}
.search:focus-within { border-color: #d9bfff; }
.search input { flex: 1; width: 100%; min-width: 0; align-self: stretch; color: var(--text); background: transparent; border: 0; padding: 4px 5px 4px 0; font-size: 14px; }
.search input::placeholder { color: #bbb0cc; }
.search input:focus-visible { outline: none; }
.search button {
  width: 33px; height: 33px; border: 1px solid #f7ebff21; border-radius: 50%; padding: 0;
  display: grid; place-items: center; flex: none; color: #f6eaff; background: #bca3ec34;
}
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 9px 1px 4px; scrollbar-width: thin; }
.quick-models { margin-inline: 0 calc(-1 * clamp(15px, 5vw, 25px)); padding-right: clamp(15px, 5vw, 25px); scrollbar-width: none; }
.quick-models::-webkit-scrollbar { display: none; }
.chips a, .chips button, .item-tags span {
  display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 33px; padding: 4px 9px;
  border: 1px solid #e5d8ff32; border-radius: 10px; background: #e8d9ff10;
  color: #eee7f8; font-size: 12px;
}
.chips svg { color: #d6c8e9; }
.chips button[aria-pressed="true"], .item-tags span:first-child {
  background: linear-gradient(155deg, #bc9aff83, #8563d561); border-color: #dfc8ff69; box-shadow: var(--shine);
}
.item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.section { margin-top: 23px; }
.section-heading { gap: 8px; margin-bottom: 11px; }
.section-heading a, .quiet {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 2px; color: var(--lavender);
  background: transparent; border: 0; font-size: 12px;
}
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.overview-card, .item-metric, .item-row, .balance-card, .tip, .order {
  border: 1px solid var(--edge);
  background: var(--glass);
  box-shadow: var(--shine);
  -webkit-backdrop-filter: blur(15px) saturate(145%);
  backdrop-filter: blur(15px) saturate(145%);
}
.overview-card {
  position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden;
  min-height: 181px; padding: 13px 11px 11px; border-radius: 20px;
  background:
    radial-gradient(ellipse at 12% -4%, #a985d589, transparent 56%),
    radial-gradient(ellipse at 85% 52%, #6645a84a, transparent 80%),
    linear-gradient(150deg, #3928529c, #1d172b8c);
  border-top-color: #e7cbff7a;
  box-shadow: inset 0 1px 4px #ebd8ff33, inset -1px -1px 0 #b995ee2e;
}
.overview-card::before {
  position: absolute; inset: 0; z-index: -1; content: ""; opacity: .38;
  background-image: radial-gradient(circle, #d4bfff70 .55px, transparent .65px);
  background-size: 4px 4px; mask-image: linear-gradient(#000, transparent 44%, transparent 52%, #000);
}
.overview-card img {
  position: absolute; z-index: -1; top: 36px; left: 0; width: 100%; height: 99px; object-fit: fill;
  mask-image: linear-gradient(#000 60%, transparent 100%); pointer-events: none;
}
.overview-label { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 14px; }
.overview-hint { margin-top: 4px; color: #d0c2e2; font-size: 11px; }
.overview-card strong { margin-top: auto; font-size: clamp(24px, 7vw, 36px); font-weight: 550; letter-spacing: -.052em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.item-list, .order-list { display: grid; gap: 7px; }
.item-row {
  display: flex; align-items: center; gap: 9px; min-height: 57px; padding: 7px 9px;
  border-radius: 13px; font-size: 13px;
}
.row-title { min-width: 0; flex: 1; display: grid; gap: 3px; overflow-wrap: anywhere; }
.row-title strong { font-weight: 550; }
.row-title span { color: var(--muted); font-size: 11px; }
.row-end { display: inline-flex; gap: 5px; align-items: center; }
.row-end svg { color: var(--muted); }
.brand-icon {
  width: 35px; height: 35px; border-radius: 10px; display: inline-grid; place-items: center; flex: none;
  color: #f0e2ff; background: linear-gradient(155deg, #bd9cff59, #a081dc25); box-shadow: var(--shine);
}
.brand-icon.chatgpt { color: #cfefe5; background: #84caba33; }
.brand-icon.claude { color: #fbd0ba; background: #dd9d802e; }
.brand-icon.cursor { color: #dfd9fd; background: #a38cde3d; }
.brand-icon.grok { color: #f2e3ff; background: #bd9cff3d; }
.brand-icon.kimi { color: #c6ddfb; background: #8bb4eb32; }
.brand-icon.stars { color: #ffe3a6; background: #ffe3a624; }
.brand-large { width: 48px; height: 48px; border: 1px solid var(--edge); border-radius: 13px; }
.notice { display: grid; gap: 3px; align-content: center; justify-items: start; padding: 13px; color: var(--muted); border: 1px solid var(--edge); border-radius: 14px; background: #d1b6ff0b; font-size: 13px; }

.dock {
  position: fixed; z-index: 3; bottom: calc(9px + var(--bottom)); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 2px;
  width: min(calc(100% - 24px), 450px); min-height: 64px; padding: 4px 6px;
  border: 1px solid #d6bdfb36; border-radius: 27px;
  background: radial-gradient(ellipse at 49% -60%, #b898e563, transparent 68%),
    linear-gradient(115deg, #211933d9, #2f2149b8);
  box-shadow: var(--shine), 0 8px 26px #100a2291;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.dock a { display: grid; place-content: center; justify-items: center; gap: 3px; min-height: 45px; border-radius: 15px; color: #b9aec9; font-size: 10px; }
.dock a[aria-current="page"] { color: #fcf6ff; }
.dock a[aria-current="page"] svg { filter: drop-shadow(0 0 6px #c098ffb0); }
.dock-search {
  display: grid; place-items: center; justify-self: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid #ebd6ff7c; padding: 0; background: radial-gradient(at 28% 14%, #c5a8fc92, #60448768 62%, #3d2a615e);
  box-shadow: inset 0 1px 3px #fcf0ff57, 0 2px 13px #c495ff38;
}

.sort-heading { margin-top: 16px; }
.sort select { max-width: 142px; min-height: 33px; padding: 0 4px; background: #272036; border: 1px solid var(--edge); border-radius: 8px; color: #e1d6ef; font-size: 11px; }
.primary, .secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 7px 13px;
  border-radius: 13px; border: 1px solid #e5cfff83;
  background: linear-gradient(155deg, #9f79ef, #714bc7 70%, #623bb2);
  box-shadow: var(--shine); color: #fff; font-size: 14px; font-weight: 650;
}
.secondary { border-color: var(--edge); background: #ae8deb20; }
.block { width: 100%; }
.load-more { margin-top: 13px; }

.item-heading { margin-bottom: 15px; }
.item-name { align-items: flex-start; gap: 10px; }
.item-name h1 { max-inline-size: 8.3ch; text-wrap: balance; }
.item-name .brand-large { margin-top: 9px; }
.item-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(84px, auto)); gap: 8px; }
.item-hero {
  position: relative; isolation: isolate; overflow: hidden; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0; padding: 13px 11px; border: 1px solid #e7ccff83; border-radius: 20px; box-shadow: var(--shine);
  background: radial-gradient(ellipse 65% 36% at 90% 100%, #eee3ff 0%, #b99afa9c 41%, transparent 100%),
    linear-gradient(154deg, #a080fa 0%, #7550d5 43%, #3a266b 80%, #574089);
}
.item-hero::after {
  position: absolute; inset: 32px -14px 25px; z-index: -1; content: "";
  background: url('/glass-flow.svg#prism') center / 100% auto no-repeat; opacity: .63;
}
.item-hero small, .item-metric span { display: block; color: #ebe0fa; margin-top: 4px; font-size: 11px; }
.item-hero span, .item-metric > span { font-size: 13px; }
.item-hero strong { font-size: clamp(25px, 7.1vw, 36px); font-weight: 600; letter-spacing: -.055em; text-shadow: 0 2px 10px #2d135891; overflow-wrap: anywhere; }
.item-metric { display: flex; flex-direction: column; justify-content: space-between; gap: 7px; min-width: 0; padding: 10px; border-radius: 17px; }
.item-hero + .item-metric { border-top-color: #e3c8ff63; }
.item-metric strong { display: flex; align-items: center; gap: 4px; color: #f7ecff; font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.item-metric strong svg { color: #e2caff; }
.details { margin-top: 20px; }
.details p {
  margin-top: 8px; padding: 10px 11px; color: #eee6fa; font-size: 13px; overflow-wrap: anywhere;
  border: 1px solid var(--edge); border-radius: 13px; background: var(--glass); box-shadow: var(--shine);
}
.detail-action { margin-top: 16px; }
.detail-action p, .tip p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.balance-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 7px; min-height: 139px; padding: 13px; border-radius: 19px; }
.balance-copy { display: grid; gap: 7px; min-width: 0; }
.card-label, .rate { display: flex; align-items: center; gap: 5px; width: fit-content; font-size: 12px; color: #e9dcf9; }
.rate { padding: 4px 6px; border: 1px solid #e5d6ff39; border-radius: 7px; background: #d0b5ff1b; }
.balance-copy strong { font-size: clamp(27px, 8vw, 39px); font-weight: 550; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.balance-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none;
  min-height: 38px; padding: 0 8px; border: 1px solid #d5baff70; border-radius: 10px;
  background: #b98cff43; box-shadow: var(--shine); font-size: 12px; font-weight: 650;
}
.tip { display: flex; gap: 10px; margin-top: 15px; padding: 11px; border-radius: 13px; }
.tip svg { color: var(--lavender); }
.tip h2 { font-size: 14px; }
.positive { color: #a8ebca; }
.ref-id { color: #c4b4d7; font-size: 10px; overflow-wrap: anywhere; }
.order { border-radius: 13px; overflow: hidden; }
.order .item-row { border: 0; box-shadow: none; background: transparent; backdrop-filter: none; }
.order-bottom { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 9px 5px; }
.order-bottom button { flex: none; }
.placeholder { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 16vh 10px 30px; color: var(--muted); }
.placeholder h1 { color: var(--text); }

dialog {
  width: min(calc(100% - 24px), 428px); padding: 15px; border: 1px solid #dec4ff69; border-radius: 21px;
  color: var(--text); background: linear-gradient(145deg, #463368ee, #241b36ef); box-shadow: var(--shine), 0 14px 44px #0d071bbb;
  -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%);
}
dialog::backdrop { background: #130d22a6; }
.sheet-heading { gap: 8px; margin-bottom: 10px; }
.sheet-heading h2 { font-size: 21px; }
.sheet-links { display: grid; gap: 7px; }
.sheet-links a { justify-content: flex-start; }
dialog p { margin: 6px 0 11px; font-size: 14px; }
dialog .sheet-note { color: #e0d2ef; }
dialog .sheet-error { margin: 9px 0 0; color: #ffc4cf; }
#topup-form { display: grid; gap: 8px; }
#topup-form label { font-size: 13px; }
#topup-form input { width: 100%; padding: 8px 10px; border: 1px solid var(--edge); border-radius: 9px; background: #1d152d; color: var(--text); }
.star-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 4px; }
.star-packs button { padding: 4px 1px; font-size: 12px; }
.delivery { white-space: pre-wrap; overflow-wrap: anywhere; color: #f2e8fa; line-height: 1.55; max-height: 60vh; overflow: auto; }
#toast {
  position: fixed; z-index: 4; bottom: calc(83px + var(--bottom)); left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 30px), 420px); padding: 10px 12px; border: 1px solid var(--edge);
  border-radius: 13px; background: #3b2a58; color: var(--text); font-size: 13px; box-shadow: var(--shine), 0 8px 25px #0006;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 600px) {
  body { background: radial-gradient(ellipse at 50% 4%, #422b73, #120e1d 71%) fixed; }
  .shell { box-shadow: 0 0 65px #0a061d9e; }
}
@media (max-width: 345px) {
  .order-bottom { align-items: flex-start; flex-direction: column; }
}