:root{--ink:#191919;--muted:#77746f;--line:#e9e5de;--paper:#f7f4ee;--white:#fff;--lime:#d8ff72;--mint:#b8f0d0;--coral:#ff9e7c;--purple:#cbbcff;--yellow:#ffe680;--shadow:0 16px 45px rgba(35,31,26,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;padding:30px 24px 22px;background:#1c1c1b;color:#fff;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 23px Manrope}.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--lime);color:var(--ink);border-radius:10px;font:800 22px Manrope}.sidebar nav{display:grid;gap:8px;margin-top:58px}.nav-item{border:0;background:transparent;color:#9c9c98;border-radius:12px;padding:13px 14px;display:flex;gap:14px;align-items:center;font:600 14px inherit;text-align:left;cursor:pointer}.nav-item:hover,.nav-item.active{background:#30302e;color:#fff}.nav-icon{font-size:19px;width:22px}.sidebar-card{margin-top:auto;background:#292927;border:1px solid #3a3a37;border-radius:17px;padding:18px}.sidebar-card .eyebrow{color:var(--lime)}.sidebar-card strong{display:block;font-size:14px;line-height:1.4;margin:10px 0 6px}.sidebar-card p{margin:0;color:#92928e;font-size:12px;line-height:1.5}.profile{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:0;background:transparent;color:#fff;text-align:left;padding:18px 4px 0;cursor:pointer}.profile .avatar{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#f2aa80;color:#34261e;font-weight:700}.profile b,.profile small{display:block}.profile small{color:#888;font-size:11px;margin-top:2px}main{margin-left:245px;padding:32px 42px 60px;max-width:1500px}.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.date-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}.topbar h1{font:800 28px Manrope;margin:0}.primary-btn,.dark-btn{border:0;border-radius:12px;background:var(--ink);color:#fff;font:700 14px inherit;padding:14px 18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}.primary-btn span{font-size:20px;line-height:0}.page{display:none}.page.active{display:block}.balance-card{position:relative;overflow:hidden;min-height:220px;background:var(--lime);border-radius:24px;padding:32px;display:flex;align-items:center}.balance-label,.stat-label{font-size:12px;letter-spacing:.08em;font-weight:700;color:#595b44}.eye{background:transparent;border:0;cursor:pointer}.balance-value{font:800 clamp(38px,5vw,58px) Manrope;letter-spacing:-.04em;margin:8px 0}.trend{display:inline-flex;background:rgba(255,255,255,.55);border-radius:20px;padding:7px 11px;font-size:12px;font-weight:600}.balance-art{position:absolute;right:7%;width:210px;height:160px;transform:rotate(-7deg)}.coin{position:absolute;width:92px;height:92px;border-radius:50%;border:10px solid #242422;background:#f2ce55;display:grid;place-items:center;font:800 36px Manrope;box-shadow:0 10px 0 #171716}.c1{top:20px;left:40px}.c2{top:65px;left:100px;transform:scale(.75)}.c3{top:80px;left:-5px;transform:scale(.55)}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}.stat-card,.panel{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:20px}.stat-head,.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.icon-bubble{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:700}.green{background:var(--mint)}.coral{background:#ffd4c7}.purple{background:#ded6ff}.pill{font-size:10px;font-weight:700;border-radius:20px;padding:5px 8px}.positive{background:#e9f9ef;color:#298252}.neutral{background:#f2f0ec;color:#777}.stat-label{display:block;margin:20px 0 5px;color:var(--muted)}.stat-card strong{font:800 24px Manrope}.text-btn{border:0;background:transparent;color:#68645d;font:600 12px inherit;cursor:pointer}.progress{height:6px;background:#eeece7;border-radius:8px;margin:15px 0 8px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:#745de7;border-radius:inherit;transition:.3s}.stat-card small{color:var(--muted);font-size:11px}.content-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,.75fr);gap:16px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:800;color:var(--muted)}h2{font:800 21px Manrope;margin:5px 0}.panel-head{align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}.transaction{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #efede9}.transaction:last-child{border-bottom:0}.category-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#f2efe9;font-size:18px}.transaction b,.transaction small{display:block}.transaction b{font-size:13px}.transaction small{font-size:11px;color:var(--muted);margin-top:3px}.transaction .amount{text-align:right;font:700 13px Manrope}.transaction .amount.income{color:#248556}.empty-state{text-align:center;padding:36px 12px;color:var(--muted)}.empty-state span{font-size:30px}.mission-panel{background:#e9e2ff;text-align:center;padding:22px}.mission-panel .eyebrow{display:block;text-align:left;color:#6a5b96}.mission-illustration{height:74px;position:relative;margin:4px auto;width:110px}.mission-illustration span{display:grid;place-items:center;position:absolute;left:25px;top:5px;width:64px;height:64px;border-radius:50%;background:var(--yellow);border:5px solid var(--ink);font:800 25px Manrope;transform:rotate(8deg)}.mission-illustration i{position:absolute;right:0;top:3px}.mission-panel p{color:#655f72;font-size:13px;line-height:1.55}.mission-meta{display:flex;justify-content:center;gap:8px;margin:16px}.mission-meta span{background:rgba(255,255,255,.55);padding:5px 8px;border-radius:20px;font-size:10px;font-weight:700}.mission-panel .dark-btn{width:100%}.section-intro{display:flex;align-items:flex-end;justify-content:space-between;margin:22px 0}.section-intro h2{font-size:30px}.section-intro p{color:var(--muted);margin:3px 0}.filter-row{display:flex;background:#ebe8e1;border-radius:12px;padding:3px}.filter{border:0;background:transparent;padding:9px 14px;border-radius:9px;font:600 12px inherit;color:var(--muted);cursor:pointer}.filter.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px #0000000e}.activity-layout{display:grid;grid-template-columns:1.6fr .8fr;gap:16px}.full .transaction{padding:16px 0}.breakdown-row{margin:20px 0}.breakdown-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.bar{height:8px;background:#efede9;border-radius:5px;overflow:hidden}.bar span{display:block;height:100%;border-radius:5px}.learn-hero{background:#20201f;color:#fff;border-radius:24px;padding:35px;display:flex;justify-content:space-between;align-items:center}.learn-hero h2{font-size:34px;max-width:520px}.learn-hero p{color:#aaa9a4}.level-card{background:var(--lime);color:var(--ink);border-radius:18px;padding:18px 28px;text-align:center;transform:rotate(2deg)}.level-card span{font-size:9px;font-weight:800;letter-spacing:.1em}.level-card strong{font:800 44px Manrope;display:block}.level-card p{color:var(--ink);font-size:11px;margin:0}.lesson-grid,.earn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}.lesson-card,.earn-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:20px}.lesson-art{height:115px;border-radius:13px;display:grid;place-items:center;font-size:42px;margin-bottom:18px}.lesson-card:nth-child(1) .lesson-art{background:#d9f4e4}.lesson-card:nth-child(2) .lesson-art{background:#fff0b8}.lesson-card:nth-child(3) .lesson-art{background:#e6dfff}.lesson-card h3,.earn-card h3{font:800 16px Manrope;margin:8px 0}.lesson-card p,.earn-card p{font-size:12px;color:var(--muted);line-height:1.5}.lesson-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:11px;color:var(--muted)}.round-btn{width:30px;height:30px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer}.earn-card{position:relative;overflow:hidden}.earn-card .number{font:800 35px Manrope;color:#e6e2db}.earn-card button{border:0;background:transparent;font:700 12px inherit;padding:0;cursor:pointer}.earn-card.completed{opacity:.65}.earn-card.completed:after{content:"DONE";position:absolute;right:12px;top:12px;background:var(--mint);padding:5px 8px;border-radius:12px;font-size:9px;font-weight:800}.mobile-nav,.mobile-brand{display:none}dialog{border:0;border-radius:22px;padding:0;width:min(480px,calc(100vw - 28px));box-shadow:0 35px 100px #0005}dialog::backdrop{background:#1817149c;backdrop-filter:blur(4px)}dialog form{padding:26px}.modal-head{display:flex;justify-content:space-between}.close-btn{border:0;background:#f0eee9;width:34px;height:34px;border-radius:50%;font-size:21px;cursor:pointer}.type-toggle{display:grid;grid-template-columns:1fr 1fr;background:#eeeae3;border-radius:12px;padding:4px;margin:25px 0}.type-toggle button{border:0;background:transparent;padding:11px;border-radius:9px;font:700 12px inherit;cursor:pointer}.type-toggle button.active{background:#fff;box-shadow:0 2px 10px #0001}.amount-field{display:block;background:#f6f3ed;border-radius:14px;padding:14px 16px;margin-bottom:15px}.amount-field>span,label>span{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:7px}.amount-field div{display:flex;align-items:center;gap:8px}.amount-field b{font-size:25px}.amount-field input{border:0;background:transparent;font:800 28px Manrope;width:100%;outline:0}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}label input,label select{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px;background:#fff;font:500 13px inherit;outline:0}label input:focus,label select:focus{border-color:#999}.submit-btn{width:100%;margin-top:20px}.helper{font-size:12px;color:var(--muted);line-height:1.5}.toast{position:fixed;right:30px;bottom:30px;background:var(--ink);color:#fff;border-radius:12px;padding:13px 18px;font-size:13px;transform:translateY(100px);opacity:0;transition:.25s;z-index:20}.toast.show{transform:none;opacity:1}
@media(max-width:900px){.sidebar{display:none}main{margin:0;padding:24px 20px 100px}.mobile-brand{display:flex;align-items:center;gap:7px;font:800 18px Manrope;margin-bottom:20px}.mobile-brand .brand-mark{width:27px;height:27px;font-size:18px}.balance-art{right:2%;opacity:.8}.stat-grid{grid-template-columns:1fr 1fr}.goal-card{grid-column:span 2}.content-grid,.activity-layout{grid-template-columns:1fr}.lesson-grid,.earn-grid{grid-template-columns:repeat(2,1fr)}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:8px 8px max(8px,env(safe-area-inset-bottom));z-index:10}.mobile-nav button{border:0;background:transparent;color:#918e88;font:600 9px inherit;display:grid;place-items:center;gap:3px}.mobile-nav button span{font-size:18px}.mobile-nav button.active{color:var(--ink)}.mobile-nav .add-mobile{width:44px;height:44px;border-radius:15px;background:var(--ink);color:#fff;font-size:23px;justify-self:center}.toast{bottom:90px;left:20px;right:20px;text-align:center}}
@media(max-width:600px){main{padding:20px 15px 90px}.topbar{align-items:flex-start}.topbar h1{font-size:24px}.topbar .primary-btn{display:none}.balance-card{min-height:188px;padding:25px}.balance-value{font-size:40px}.balance-art{transform:rotate(-8deg) scale(.72);right:-32px}.stat-grid{grid-template-columns:1fr 1fr}.stat-card{padding:16px}.stat-card strong{font-size:20px}.goal-card{grid-column:span 2}.content-grid{display:block}.mission-panel{margin-top:16px}.panel{padding:17px}.section-intro{display:block}.filter-row{margin-top:18px}.learn-hero{padding:25px;display:block}.learn-hero h2{font-size:27px}.level-card{display:none}.lesson-grid,.earn-grid{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr}.activity-layout{display:block}.breakdown-panel{margin-top:16px}}