:root {
  --credit-paper: #fbfaf7;
  --credit-ink: #171413;
  --credit-muted: #746c66;
  --credit-line: rgba(32, 25, 21, .12);
  --credit-tomato: #d9152f;
  --credit-tomato-soft: #fff0f1;
  --credit-butter: #ffd56a;
}

html.credit-store-open { overflow: hidden; }
.credit-store[hidden] { display: none; }
.credit-store { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; width: 100%; max-width: 100%; overflow-x: hidden; padding: 24px; opacity: 0; transition: opacity .22s ease; font-family: Geist, "PingFang SC", "Microsoft YaHei", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.credit-store.is-open { opacity: 1; }
.credit-store-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 68% 18%, rgba(173, 73, 50, .25), transparent 34%), rgba(17, 14, 13, .68); backdrop-filter: blur(16px) saturate(.8); -webkit-backdrop-filter: blur(16px) saturate(.8); }
.credit-store-dialog { position: relative; width: min(1100px, 100%); max-height: min(820px, calc(100vh - 36px)); overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(255,255,255,.58); border-radius: 28px; background: var(--credit-paper); color: var(--credit-ink); box-shadow: 0 34px 110px rgba(12, 9, 8, .38); transform: translateY(18px) scale(.975); transition: transform .28s cubic-bezier(.2,.8,.2,1); outline: none; isolation: isolate; }
.credit-store-dialog::before { content: ""; position: absolute; z-index: -1; top: -170px; right: -120px; width: 430px; height: 330px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 182, 129, .2), rgba(255, 182, 129, 0) 68%); pointer-events: none; }
.credit-store.is-open .credit-store-dialog { transform: translateY(0) scale(1); }
.credit-store-close { position: absolute; z-index: 3; top: 22px; right: 22px; width: 42px; height: 42px; border: 1px solid var(--credit-line); border-radius: 50%; background: rgba(255,255,255,.78); color: var(--credit-ink); cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.credit-store-close span::before,.credit-store-close span::after { content: ""; position: absolute; top: 20px; left: 12px; width: 17px; height: 1.5px; border-radius: 999px; background: currentColor; }
.credit-store-close span::before { transform: rotate(45deg); }
.credit-store-close span::after { transform: rotate(-45deg); }
.credit-store-close:hover { transform: rotate(4deg) scale(1.04); background: #fff; border-color: rgba(217,21,47,.28); }
.credit-store-head { padding: 34px 40px 24px; }
.credit-store-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--credit-tomato); font-size: 12px; font-weight: 780; letter-spacing: .02em; }
.credit-store-brand-mark { position: relative; width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: linear-gradient(145deg, #f4b35e, #d9152f); box-shadow: 0 4px 12px rgba(79, 39, 25, .14); }
.credit-store-brand-mark::after { content: "K"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 900; }
.credit-store-brand-mark img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.credit-store-head h2 { width: 100%; max-width: 920px; margin: 13px 0 8px; padding-right: 58px; font-size: clamp(31px, 4vw, 48px); font-weight: 820; line-height: 1.04; letter-spacing: -.055em; }
.credit-store-head p { max-width: 68ch; margin: 0; color: var(--credit-muted); font-size: 14px; line-height: 1.7; }

.credit-store-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); grid-auto-flow: dense; gap: 16px; padding: 0 40px; }
.credit-package-panel,.credit-action-panel { min-width: 0; }
.credit-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.credit-section-heading h3 { margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; }
.credit-section-heading > span { color: var(--credit-muted); font-size: 11px; line-height: 1.4; text-align: right; }

