:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #e8eefb; background: #091326; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 22% -10%, #1d4f8a 0, transparent 38%), #091326; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { max-width: 1180px; margin: auto; padding: 0 26px 64px; }
.topbar { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { color: inherit; background: none; border: 0; padding: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #4ee0ae; color: #09251e; font-size: 22px; font-weight: 900; }
.brand strong, .brand small { display: block; }.brand small { margin-top: 3px; color: #9db0ca; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
nav { display: flex; align-items: center; gap: 8px; } nav button { color: #b8c8df; border: 0; background: transparent; padding: 10px 12px; border-radius: 9px; } nav button:hover, nav button.active { color: #fff; background: #152848; }
.primary { color: #06271d; border: 0; border-radius: 10px; padding: 11px 15px; font-weight: 750; background: #4ee0ae; box-shadow: 0 10px 22px #07192855; }.primary:disabled { cursor: not-allowed; color: #8492a9; background: #223651; box-shadow: none; }.large { padding: 14px 20px; }.full { width: 100%; margin-top: 14px; }
.hero { display: grid; grid-template-columns: 1.45fr .75fr; gap: 48px; padding: 74px 0 70px; align-items: center; }.hero h1 { max-width: 720px; margin: 12px 0 18px; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -.055em; }.eyebrow { color: #72eec1; font-size: 12px; font-weight: 800; letter-spacing: .12em; margin: 0; }.lead { max-width: 670px; color: #b8c8df; font-size: 18px; line-height: 1.7; margin: 0 0 28px; }
.safety-card, .form-card, .catalog-empty { background: #0d1c34cc; border: 1px solid #254466; border-radius: 20px; box-shadow: 0 28px 80px #02081755; }.safety-card { padding: 30px; }.safety-card h2 { margin: 10px 0 18px; font-size: 23px; }.safety-card ol { padding-left: 21px; color: #b8c8df; line-height: 1.7; }.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #4ee0ae; box-shadow: 0 0 0 5px #4ee0ae22; }
.section { padding: 28px 0; }.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; }.section-heading h2 { margin: 6px 0 20px; font-size: 32px; }.pill { color: #c6d5e8; font-size: 13px; border: 1px solid #31557b; padding: 8px 10px; border-radius: 99px; }.catalog-empty { text-align: center; padding: 54px 25px; }.empty-icon { color: #72eec1; font-size: 40px; }.catalog-empty h3 { margin: 9px 0; }.catalog-empty p { max-width: 540px; color: #aabbd2; margin: auto; line-height: 1.65; }
.form-page { display: grid; place-items: start center; padding: 40px 0; }.form-card { width: min(100%, 540px); padding: 34px; }.form-card.wide { width: min(100%, 760px); }.form-card h1 { margin: 9px 0 8px; font-size: 34px; }.form-card > p:not(.eyebrow) { color: #b8c8df; line-height: 1.6; }.field { display: block; margin-top: 17px; }.field span { display: block; color: #c7d4e6; font-size: 13px; margin-bottom: 8px; }.field input { width: 100%; color: #eef6ff; border: 1px solid #345373; background: #08162b; border-radius: 10px; padding: 12px 13px; outline: none; }.field input:focus { border-color: #4ee0ae; box-shadow: 0 0 0 3px #4ee0ae24; }.hint { color: #8ea5c3; font-size: 12px; line-height: 1.5; }.warning { color: #ffcc77; }.notice { color: #72eec1; font-size: 13px; line-height: 1.5; }.notice.error { color: #ffb3b3; }.timeline { display: grid; gap: 1px; border-radius: 13px; overflow: hidden; border: 1px solid #315273; margin: 25px 0; }.timeline span, .wallet-columns > div { background: #0a1930; padding: 15px 16px; color: #b8c8df; }.timeline span::before { content: '•'; margin-right: 10px; color: #4ee0ae; }.wallet-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }.wallet-columns > div { border: 1px solid #315273; border-radius: 12px; }.wallet-columns strong, .wallet-columns span { display: block; }.wallet-columns span { color: #9fb1ca; font-size: 13px; line-height: 1.5; margin-top: 8px; }
.loading { color: #9fb1ca; padding: 22px 0; }.member-code { color: #9fb1ca; font-size: 13px; }.balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 28px; }.balance-card, .history-card, .empty-state { border: 1px solid #315273; border-radius: 13px; background: #0a1930; }.balance-card { padding: 17px; }.balance-card > span, .balance-card small { display: block; color: #9fb1ca; font-size: 12px; }.balance-card strong { display: block; font-size: 27px; margin: 8px 0 3px; }.balance-card p { color: #9fb1ca; font-size: 12px; margin: 10px 0 0; }.subheading { margin: 28px 0 12px; font-size: 20px; }.history-list { display: grid; gap: 11px; }.history-card { padding: 16px; }.history-card > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }.history-card > div:first-child span { color: #72eec1; font-size: 12px; font-weight: 750; letter-spacing: .04em; }.history-card.pending > div:first-child span { color: #ffcc77; }.history-card p { color: #b8c8df; margin: 10px 0 0; }.history-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 15px 0 0; }.history-card dl div { min-width: 0; }.history-card dt { color: #8299b8; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }.history-card dd { margin: 4px 0 0; color: #d8e3f3; font-size: 13px; overflow-wrap: anywhere; }.empty-state { display: grid; gap: 9px; justify-items: start; padding: 20px; color: #b8c8df; }.empty-state span { line-height: 1.55; }.empty-state .primary { margin-top: 4px; }
@media (max-width: 740px) { .shell { padding: 0 18px 42px; }.topbar { min-height: 72px; }.topbar nav button:not(.primary) { display: none; }.hero { grid-template-columns: 1fr; gap: 28px; padding: 45px 0; }.hero h1 { font-size: 46px; }.wallet-columns { grid-template-columns: 1fr; }.history-card dl { grid-template-columns: 1fr; }.form-card { padding: 24px; } }