:root{color-scheme:light;font-family:SF Pro Display,PingFang SC,Hiragino Sans GB,Noto Sans SC,sans-serif;--bg: #f8f7fd;--bg-soft: #fcfbff;--panel: rgba(255, 255, 255, .82);--panel-strong: rgba(255, 255, 255, .94);--line: rgba(122, 110, 180, .12);--line-strong: rgba(122, 110, 180, .2);--text: #211c33;--muted: #726c8a;--accent: #7e72d8;--accent-soft: #f1efff;--accent-glow: rgba(144, 131, 232, .18);--shadow: 0 18px 48px rgba(112, 101, 173, .06)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(circle at top left,rgba(236,233,255,.9),transparent 32%),radial-gradient(circle at 80% 16%,rgba(243,240,255,.92),transparent 22%),linear-gradient(180deg,#fbfaff,#f6f5fc 54%,#f9f8ff);color:var(--text)}button,input,select{font:inherit}.page-shell{position:relative;max-width:980px;margin:0 auto;padding:28px 18px 52px}.page-shell--mobile-preview{max-width:430px;min-height:100vh;padding:10px 12px 28px}.phone-stage{display:grid;place-items:start center}.phone-frame{width:100%}.page-noise{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.2;background-image:linear-gradient(rgba(125,115,184,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(125,115,184,.025) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(circle at center,black 40%,transparent 90%);mask-image:radial-gradient(circle at center,black 40%,transparent 90%)}.global-toast{position:sticky;top:10px;z-index:20;margin:0 auto 12px;max-width:420px;min-height:0;padding:0 18px;border-radius:999px;background:#231d3a00;color:#fff0;text-align:center;line-height:44px;transition:all .24s ease-out}.global-toast--visible{min-height:44px;background:#231d3adb;color:#fff}.home-shell,.mode-panel{position:relative;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;box-shadow:var(--shadow)}.home-shell{display:flex;flex-direction:column;min-height:100%;padding:18px}.mode-panel{margin-top:14px;padding:18px;background:#ffffffbd;animation:panelFadeIn .26s ease-out;flex:1;overflow:hidden}.app-statusbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#211c338f;font-size:12px}.app-statusbar__icons{display:flex;gap:10px}.eyebrow,.mode-view__label{margin:0 0 8px;color:var(--accent);font-size:12px;letter-spacing:.12em}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.03em}h1{font-size:clamp(26px,5.4vw,34px);line-height:1.12}h2{max-width:15ch;font-size:clamp(21px,4.2vw,26px);line-height:1.16}h3{font-size:25px;line-height:1.12}.home-header{display:grid;gap:10px}.home-header__copy{display:grid;gap:4px;max-width:20rem}.home-header__subtle,.home-header__meta{color:var(--muted);font-size:15px;line-height:1.55}.mode-tabs-wrap{display:flex;justify-content:center;margin-top:16px}.mode-tabs{display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,520px);padding:6px;border-radius:18px;background:#f5f3ffeb;border:1px solid rgba(126,114,216,.08)}.mode-tab{display:grid;place-items:center;min-height:42px;padding:0 14px;border:0;border-radius:14px;background:transparent;color:#211c33b8;cursor:pointer;transition:transform .22s ease-in-out,background .22s ease-in-out,color .22s ease-in-out,box-shadow .22s ease-in-out}.mode-tab:hover{transform:scale(1.02);background:#ffffffb8}.mode-tab:active{transform:scale(.97)}.mode-tab--active{background:linear-gradient(180deg,#f1effffa,#faf9fffa);color:var(--accent);box-shadow:0 0 0 1px #7e72d814,0 6px 18px #7e72d814}.mode-tab__label{font-size:15px}.tab-content{min-width:0;animation:tabFadeIn .24s ease-in-out}.tab-content--out-right{animation:tabSlideOutLeft .12s ease-in-out forwards}.tab-content--out-left{animation:tabSlideOutRight .12s ease-in-out forwards}.tab-content--in-right{animation:tabSlideInRight .24s ease-in-out both}.tab-content--in-left{animation:tabSlideInLeft .24s ease-in-out both}.mode-view{display:grid;gap:18px}.mode-view--draw{padding-top:4px}.mode-view__top{display:flex;justify-content:space-between;align-items:end;gap:16px}.mode-view__top--stack{display:grid;gap:14px}.mode-feedback{display:grid;justify-items:center;gap:4px;text-align:center;min-height:42px}.mode-feedback__text{color:var(--text);font-size:15px;transition:opacity .22s ease-out,transform .22s ease-out}.mode-feedback__subtext{max-width:28ch;color:var(--muted);font-size:13px;line-height:1.5}.mode-feedback__text--loading{opacity:.66;transform:translateY(1px)}.button-primary{min-height:46px;padding:0 18px;border:0;border-radius:14px;background:linear-gradient(180deg,#8f84e6,#7b6fda);color:#fff;cursor:pointer;box-shadow:0 10px 24px #7e72d829;transition:transform .18s ease-in-out,box-shadow .18s ease-in-out,opacity .18s ease-in-out,background .18s ease-in-out}.button-primary:hover{transform:scale(1.02);box-shadow:0 14px 28px #7e72d82e}.button-primary:active{transform:scale(.97);box-shadow:0 8px 18px #7e72d824}.button-primary:disabled{opacity:.72;cursor:default}.button-primary--wide{width:100%}.reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}.reward-grid--out .reward-card-shell{animation:cardFadeOut .24s ease-in-out forwards}.reward-grid--in .reward-card-shell{animation:cardSlideIn .32s ease-in-out both}.reward-card-shell{animation:cardSlideIn .3s ease-in-out both}.reward-card{position:relative;overflow:hidden;min-height:244px;padding:18px;border-radius:20px;background:radial-gradient(circle at top right,rgba(241,239,255,.92),transparent 36%),linear-gradient(180deg,#fffffffa,#fcfbfff0);border:1px solid rgba(126,114,216,.1);box-shadow:0 6px 18px #7e72d80a;transition:transform .22s ease-in-out,box-shadow .22s ease-in-out,border-color .22s ease-in-out,opacity .22s ease-in-out,background .22s ease-in-out}.reward-card:hover{transform:scale(1.02);box-shadow:0 10px 22px #7e72d80f}.reward-card:active{transform:scale(.985)}.reward-card__glow{position:absolute;top:-22px;right:-22px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(149,137,234,.14),transparent 66%)}.reward-card__badge{position:absolute;top:16px;right:16px;color:var(--accent);font-size:11px}.reward-card__tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:#f1efffeb;color:var(--muted);font-size:12px}.reward-card--recommended{transform:scale(1.035);border-color:#7e72d829;box-shadow:0 10px 28px #7e72d814}.reward-card--selected{transform:translateY(-4px) scale(1.03);border-color:#7e72d83d;box-shadow:0 14px 32px #7e72d81f;background:radial-gradient(circle at top right,rgba(232,228,255,.96),transparent 36%),linear-gradient(180deg,#fffffffc,#f7f5fff5)}.reward-card--dimmed{opacity:.54;transform:scale(.985)}.reward-card--recommended .reward-card__glow{background:radial-gradient(circle,rgba(149,137,234,.22),transparent 68%)}.reward-card h3{max-width:10ch;margin-top:16px;font-size:22px}.reward-card p{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.reward-card__action{position:absolute;left:18px;right:18px;bottom:18px;min-height:40px;border:0;border-radius:14px;background:#f1efff;color:var(--accent);cursor:pointer;transition:transform .18s ease-in-out,background .18s ease-in-out,box-shadow .18s ease-in-out,color .18s ease-in-out}.reward-card__action:hover{transform:scale(1.02);background:#ebe7ff;box-shadow:0 8px 16px #7e72d80f}.reward-card__action:active{transform:scale(.97);background:#e2dcff}.draw-actions{display:grid;gap:10px;justify-items:center}.journey-note{text-align:center;color:var(--muted);font-size:13px;line-height:1.55;max-width:24ch;margin:0 auto}.tab-bridge{justify-self:center;padding:0;border:0;background:transparent;color:var(--accent);font-size:13px;line-height:1.5;cursor:pointer;transition:opacity .2s ease-in-out,transform .2s ease-in-out,color .2s ease-in-out}.tab-bridge:hover{opacity:.86;transform:translate(2px)}.tab-bridge:active{transform:scale(.98)}.state-switcher{display:flex;flex-wrap:wrap;gap:8px}.state-pill{min-height:38px;padding:0 14px;border:1px solid rgba(126,114,216,.08);border-radius:999px;background:#ffffffd1;color:var(--muted);cursor:pointer;transition:transform .2s ease-in-out,background .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out}.state-pill:hover{transform:scale(1.02);background:#f6f4fff5}.state-pill:active{transform:scale(.97)}.state-pill--active{background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 1px #7e72d814}.state-copy{padding:14px 16px;border-radius:18px;background:#fffc;border:1px solid rgba(126,114,216,.08);transition:opacity .22s ease-out,transform .22s ease-out}.state-copy p,.field{color:var(--muted);line-height:1.6}.state-copy--loading{opacity:.72;transform:translateY(2px)}.add-form{display:grid;grid-template-columns:1.4fr .7fr auto;gap:12px;align-items:end}.field{display:grid;gap:8px;font-size:14px}.field input,.field select{width:100%;min-height:48px;padding:0 14px;border:1px solid rgba(126,114,216,.1);border-radius:14px;background:#ffffffeb;color:var(--text);outline:none}.field input:focus,.field select:focus{border-color:#7e72d83d;box-shadow:0 0 0 4px #7e72d814}@keyframes cardFadeOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.99)}}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes tabFadeIn{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes tabSlideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes tabSlideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@keyframes tabSlideInRight{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes tabSlideInLeft{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@media (max-width: 900px){.reward-grid,.add-form{grid-template-columns:1fr}.home-header__row,.mode-view__top{flex-direction:column;align-items:start}.mode-tabs{width:100%}.page-shell--mobile-preview{max-width:100%}.reward-card{min-height:220px}}