.credit-receipt-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-flow: dense; align-items: stretch; padding: 5px; border: 1px solid var(--credit-line); border-radius: 20px; background: #eeebe6; }
.credit-package { position: relative; min-width: 0; min-height: 196px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 17px 17px; border: 0; border-radius: 15px; background: transparent; color: var(--credit-ink); text-align: left; cursor: pointer; transition: color .22s ease, background .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
.credit-package:hover { background: rgba(255,255,255,.72); transform: translateY(-2px); }
.credit-package.is-selected { z-index: 2; background: #1a1716; color: #fff; transform: translateY(-6px); box-shadow: 0 18px 34px rgba(21, 16, 13, .24); }
.credit-package.is-selected::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 78% 95%, rgba(235, 83, 51, .34), transparent 46%); pointer-events: none; }
.credit-package:focus-visible,.credit-store-close:focus-visible { outline: 3px solid rgba(217,21,47,.28); outline-offset: 3px; }
.credit-package-topline { position: relative; z-index: 1; width: 100%; min-height: 25px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.credit-package-price { font-size: 22px; font-weight: 820; line-height: 1; letter-spacing: -.04em; }
.credit-package-price small { margin-right: 2px; font-size: 12px; vertical-align: 5px; }
.credit-package-pick { flex: 0 0 auto; border-radius: 999px; padding: 5px 8px; background: var(--credit-butter); color: #342500; font-size: 9px; font-weight: 800; }
.credit-package-value { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; margin-top: 23px; }
.credit-package-value strong { font-size: clamp(23px, 2.2vw, 31px); line-height: .95; letter-spacing: -.045em; }
.credit-package-value small { color: currentColor; opacity: .62; font-size: 10px; font-weight: 720; }
.credit-package-breakdown { position: relative; z-index: 1; margin-top: 10px; color: currentColor; opacity: .58; font-size: 10px; }
.credit-package-bonus,.credit-package-starter { position: relative; z-index: 1; margin-top: auto; }
.credit-package-bonus { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 9px; background: var(--credit-tomato-soft); color: #a80e23; font-size: 9px; font-weight: 760; }
.credit-package-bonus strong { font-size: 11px; }
.credit-package.is-selected .credit-package-bonus { background: rgba(255, 213, 106, .16); color: #ffe092; }
.credit-package-starter { color: currentColor; opacity: .58; font-size: 10px; }

.credit-coverage { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--credit-line); border-radius: 16px; background: rgba(255,255,255,.72); }
.credit-coverage p { margin: 0 0 10px; color: var(--credit-muted); font-size: 10px; }
.credit-coverage p span { color: var(--credit-ink); font-weight: 760; }
.credit-coverage > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-flow: dense; gap: 8px; }
.credit-coverage > div > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.credit-coverage small { overflow: hidden; color: var(--credit-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.credit-coverage strong { font-size: 12px; white-space: nowrap; }

.credit-action-panel { display: flex; flex-direction: column; padding: 17px; border-radius: 20px; background: #24201e; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.credit-action-panel .credit-section-heading { align-items: flex-start; margin-bottom: 9px; }
.credit-action-panel .credit-section-heading h3 { font-size: 17px; }
.credit-action-panel .credit-section-heading > span { max-width: 130px; color: rgba(255,255,255,.5); }
.credit-action-list { display: flex; flex-direction: column; }
.credit-action-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.credit-action-row:last-child { border-bottom: 0; }
.credit-action-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.08); color: #ffd88a; font-size: 11px; font-weight: 800; }
.credit-action-row > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.credit-action-row b { font-size: 11px; }
.credit-action-row span small { overflow: hidden; color: rgba(255,255,255,.45); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.credit-action-row > strong { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: #fff; font-size: 15px; line-height: 1; white-space: nowrap; }
.credit-action-row > strong small { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 580; }
.credit-action-note { margin-top: auto; padding: 13px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 207, 113, .14), rgba(255,255,255,.055)); }
.credit-action-note strong,.credit-action-note span { display: block; }
.credit-action-note strong { color: #ffe7b5; font-size: 11px; }
.credit-action-note span { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 9px; line-height: 1.5; }

.credit-store-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 40px 30px; }
.credit-store-total { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 12px; }
.credit-store-total > span { grid-column: 1; color: var(--credit-muted); font-size: 10px; }
.credit-store-total > strong { grid-column: 1; margin-top: 2px; font-size: 22px; letter-spacing: -.035em; }
.credit-store-total > small { grid-column: 2; grid-row: 1 / span 2; align-self: center; border-radius: 999px; padding: 7px 10px; background: var(--credit-tomato-soft); color: #a80e23; font-size: 9px; font-weight: 720; }
.credit-store-submit { min-width: 300px; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 16px; background: #e5e1dc; color: #776f69; cursor: not-allowed; }
.credit-store-submit span { font-size: 13px; font-weight: 800; }
.credit-store-submit small { margin-top: 4px; color: #8d857f; font-size: 9px; }
.credit-store-payment { min-width: 300px; display: grid; grid-template-columns: auto minmax(220px,1fr); align-items: center; gap: 9px 12px; }
.credit-store-method { min-height: 60px; display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; align-content: center; column-gap: 8px; padding: 8px 13px; border: 1px solid rgba(22, 119, 255, .18); border-radius: 16px; background: #f4f8ff; color: #1c3659; }
.credit-store-method b { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #1677ff; color: #fff; font-size: 15px; }
.credit-store-method span { align-self: end; font-size: 11px; font-weight: 780; }
.credit-store-method small { align-self: start; color: #70839d; font-size: 8px; }
.credit-store-submit:not(:disabled) { background: #171413; color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgba(23,20,19,.17); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.credit-store-submit:not(:disabled):hover { transform: translateY(-2px); background: #d9152f; box-shadow: 0 14px 30px rgba(217,21,47,.22); }
.credit-store-submit:not(:disabled) small { color: rgba(255,255,255,.62); }
.credit-store-submit.is-loading span::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: credit-submit-spin .7s linear infinite; }
.credit-store-error { grid-column: 1 / -1; margin: 0; color: #b20f27; font-size: 10px; line-height: 1.4; text-align: right; }
@keyframes credit-submit-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .credit-store-dialog { width: min(760px, 100%); }
  .credit-store-layout { grid-template-columns: 1fr; }
  .credit-action-panel { display: block; }
  .credit-action-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; column-gap: 18px; }
  .credit-action-row:nth-child(3) { border-bottom: 0; }
  .credit-action-note { margin-top: 12px; }
}

@media (max-width: 660px) {
  .credit-store { padding: 8px; align-items: end; }
  .credit-store-dialog { max-height: calc(100vh - 8px); border-radius: 24px 24px 12px 12px; }
  .credit-store-close { top: 16px; right: 16px; width: 38px; height: 38px; }
  .credit-store-close span::before,.credit-store-close span::after { top: 18px; left: 11px; width: 15px; }
  .credit-store-head { padding: 22px 20px 18px; }
  .credit-store-brand-mark { width: 24px; height: 24px; }
  .credit-store-head h2 { max-width: 330px; margin-top: 11px; padding-right: 32px; font-size: clamp(28px, 9vw, 36px); line-height: 1.08; }
  .credit-store-head p { max-width: 330px; font-size: 12px; line-height: 1.6; }
  .credit-store-layout { gap: 14px; padding: 0 20px; }
  .credit-section-heading { align-items: flex-end; margin-bottom: 10px; }
  .credit-section-heading h3 { font-size: 14px; }
  .credit-section-heading > span { max-width: 150px; font-size: 9px; }
  .credit-receipt-rail { grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 18px; }
  .credit-package { min-height: 148px; padding: 15px 13px 13px; border-radius: 14px; }
  .credit-package.is-selected { transform: translateY(-3px); }
  .credit-package-value { margin-top: 14px; }
  .credit-package-value strong { font-size: 24px; }
  .credit-package-breakdown { margin-top: 7px; }
  .credit-package-bonus { padding: 5px 7px; }
  .credit-coverage { padding: 12px; }
  .credit-coverage > div { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .credit-action-panel { padding: 15px; }
  .credit-action-list { grid-template-columns: 1fr; }
  .credit-action-row:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,.09); }
  .credit-action-row { padding: 10px 0; }
  .credit-action-note { display: none; }
  .credit-store-foot { align-items: stretch; flex-direction: column; gap: 13px; padding: 17px 20px 22px; }
  .credit-store-total { grid-template-columns: 1fr auto; }
  .credit-store-total > strong { font-size: 20px; }
  .credit-store-submit { width: 100%; min-width: 0; min-height: 56px; }
  .credit-store-payment { min-width: 0; grid-template-columns: 1fr; }
  .credit-store-method { min-height: 48px; grid-template-columns: 28px auto auto; grid-template-rows: 1fr; }
  .credit-store-method b { grid-row: 1; }
  .credit-store-method span,.credit-store-method small { align-self: center; }
  .credit-store-method small { justify-self: end; }
  .credit-store-error { text-align: left; }
}

@media (max-width: 380px) {
  .credit-package { min-height: 142px; padding-inline: 11px; }
  .credit-package-value strong { font-size: 22px; }
  .credit-package-pick { padding-inline: 6px; }
  .credit-store-total > small { max-width: 132px; white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .credit-store,.credit-store-dialog,.credit-package,.credit-store-close { transition: none !important; }
}