:root{color:#183126;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f3f5f1;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#17452b}body{background:#f3f5f1;min-width:320px;min-height:100vh;margin:0}button,select{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:100%;min-height:100vh;padding-bottom:calc(86px + env(safe-area-inset-bottom))}.topbar{height:68px;padding:max(10px, env(safe-area-inset-top)) 18px 8px;color:#fff;background:#17452b;align-items:center;gap:11px;display:flex}.brand-mark{color:#d9f29f;letter-spacing:.04em;border:1px solid #ffffff57;border-radius:12px;flex:none;place-items:center;width:38px;height:38px;font-size:13px;font-weight:800;display:grid}.topbar>div:last-child{flex-direction:column;display:flex}.topbar strong{letter-spacing:-.01em;font-size:15px}.topbar span{color:#ffffffad;margin-top:1px;font-size:11px}main{width:min(100%,720px);margin:0 auto;padding:0 14px 28px}.intro{color:#fff;background:radial-gradient(circle at 86% 0,#cae88733,#0000 42%),#17452b;border-radius:0 0 26px 26px;margin:0 -14px 14px;padding:20px 18px 26px}.eyebrow{color:#cde58f;letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:800}.intro h1{letter-spacing:-.04em;margin:5px 0 4px;font-size:clamp(25px,7vw,34px);line-height:1.08}.intro p{color:#ffffffb8;max-width:440px;margin:0;font-size:13px;line-height:1.45}.controls-card,.chart-card,.price-hero,.stat,.source-switch,.metric-picker{border:1px solid #e0e6e1;box-shadow:0 8px 24px #2543300f}.controls-card{background:#fff;border-radius:18px;padding:14px}.field{display:block}.field>span{color:#637168;letter-spacing:.04em;text-transform:uppercase;margin:0 0 7px 2px;font-size:11px;font-weight:700;display:block}.select-wrap{position:relative}select{color:#183126;appearance:none;background:#f8faf7;border:1px solid #d7dfd9;border-radius:13px;outline:none;width:100%;min-height:52px;padding:0 42px 0 14px;font-size:16px;font-weight:650}select:focus{border-color:#2d8a57;box-shadow:0 0 0 3px #2d8a571f}.chevron{color:#557062;pointer-events:none;font-size:20px;position:absolute;top:50%;right:15px;transform:translateY(-58%)}.periods{background:#f0f3ef;border-radius:12px;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:12px;padding:4px;display:grid}.periods button,.source-switch button,.metric-picker button{color:#637168;cursor:pointer;background:0 0;border:0}.periods button{border-radius:9px;min-height:37px;padding:5px 2px;font-size:11px;font-weight:750}.periods button.active{color:#17452b;background:#fff;box-shadow:0 2px 8px #2a49351a}.price-hero{color:#fff;background:linear-gradient(135deg,#1b603b,#147a48);border-radius:18px;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:16px;display:flex}.price-hero.compact{margin-top:12px}.price-hero>div:first-child{flex-direction:column;min-width:0;display:flex}.price-hero span,.price-hero small{color:#ffffffb8;font-size:11px}.price-hero strong{letter-spacing:-.05em;margin:3px 0 1px;font-size:clamp(28px,8vw,38px);line-height:1}.change{color:#fff;background:#ffffff21;border-radius:12px;flex-direction:column;align-items:flex-end;min-width:105px;padding:9px 10px;font-size:14px;font-weight:800;display:flex}.change.up{color:#ffdfb0}.change.down{color:#c9f1d6}.change small{margin-top:2px;font-size:9px;font-weight:500}.chart-card{background:#fff;border-radius:18px;margin-top:12px;padding:15px 8px 8px;overflow:hidden}.chart-heading{justify-content:space-between;align-items:flex-start;gap:8px;padding:0 8px 5px;display:flex}.chart-heading>div{flex-direction:column;min-width:0;display:flex}.chart-heading span{color:#7a857d;font-size:10px;font-weight:650}.chart-heading strong{text-overflow:ellipsis;white-space:nowrap;margin-top:1px;font-size:14px;overflow:hidden}.chart-shell{width:100%;height:250px;margin-top:4px}.tooltip{background:#fffffff5;border:1px solid #dce5de;border-radius:11px;flex-direction:column;padding:9px 11px;display:flex;box-shadow:0 6px 20px #1a3a2624}.tooltip span{color:#6f7a72;font-size:10px}.tooltip strong{color:#17452b;margin-top:2px;font-size:14px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px;display:grid}.stat{background:#fff;border-radius:14px;flex-direction:column;min-width:0;padding:11px 9px;display:flex}.stat span{color:#7b867e;font-size:10px}.stat strong{letter-spacing:-.03em;text-overflow:ellipsis;margin-top:3px;font-size:clamp(12px,3.5vw,15px);overflow:hidden}.source-switch{background:#e9ede9;border-radius:14px;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:12px;padding:4px;display:grid}.source-switch button{border-radius:10px;min-height:42px;font-size:12px;font-weight:750}.source-switch button.active{color:#17452b;background:#fff;box-shadow:0 2px 8px #2a49351a}.metric-picker{background:#fff;border-radius:13px;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px;padding:4px;display:grid}.metric-picker button{border-radius:9px;justify-content:center;align-items:center;gap:4px;min-height:39px;padding:4px 2px;font-size:10px;font-weight:700;display:flex}.metric-picker button.active{color:#17452b;background:#edf4ef}.metric-picker i{border-radius:50%;flex:none;width:7px;height:7px}.bottom-nav{z-index:20;width:min(100%,720px);min-height:66px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;border-top:1px solid #dfe6e0;grid-template-columns:1fr 1fr;margin:0 auto;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 24px #22422d14}.bottom-nav button{color:#78827b;cursor:pointer;background:0 0;border:0;border-radius:13px;justify-content:center;align-items:center;gap:7px;min-height:52px;font-size:12px;font-weight:750;display:flex}.bottom-nav button.active{color:#17452b;background:#edf4ef}.bottom-nav svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:21px;height:21px}.loading-card{margin-top:20px;padding:18px}.skeleton{background:linear-gradient(90deg,#edf0ed 25%,#f7f8f7 50%,#edf0ed 75%) 0 0/200% 100%;border-radius:8px;animation:1.4s infinite shimmer}.title-skeleton{width:42%;height:18px}.chart-skeleton{width:100%;height:240px;margin-top:18px}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:230px;padding:24px;display:flex}.empty-state>span{color:#8a6427;background:#fff0cf;border-radius:50%;place-items:center;width:36px;height:36px;font-weight:800;display:grid}.empty-state strong{margin-top:10px}.empty-state p{color:#758078;margin:5px 0 0;font-size:12px}@keyframes shimmer{to{background-position:-200% 0}}@media (width>=721px){body{background:linear-gradient(90deg,#e9eee9 0,#f3f5f1 25% 75%,#e9eee9 100%)}.topbar{padding-left:calc(50% - 340px);padding-right:calc(50% - 340px)}main{padding-left:20px;padding-right:20px}.intro{margin-left:-20px;margin-right:-20px;padding-left:24px;padding-right:24px}.bottom-nav{left:auto;right:50%;transform:translate(50%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}