:root {
  --green: #10b89a;
  --green-deep: #07866f;
  --green-dark: #17324a;
  --green-soft: #e5faf5;
  --ink: #17324a;
  --muted: #71818d;
  --line: #e9e4dc;
  --surface: #ffffff;
  --page: #fff7ea;
  --shadow: 0 12px 32px rgba(44, 52, 64, .09);
  --radius: 24px;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #dce4df; }
body { margin: 0; min-height: 100%; background: #dce4df; overscroll-behavior-y: none; }
button, input { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; outline: none; }
button:focus-visible { outline: 2px solid #f0b83e; outline-offset: 2px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; background: var(--page); position: relative; overflow: hidden; box-shadow: 0 0 50px rgba(0,0,0,.08); }
.app-main { min-height: 100dvh; }
.page { display: none; min-height: 100dvh; padding: env(safe-area-inset-top) 16px calc(102px + env(safe-area-inset-bottom)); animation: pageIn .28s ease both; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #27d680, #11ac5e); box-shadow: 0 8px 18px rgba(26, 189, 103, .22); color: white; }
.brand-mark svg { width: 30px; height: 30px; fill: rgba(255,255,255,.18); stroke: white; }
.brand-mark .brand-bolt { fill: white; stroke: none; }
.eyebrow { margin: 0 0 3px; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: 1.7px; color: #8b9a91; }
.eyebrow.green { color: #35bb73; }.eyebrow.light { color: rgba(255,255,255,.66); }
h1, h2, h3, p { margin-top: 0; }
.topbar h1 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: .3px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; background: white; border-radius: 15px; box-shadow: 0 7px 20px rgba(24, 61, 38, .06); position: relative; }
.icon-btn svg { width: 21px; }.notify-dot { position: absolute; right: 10px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #ff6868; border: 1.5px solid white; }
.status-strip { height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: -3px 0 7px; color: #698076; font-size: 11px; }
.status-strip b { color: #2e6650; }.pulse-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(34,200,115,.12); animation: pulse 2s infinite; }
.status-separator { height: 10px; width: 1px; background: #ced9d2; margin: 0 3px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,200,115,0); } }
.battery-hero { height: 350px; margin: 0 -16px 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 43%, #f8fffa 0, #edf9f1 40%, #f4f7f5 72%); }
.ambient { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .7; }.ambient-a { width: 160px; height: 160px; left: -85px; top: 110px; background: #d9f5e5; }.ambient-b { width: 120px; height: 120px; right: -65px; top: 30px; background: #e7f9dc; }
.help-chip { align-self: flex-end; margin: 4px 20px 0; background: rgba(255,255,255,.8); color: #789086; font-size: 10px; padding: 7px 9px 7px 11px; border-radius: 20px; display: flex; align-items: center; gap: 3px; box-shadow: 0 4px 12px rgba(24,64,40,.05); }
.help-chip svg { width: 12px; height: 12px; }
.battery-orbit { width: 270px; height: 238px; position: relative; margin-top: 5px; display: grid; place-items: center; }
.orbit-ring { position: absolute; border: 1px solid rgba(63, 202, 124, .16); border-radius: 50%; transform: rotate(-8deg); }.orbit-ring-1 { width: 250px; height: 188px; }.orbit-ring-2 { width: 200px; height: 218px; transform: rotate(19deg); border-style: dashed; }
.orbit-spark { position: absolute; width: 9px; height: 9px; background: white; border: 2.5px solid #69dfa0; border-radius: 50%; box-shadow: 0 3px 8px rgba(20,156,85,.24); animation: bob 3s ease-in-out infinite; }.spark-one { left: 17px; top: 99px; }.spark-two { right: 36px; bottom: 27px; animation-delay: -1.3s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.battery-device { position: relative; width: 126px; height: 204px; filter: drop-shadow(0 22px 19px rgba(20, 111, 61, .16)); }
.battery-cap { position: absolute; width: 42px; height: 10px; left: 42px; top: 0; background: #65db9b; border-radius: 7px 7px 2px 2px; box-shadow: inset 0 2px 3px rgba(255,255,255,.55); }
.battery-body { position: absolute; inset: 8px 0 0; border: 4px solid rgba(56, 197, 119, .68); border-radius: 29px; background: rgba(255,255,255,.7); overflow: hidden; box-shadow: inset 0 0 0 4px rgba(255,255,255,.76); }
.battery-fill { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 78%; border-radius: 20px; background: linear-gradient(180deg, #7be3aa 0%, #24c871 74%, #19b764 100%); transition: height .8s cubic-bezier(.2,.8,.2,1); }
.battery-fill::before { content: ""; position: absolute; left: -5%; top: -7px; width: 110%; height: 18px; border-radius: 50%; background: #87e8b3; }
.battery-content { position: absolute; inset: 0; z-index: 2; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-shadow: 0 2px 8px rgba(6,113,54,.14); }
.battery-percent { display: flex; align-items: flex-start; font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -2px; }.battery-percent small { font-size: 14px; margin: 5px 0 0 3px; letter-spacing: 0; }.battery-label { margin-top: 8px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 12px; background: rgba(1,89,39,.13); }
.battery-shine { position: absolute; z-index: 2; left: 16px; top: 20px; width: 12px; height: 78px; border-radius: 20px; transform: rotate(4deg); background: linear-gradient(rgba(255,255,255,.6), transparent); opacity: .72; }
.health-score { height: 43px; min-width: 220px; border: 1px solid rgba(38,198,111,.13); background: rgba(255,255,255,.86); border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 22px rgba(34, 105, 61, .07); }
.health-score span { font-size: 11px; color: #74877c; }.health-score b { color: #159958; font-size: 14px; }.health-score .score-pill { color: #2a9f62; background: #e7f8ee; border-radius: 10px; padding: 3px 7px; font-size: 9px; }
.quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.stat-card { min-width: 0; height: 76px; background: white; border-radius: 20px; display: flex; align-items: center; gap: 10px; padding: 12px; box-shadow: 0 7px 22px rgba(35,68,47,.05); }
.stat-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; }.stat-icon svg { width: 18px; }.stat-icon.mint { color: #17ae62; background: #e7f8ee; }.stat-icon.amber { color: #ef9b2e; background: #fff4df; }
.stat-card div { display: flex; flex-direction: column; min-width: 0; }.stat-card strong { font-size: 13px; white-space: nowrap; }.stat-card span:last-child { font-size: 10px; color: #87948c; margin-top: 5px; }
.section-block { margin: 12px 0; padding: 19px; border-radius: var(--radius); background: white; box-shadow: 0 7px 24px rgba(33,70,47,.055); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.section-heading h2 { margin: 0; font-size: 17px; }.section-heading p:not(.eyebrow) { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.safe-badge, .all-good { font-size: 10px; color: #1eae65; background: #e9f9ef; border-radius: 14px; padding: 5px 9px; display: flex; align-items: center; gap: 4px; }.safe-badge svg { width: 13px; height: 13px; }.all-good i { width: 6px; height: 6px; border-radius: 50%; background: #22c873; }
.check-list { margin: 15px 0 14px; }.check-row { height: 45px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f3f1; font-size: 12px; }.check-row:last-child { border: 0; }.check-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #45a874; background: #f0f8f3; }.check-icon svg { width: 15px; }.check-row span:nth-child(2) { flex: 1; }.check-row em { font-style: normal; color: #9aa69f; font-size: 10px; }.check-row.done em { color: #1eb56a; }.check-row.scanning .check-icon { animation: scanPulse .6s infinite alternate; }
@keyframes scanPulse { to { transform: scale(1.08); background: #daf5e5; } }
.primary-btn { width: 100%; min-height: 58px; color: white; border-radius: 18px; background: linear-gradient(120deg, #24cd77, #16b963); box-shadow: 0 11px 23px rgba(23,185,99,.22); transition: transform .16s, box-shadow .16s; }.primary-btn:active { transform: scale(.98); box-shadow: 0 5px 12px rgba(23,185,99,.18); }
.optimize-btn { display: flex; align-items: center; padding: 0 16px; gap: 12px; text-align: left; }.btn-icon { width: 35px; height: 35px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.17); }.btn-icon svg { width: 19px; fill: white; stroke: white; }.optimize-btn > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }.optimize-btn b { font-size: 14px; }.optimize-btn small { margin-top: 3px; font-size: 9px; opacity: .72; }.btn-arrow { width: 18px; }
.streak-banner { min-height: 102px; padding: 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; background: linear-gradient(125deg, #fff9ed, #fff 55%, #f4fff8); border: 1px solid #fff3d7; }.streak-visual { width: 70px; height: 70px; flex: 0 0 auto; border-radius: 22px; background: linear-gradient(145deg, #fff1d2, #ffe4b0); display: grid; grid-template-columns: auto auto; align-content: center; justify-content: center; gap: 0 3px; color: #d9791d; }.streak-visual span { font-size: 20px; grid-row: 1 / 3; align-self: center; }.streak-visual b { font-size: 23px; line-height: 1; }.streak-visual small { font-size: 8px; }.streak-copy { flex: 1; min-width: 0; }.mini-tag { display: inline-block; color: #e38423; background: #fff0d5; font-size: 8px; font-weight: 700; border-radius: 8px; padding: 3px 6px; }.streak-copy h3 { margin: 6px 0 5px; font-size: 12px; line-height: 1.35; }.streak-copy p { margin: 0; font-size: 9px; color: #849088; }.streak-copy p b { color: #18aa61; }.streak-arrow { flex: 0 0 auto; color: #a8b2ac; width: 16px; }
.text-btn { padding: 5px 0; background: none; color: #24ac65; font-size: 10px; }.tips-block { padding-bottom: 14px; }.tip-card { margin-top: 13px; padding: 14px; display: flex; gap: 11px; border-radius: 17px; background: #f5faf7; }.tip-emoji { width: 36px; height: 36px; border-radius: 12px; background: white; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(29,80,49,.06); }.tip-card h3 { margin: 1px 0 5px; font-size: 12px; }.tip-card p { margin: 0; color: #7e8f85; font-size: 10px; line-height: 1.5; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 480px); height: calc(76px + env(safe-area-inset-bottom)); padding: 8px 14px env(safe-area-inset-bottom); display: flex; align-items: center; justify-content: space-around; background: rgba(255,255,255,.94); border-top: 1px solid rgba(225,234,228,.9); backdrop-filter: blur(18px); box-shadow: 0 -8px 26px rgba(31,75,47,.06); }
.nav-item { width: 62px; height: 55px; background: transparent; color: #9aa69f; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }.nav-item span { width: 35px; height: 29px; display: grid; place-items: center; position: relative; border-radius: 13px; transition: .22s; }.nav-item svg { width: 21px; }.nav-item b { font-size: 9px; font-weight: 600; }.nav-item.active { color: #16ad60; }.nav-item.active span { background: #e8f8ee; transform: translateY(-1px); }.nav-item.active svg { stroke-width: 2.2; }.reward-nav i { width: 6px; height: 6px; position: absolute; right: 3px; top: 2px; border-radius: 50%; background: #ff6d66; border: 1px solid white; }
.simple-topbar h1 { font-size: 23px; }.guard-summary-card { min-height: 206px; padding: 21px; border-radius: 28px; color: white; background: linear-gradient(135deg, #1fce77, #139d5c); box-shadow: 0 14px 28px rgba(21,165,89,.2); position: relative; overflow: hidden; }.guard-summary-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -85px; top: -85px; border: 32px solid rgba(255,255,255,.07); border-radius: 50%; }.guard-summary-head { display: flex; justify-content: space-between; align-items: center; position: relative; }.live-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 4px 8px; font-size: 9px; }.live-chip i { width: 6px; height: 6px; background: #d6ffe9; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }.guard-summary-head h2 { margin: 12px 0 6px; font-size: 20px; }.guard-summary-head p { margin: 0; font-size: 10px; opacity: .7; }.shield-orb { width: 67px; height: 67px; display: grid; place-items: center; border-radius: 23px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.18); transform: rotate(5deg); }.shield-orb svg { width: 37px; height: 37px; stroke-width: 1.5; }.guard-metrics { height: 64px; display: flex; align-items: center; justify-content: space-around; margin-top: 21px; border-radius: 19px; background: rgba(0,92,46,.13); }.guard-metrics div { text-align: center; display: flex; flex-direction: column; gap: 5px; }.guard-metrics b { font-size: 15px; }.guard-metrics span { font-size: 8px; opacity: .67; }.guard-metrics > i { width: 1px; height: 24px; background: rgba(255,255,255,.18); }
.subtle { color: #97a29c; font-size: 9px; }.mode-list { display: grid; gap: 9px; margin-top: 15px; }.mode-card { width: 100%; min-height: 68px; border: 1px solid #edf1ee; border-radius: 18px; padding: 10px 12px; background: #fafcfb; display: flex; align-items: center; gap: 11px; text-align: left; transition: .2s; }.mode-card.active { border-color: #54d38e; background: #f1fbf5; box-shadow: inset 0 0 0 1px #54d38e; }.mode-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; }.mode-icon svg { width: 20px; }.mode-icon.smart { color: #18ad61; background: #dff6e8; }.mode-icon.long { color: #58a51f; background: #edf7df; }.mode-icon.night { color: #7863cf; background: #eeeafb; }.mode-copy { display: flex; flex-direction: column; flex: 1; gap: 5px; }.mode-copy b { font-size: 12px; }.mode-copy small { color: #849189; font-size: 9px; }.mode-check { width: 20px; height: 20px; border: 1px solid #d5ded8; border-radius: 50%; display: grid; place-items: center; color: transparent; }.mode-check svg { width: 12px; }.mode-card.active .mode-check { color: white; border-color: var(--green); background: var(--green); }
.period-pill { background: #f2f6f3; color: #74827a; border-radius: 13px; padding: 6px 9px; display: flex; gap: 3px; align-items: center; font-size: 9px; }.period-pill svg { width: 11px; height: 11px; }.chart-wrap { display: flex; height: 155px; margin-top: 16px; }.chart-y { width: 34px; padding: 2px 0 25px; display: flex; flex-direction: column; justify-content: space-between; color: #a1aaa5; font-size: 8px; }.chart-area { flex: 1; position: relative; }.chart-grid { position: absolute; inset: 5px 0 28px; display: flex; flex-direction: column; justify-content: space-between; }.chart-grid i { width: 100%; border-top: 1px dashed #e7ece9; }.line-chart { position: absolute; width: 100%; height: 120px; overflow: visible; }.chart-fill { fill: url(#chartFill); stroke: none; }.chart-line { fill: none; stroke: #23c771; stroke-width: 3; vector-effect: non-scaling-stroke; }.line-chart circle { fill: white; stroke: #23c771; stroke-width: 3; vector-effect: non-scaling-stroke; }.chart-x { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; color: #a1aaa5; font-size: 8px; }.chart-insight { min-height: 53px; padding: 10px 12px; background: #f2faf5; border-radius: 15px; display: flex; align-items: center; gap: 9px; }.chart-insight span { font-size: 18px; }.chart-insight p { margin: 0; color: #829088; font-size: 9px; line-height: 1.5; }.chart-insight b { color: #28714f; font-size: 10px; }
.guard-items { padding-bottom: 6px; }.setting-row { width: 100%; min-height: 68px; display: flex; align-items: center; gap: 11px; padding: 9px 0; text-align: left; background: none; border-bottom: 1px solid #eff3f0; }.setting-row:last-child { border: 0; }.row-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; }.row-icon svg { width: 18px; }.row-icon.coral { color: #e66d58; background: #fff0ec; }.row-icon.green { color: #18ad61; background: #e8f8ef; }.row-icon.blue { color: #438bdc; background: #ebf4ff; }.row-icon.amber { color: #de9228; background: #fff4df; }.row-icon.purple { color: #8166cf; background: #f0edfb; }.setting-row > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }.setting-row b { font-size: 12px; }.setting-row small { color: #8b9890; font-size: 9px; }.setting-row em { color: #6d8175; font-style: normal; font-size: 9px; }.setting-row > svg { width: 15px; color: #b7c0ba; }
.page[data-page="rewards"] { padding-top: 0; }.rewards-header { height: 296px; margin: 0 -16px -48px; padding: env(safe-area-inset-top) 20px 0; color: white; position: relative; overflow: hidden; background: linear-gradient(140deg, #124f37 0%, #128151 46%, #26b76e 100%); }.reward-topbar { padding: 0 16px; }.reward-topbar h1 { font-size: 22px; }.energy-balance { height: 38px; min-width: 77px; padding: 0 12px; border-radius: 18px; color: #fff4ad; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; gap: 6px; }.energy-balance svg { width: 15px; fill: rgba(255,240,144,.25); }.energy-balance b { color: white; font-size: 13px; }.reward-glow { position: absolute; border-radius: 50%; filter: blur(1px); }.reward-glow-a { width: 210px; height: 210px; border: 38px solid rgba(255,255,255,.04); right: -80px; top: 5px; }.reward-glow-b { width: 100px; height: 100px; background: rgba(147,255,194,.08); left: -35px; bottom: 25px; }.reward-hero-copy { position: relative; padding: 16px 20px 0; }.reward-kicker { display: inline-block; font-size: 9px; font-weight: 700; color: #12452f; background: #b7f0cc; border-radius: 10px; padding: 4px 8px; }.reward-hero-copy h2 { margin: 10px 0 7px; font-size: 22px; letter-spacing: .3px; }.reward-hero-copy p { margin: 0; font-size: 10px; opacity: .7; }.week-progress { position: relative; margin: 19px 20px 0; display: flex; align-items: center; gap: 10px; }.week-progress-bar { height: 5px; flex: 1; background: rgba(255,255,255,.17); border-radius: 4px; overflow: hidden; }.week-progress-bar i { display: block; width: 43%; height: 100%; background: linear-gradient(90deg, #9bf0bd, #fff1a7); border-radius: 4px; transition: width .5s; }.week-progress span { font-size: 9px; opacity: .8; }.week-progress b { color: #fff4a8; }
.checkin-card { position: relative; z-index: 2; margin: 0 0 12px; padding: 19px 14px 14px; background: white; border-radius: 26px; box-shadow: 0 13px 30px rgba(24,79,50,.11); }.streak-fire { color: #de7b25; background: #fff3df; border-radius: 14px; padding: 6px 9px; font-size: 10px; }.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 18px 0 16px; }.day { min-width: 0; height: 82px; padding: 7px 1px; border-radius: 14px; background: #f5f7f6; display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: #98a39c; }.day span { font-size: 7px; white-space: nowrap; }.day i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #e9eeeb; font-style: normal; font-size: 16px; }.day i svg { width: 14px; }.day b { font-size: 8px; }.day.checked { color: #22ab65; background: #effaf3; }.day.checked i { color: white; background: #36cc7e; }.day.today { color: #188a50; background: #e8faef; box-shadow: inset 0 0 0 1.5px #42ce82; }.day.today i { color: #16ad60; background: white; box-shadow: 0 4px 10px rgba(32,168,95,.12); }.day.gift-day { color: #d58428; background: #fff5e3; }.day.gift-day i { background: white; }.checkin-btn { min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }.checkin-btn b { font-size: 9px; font-weight: 600; opacity: .75; }.checkin-btn.done { color: #5e7d6a; background: #edf3ef; box-shadow: none; }.checkin-note { margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 4px; color: #a0aaa4; font-size: 8px; }.checkin-note svg { width: 10px; height: 10px; }
.prize-card { margin-top: 15px; border-radius: 20px; padding: 16px; color: white; background: linear-gradient(125deg, #253e34, #345f4c); position: relative; overflow: hidden; }.prize-card::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; border:20px solid rgba(255,255,255,.04); right:-45px; top:-40px; }.prize-card-top { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }.gift-box { width: 59px; height: 59px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, #fff2bc, #e9b955); font-size: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }.prize-card-top span { color: #f5d47f; font-size: 8px; }.prize-card-top h3 { margin: 5px 0 4px; font-size: 15px; }.prize-card-top p { margin: 0; font-size: 8px; opacity: .6; }.prize-perks { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 0; }.prize-perks span { min-height: 31px; display: grid; place-items: center; text-align: center; border-radius: 11px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.86); font-size: 8px; font-weight: 700; line-height: 1.2; }.prize-threshold { margin: 16px 0 13px; }.threshold-track { height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.12); }.threshold-track i { display: block; width: 43%; height: 100%; background: linear-gradient(90deg, #55d891, #ffe395); }.prize-threshold span { display: block; margin-top: 7px; text-align: center; font-size: 8px; opacity: .68; }.outline-btn { width: 100%; height: 42px; border-radius: 13px; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; }.outline-btn svg { width: 15px; }.outline-btn:not(:disabled) { color: #254131; background: #ffe59b; border-color: #ffe59b; font-weight: 700; }
.mission-list { margin-top: 11px; }.mission-row { min-height: 71px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f3f1; }.mission-row:last-child { border:0; }.mission-icon { width: 40px; height: 40px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; }.mission-icon svg { width:18px; }.mission-icon.green {color:#1aaf63;background:#e8f9ef}.mission-icon.amber {color:#e1952b;background:#fff5e3}.mission-icon.blue{color:#458ddd;background:#ebf4ff}.mission-row div { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }.mission-row b{font-size:11px}.mission-row small{font-size:8px;color:#8d9992}.mission-row em{font-style:normal;color:#23ae67;font-size:9px;font-weight:700}.mission-row button{min-width:52px;height:28px;border-radius:12px;background:#e9f8ef;color:#1ba860;font-size:9px}.mission-row.complete button{background:#f0f2f1;color:#9aa39d}.mission-row.complete em{color:#a0aaa4}.redeem-scroll { display:flex; gap:10px; overflow-x:auto; padding:14px 1px 3px; scrollbar-width:none }.redeem-scroll::-webkit-scrollbar{display:none}.redeem-card{flex:0 0 112px;padding:10px;border-radius:17px;background:#f7faf8;text-align:left}.redeem-art{height:64px;border-radius:13px;display:grid;place-items:center;font-size:27px;margin-bottom:9px}.redeem-art.lime{background:#e9f6d7}.redeem-art.lilac{background:#eeeafb}.redeem-art.peach{background:#fff0df}.redeem-card b{display:block;font-size:10px}.redeem-card small{display:flex;align-items:center;gap:3px;margin-top:5px;color:#e58c2a;font-size:9px}.redeem-card small svg{width:11px;height:11px;fill:#ffe0a8}
.page[data-page="profile"] { padding-top:0; }.profile-header { min-height:300px; margin:0 -16px -60px; padding:env(safe-area-inset-top) 20px 0; color:white; background:linear-gradient(145deg,#143b2c,#186b48 65%,#28a769); position:relative;overflow:hidden}.profile-header::after{content:"";position:absolute;width:200px;height:200px;border:35px solid rgba(255,255,255,.035);right:-100px;bottom:-60px;border-radius:50%}.profile-topbar{padding:0 16px}.icon-btn.glass{color:white;background:rgba(255,255,255,.12);box-shadow:none}.profile-card{height:90px;padding:8px 22px;display:flex;align-items:center;position:relative;z-index:1}.avatar{width:62px;height:62px;flex:0 0 auto;display:grid;place-items:center;border-radius:21px;background:linear-gradient(145deg,#e4fff0,#8de2b4);color:#14784a;font-size:23px;font-weight:800;border:2px solid rgba(255,255,255,.55);box-shadow:0 8px 18px rgba(0,0,0,.12);position:relative}.avatar i{position:absolute;right:-2px;bottom:-1px;width:16px;height:16px;border:3px solid #176543;background:#42d486;border-radius:50%}.profile-name{margin-left:14px;flex:1}.profile-name>div{display:flex;align-items:center;gap:7px}.profile-name h2{margin:0;font-size:18px}.level-pill{font-size:8px;color:#155437;background:#c4f1d7;border-radius:9px;padding:3px 6px}.profile-name p{margin:6px 0 0;font-size:9px;opacity:.66}.profile-chevron{width:15px;opacity:.5}.profile-stats{height:73px;margin:8px 20px 0;display:flex;align-items:center;justify-content:space-around;border-radius:21px;background:rgba(0,50,28,.2);position:relative;z-index:1}.profile-stats div{display:flex;flex-direction:column;align-items:center;gap:5px}.profile-stats b{font-size:15px}.profile-stats span{font-size:8px;opacity:.6}.profile-stats>i{width:1px;height:28px;background:rgba(255,255,255,.13)}
.report-card{min-height:110px;position:relative;z-index:2;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff,#f4fff8);border:1px solid white;cursor:pointer}.report-icon{width:46px;height:57px;flex:0 0 auto;display:grid;place-items:center;color:#1aad61;border-radius:14px;background:#e9f9ef;transform:rotate(-3deg)}.report-icon svg{width:25px;height:25px}.report-card>div:nth-child(2){flex:1}.report-card h2{margin:6px 0 5px;font-size:13px}.report-card p{margin:0;color:#86928b;font-size:8px}.report-card .mini-tag{color:#18a55d;background:#e7f8ed}.report-score{font-size:25px;font-weight:800;color:#1bb066}.row-chevron{width:14px;color:#aab5ae}.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}.badge-grid button{min-width:0;padding:0;background:none;display:flex;flex-direction:column;align-items:center}.badge-disc{width:49px;height:49px;border-radius:18px;display:grid;place-items:center;font-size:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.green-badge{background:linear-gradient(145deg,#e9f9e0,#bde6ad)}.orange-badge{background:linear-gradient(145deg,#fff0d4,#ffd089)}.blue-badge{background:linear-gradient(145deg,#e4f6ff,#b8ddf5)}.gray-badge{background:#eff2f0;filter:grayscale(1);opacity:.65}.badge-grid b{font-size:9px;margin-top:7px;white-space:nowrap}.badge-grid small{font-size:7px;color:#98a29c;margin-top:3px}.badge-grid .locked{opacity:.7}.settings-group{padding-bottom:4px}.gentle-footer{text-align:center;padding:25px 0 0;color:#a0aaa4}.footer-logo{width:34px;height:34px;margin:0 auto 9px;border-radius:12px;background:#e5eee8;color:#83a18f;display:grid;place-items:center}.footer-logo svg{width:19px}.gentle-footer p{margin:0;font-size:9px}.gentle-footer span{display:block;margin-top:5px;font-size:7px;color:#bcc4bf}
.modal-backdrop{position:fixed;z-index:50;inset:0;background:rgba(8,28,18,.42);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.25s}.modal-backdrop.show{opacity:1;pointer-events:auto}.bottom-sheet{position:fixed;z-index:51;left:50%;bottom:0;width:min(100%,480px);max-height:84dvh;overflow-y:auto;padding:12px 20px calc(24px + env(safe-area-inset-bottom));background:white;border-radius:28px 28px 0 0;box-shadow:0 -20px 50px rgba(7,37,20,.16);transform:translate(-50%,105%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.bottom-sheet.show{transform:translate(-50%,0)}.sheet-handle{width:38px;height:4px;margin:0 auto 16px;border-radius:2px;background:#dfe6e1}.sheet-close{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:12px;background:#f2f5f3;color:#718077;display:grid;place-items:center}.sheet-close svg{width:16px}.sheet-title{padding-right:45px}.sheet-title .sheet-hero-icon{width:53px;height:53px;border-radius:18px;display:grid;place-items:center;background:#e7f8ee;color:#19ad61;margin-bottom:13px}.sheet-hero-icon svg{width:27px;height:27px}.sheet-title h2{margin:0 0 7px;font-size:20px}.sheet-title>p{margin:0;color:#7e8e84;font-size:11px;line-height:1.6}.sheet-card{margin-top:18px;padding:15px;border-radius:18px;background:#f5f8f6}.sheet-card h3{margin:0 0 10px;font-size:12px}.sheet-card p,.sheet-card li{color:#718178;font-size:10px;line-height:1.7}.sheet-card ul{padding-left:18px;margin:0}.sheet-action{width:100%;height:50px;margin-top:18px;border-radius:16px;color:white;background:linear-gradient(120deg,#24cc76,#16b863);font-weight:700;font-size:12px}.toggle-row{min-height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1ee}.toggle-row:last-child{border:0}.toggle-row div{display:flex;flex-direction:column;gap:4px}.toggle-row b{font-size:12px}.toggle-row span{color:#8b9790;font-size:9px}.switch{width:45px;height:26px;padding:3px;border-radius:14px;background:#dfe6e1;transition:.2s}.switch i{display:block;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.2s}.switch.on{background:#27c975}.switch.on i{transform:translateX(19px)}
.toast{position:fixed;z-index:80;left:50%;top:calc(22px + env(safe-area-inset-top));width:max-content;max-width:calc(min(100%,480px) - 40px);min-height:49px;padding:9px 16px 9px 10px;border-radius:17px;color:white;background:rgba(23,47,34,.94);box-shadow:0 10px 30px rgba(0,0,0,.2);display:flex;align-items:center;gap:9px;opacity:0;transform:translate(-50%,-18px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#163626;background:#77e7a8}.toast-icon svg{width:16px}.toast p{margin:0;font-size:10px;line-height:1.4}.confetti-layer{position:fixed;z-index:90;inset:0;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:35%;width:9px;height:14px;border-radius:3px;animation:confettiFly 1s cubic-bezier(.2,.7,.2,1) forwards}@keyframes confettiFly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.success-scene{text-align:center;padding:8px 0 4px}.success-orb{width:90px;height:90px;margin:0 auto 16px;border-radius:30px;background:linear-gradient(145deg,#daf8e7,#a9ebc7);display:grid;place-items:center;color:#159c57;animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}.success-orb svg{width:47px;height:47px;stroke-width:2.2}@keyframes pop{from{transform:scale(.5) rotate(-12deg);opacity:0}}.success-scene h2{font-size:22px;margin-bottom:8px}.success-scene p{font-size:10px;color:#7c8b82;line-height:1.7}.reward-number{display:inline-block;margin:7px 0 4px;padding:7px 14px;border-radius:15px;color:#e48722;background:#fff2dc;font-size:16px;font-weight:800}.report-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:17px}.report-detail div{padding:14px 5px;border-radius:16px;background:#f4f8f5;text-align:center}.report-detail b{display:block;color:#18a85f;font-size:15px}.report-detail span{font-size:8px;color:#8b9890}.progress-ring{width:125px;height:125px;margin:4px auto 15px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#28ca77 0 92%,#e8eeea 92%)}.progress-ring::before{content:"";width:98px;height:98px;border-radius:50%;background:white;position:absolute}.progress-ring span{position:relative;z-index:1;text-align:center;font-size:10px;color:#819087}.progress-ring b{display:block;color:#168e52;font-size:32px;line-height:1}.rule-list{counter-reset:rules;display:grid;gap:10px;margin-top:18px}.rule-list p{counter-increment:rules;margin:0;padding:12px 12px 12px 43px;border-radius:15px;background:#f6f9f7;position:relative;color:#6e7f75;font-size:10px;line-height:1.6}.rule-list p::before{content:counter(rules);position:absolute;left:12px;top:12px;width:21px;height:21px;border-radius:8px;display:grid;place-items:center;color:#19a85f;background:#e2f7ea;font-weight:800}
@media (min-width: 481px){body{padding:20px 0}.app-shell{min-height:calc(100dvh - 40px);border-radius:30px}.bottom-nav{bottom:20px;border-radius:0 0 30px 30px}.modal-backdrop{width:480px;left:50%;transform:translateX(-50%);border-radius:30px}.bottom-sheet{bottom:20px;border-radius:28px}}
@media (max-width: 360px){.calendar-grid{gap:3px}.day{height:78px}.section-block{padding-left:15px;padding-right:15px}.reward-hero-copy h2{font-size:20px}.stat-card{padding:9px}.stat-icon{width:34px;height:34px}.stat-card strong{font-size:11px}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* México edition — cálida, expresiva y pensada para consumo diario */
html, body { background: #e8dfd3; }
.app-shell, .page { background: #fff7ea; }
.page { background-image: radial-gradient(circle at 92% 5%, rgba(255, 91, 54, .06) 0 75px, transparent 76px); }
.topbar h1, .section-heading h2, .guard-summary-head h2, .reward-hero-copy h2 { letter-spacing: -.35px; font-weight: 850; }
.eyebrow { color: #7b8993; letter-spacing: 1.35px; }
.eyebrow.green { color: #e84b2a; }
.brand-mark { background: linear-gradient(145deg, #ff7252, #f04428); box-shadow: 0 9px 0 rgba(225, 66, 37, .13), 0 14px 24px rgba(229, 69, 38, .18); transform: rotate(-3deg); }
.brand-mark svg { transform: rotate(3deg); }
.icon-btn { border: 1px solid rgba(23, 50, 74, .06); box-shadow: 0 7px 0 rgba(23, 50, 74, .04), 0 12px 22px rgba(40, 52, 60, .05); color: #17324a; }
.status-strip { color: #6e7f88; font-weight: 600; }
.status-strip b { color: #17324a; }
.pulse-dot { background: #10b89a; box-shadow: 0 0 0 4px rgba(16,184,154,.15); }
.battery-hero { background: radial-gradient(circle at 50% 43%, #fffdf7 0, #fff2d9 42%, #fff7ea 73%); }
.ambient-a { background: #bdf3e7; opacity: .72; }
.ambient-b { background: #ffd5a0; opacity: .78; }
.help-chip { color: #344e5f; border: 1px solid rgba(23,50,74,.05); box-shadow: 0 5px 0 rgba(23,50,74,.035); }
.orbit-ring { border-color: rgba(16,184,154,.21); }
.orbit-ring-2 { border-color: rgba(255,91,54,.2); }
.orbit-spark { border-color: #ff6949; box-shadow: 0 3px 8px rgba(255,91,54,.22); }
.battery-cap { background: #1ac8a8; }
.battery-body { border-color: #17324a; border-width: 5px; background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 4px rgba(255,255,255,.78), 7px 8px 0 rgba(23,50,74,.09); }
.battery-fill { background: linear-gradient(180deg, #49e2bc 0%, #11b993 64%, #069a7b 100%); }
.battery-fill::before { background: #63e7c5; }
.battery-label { background: rgba(3,91,75,.25); }
.health-score { border: 1px solid rgba(255,91,54,.13); box-shadow: 0 8px 0 rgba(23,50,74,.04), 0 13px 24px rgba(31,63,64,.06); }
.health-score b { color: #e84b2a; }
.health-score .score-pill { color: #087a67; background: #def8f1; }
.stat-card, .section-block { border: 1px solid rgba(23,50,74,.055); box-shadow: 0 7px 0 rgba(23,50,74,.045), 0 13px 24px rgba(31,45,55,.045); }
.stat-icon.mint { color: #058a72; background: #daf7ef; }
.stat-icon.amber { color: #e34b2b; background: #ffe8d7; }
.safe-badge, .all-good { color: #087c69; background: #ddf8f1; }
.check-icon { color: #0d9b80; background: #e5faf5; }
.check-row.done em { color: #07876f; }
.primary-btn { background: linear-gradient(120deg, #ff6542, #ef4325); box-shadow: 0 9px 0 rgba(193,50,26,.16), 0 14px 24px rgba(231,67,34,.2); }
.primary-btn:active { box-shadow: 0 4px 0 rgba(193,50,26,.16); transform: translateY(4px); }
.streak-banner { background: linear-gradient(125deg, #fff0cf, #fff 55%, #e9fbf5); border-color: #ffd893; }
.streak-visual { color: #c94a22; background: linear-gradient(145deg, #ffe59b, #ffc94e); box-shadow: 4px 5px 0 rgba(213,137,27,.12); transform: rotate(-2deg); }
.mini-tag { color: #bf3e20; background: #ffe3d7; }
.streak-copy p b, .text-btn { color: #e74c2c; }
.tip-card { background: #fff0dc; border: 1px solid #ffe1b8; }
.bottom-nav { background: rgba(255,253,248,.96); border-top-color: rgba(23,50,74,.08); }
.nav-item { color: #84909a; }
.nav-item.active { color: #ed4b2c; }
.nav-item.active span { background: #ffe6dc; }
.nav-item:focus-visible { outline: none; }
.nav-item:focus-visible span { box-shadow: 0 0 0 2px #ffca45; }
.reward-nav i { background: #ffbd2f; }
.guard-summary-card { background: linear-gradient(135deg, #00a98a, #087b6b); box-shadow: 0 10px 0 rgba(3,105,89,.14), 0 17px 28px rgba(4,123,102,.18); }
.shield-orb { background: #ffca45; color: #17324a; border-color: #ffe18b; box-shadow: 5px 6px 0 rgba(8,78,66,.22); }
.mode-card.active { border-color: #ff6a49; background: #fff4ee; box-shadow: inset 0 0 0 1px #ff6a49; }
.mode-icon.smart { color: #e84829; background: #ffe2d8; }
.mode-icon.long { color: #07866f; background: #dff8f1; }
.mode-icon.night { color: #5644ad; background: #eeeafb; }
.mode-card.active .mode-check { border-color: #ff5938; background: #ff5938; }
.chart-line { stroke: #ff5b38; }
.line-chart circle { stroke: #ff5b38; }
.chart-insight { background: #fff0db; }
.chart-insight b { color: #b43e23; }
.row-icon.green { color: #078c74; background: #dff8f1; }
.page[data-page="rewards"] { background: #fff7ea; }
.rewards-header { background: linear-gradient(140deg, #17324a 0%, #2a4961 48%, #df4c32 130%); }
.reward-kicker { color: #17324a; background: #ffca45; box-shadow: 3px 3px 0 rgba(0,0,0,.12); }
.week-progress-bar i { background: linear-gradient(90deg, #42dfbc, #ffca45); }
.checkin-card { box-shadow: 0 10px 0 rgba(23,50,74,.07), 0 18px 32px rgba(32,45,54,.1); border: 1px solid rgba(23,50,74,.05); }
.streak-fire { color: #c94724; background: #ffe3d3; }
.day.checked { color: #087c69; background: #e5faf5; }
.day.checked i { background: #10b89a; }
.day.today { color: #c23f20; background: #fff0e9; box-shadow: inset 0 0 0 2px #ff6542; }
.day.today i { color: #e94a2a; }
.day.gift-day { color: #a66d04; background: #fff2c6; }
.day.gift-day.today { color:#c23f20; background:#fff0e9; box-shadow:inset 0 0 0 2px #ff6542; }
.prize-card { background: linear-gradient(125deg, #17324a, #244d63); box-shadow: 5px 6px 0 rgba(23,50,74,.12); }
.guaranteed-pill { display:inline-flex; align-items:center; margin-bottom:13px; padding:5px 9px; border-radius:10px; color:#17324a; background:#ffca45; font-size:8px; font-weight:850; letter-spacing:.25px; box-shadow:3px 3px 0 rgba(0,0,0,.12); }
.prize-perks span { background: rgba(255,202,69,.12); border-color: rgba(255,202,69,.18); color: #ffe29a; }
.gift-box { background: linear-gradient(145deg, #ffe480, #ffb92e); }
.threshold-track i { background: linear-gradient(90deg, #1cc9a6, #ffca45); }
.outline-btn:not(:disabled) { color: #17324a; background: #ffca45; border-color: #ffca45; }
.mission-icon.green { color:#07866f; background:#e2f9f3; }
.mission-row em { color:#e94a2a; }
.mission-row button { background:#ffe6dd; color:#df4426; }
.redeem-card { background:#fff8ee; border:1px solid #eee4d7; }
.redeem-art.lime { background:#daf6e7; }.redeem-art.lilac{background:#eee7ff}.redeem-art.peach{background:#ffe1ce}
.redeem-card small { color:#dc4729; }
.profile-header { background: linear-gradient(145deg, #17324a, #234c65 62%, #7d365d 130%); }
.avatar { color:#17324a; background:linear-gradient(145deg,#fff2b5,#ffca45); border-color:#fff7d6; }
.avatar i { background:#13bd9b; border-color:#244e62; }
.level-pill { color:#17324a; background:#ffca45; }
.report-card { background:linear-gradient(135deg,#fff,#fff2dc); }
.report-icon { color:#e94a2a; background:#ffe5db; }
.report-card .mini-tag { color:#b93c20; background:#ffe2d6; }
.report-score { color:#e84a2a; }
.green-badge { background:linear-gradient(145deg,#ddf7ec,#a9e9d6) }.orange-badge{background:linear-gradient(145deg,#fff0d0,#ffc85d)}.blue-badge{background:linear-gradient(145deg,#e4f3ff,#aad8f3)}
.footer-logo { color:#e64b2c; background:#ffe4d9; }
.sheet-hero-icon { background:#ffe4d9!important; color:#e44829!important; }
.sheet-action { background:linear-gradient(120deg,#ff6542,#ef4325); box-shadow:0 6px 0 rgba(193,50,26,.14); }
.switch.on { background:#10b89a; }
.toast-icon { color:#17324a; background:#ffca45; }
.reward-number { color:#bd3d21; background:#ffe4d8; }
.progress-ring { background:conic-gradient(#10b89a 0 92%,#ebe5db 92%); }
.progress-ring b { color:#e44929; }
.rule-list p::before { color:#b93d21; background:#ffe2d7; }
.jackpot-kicker { display:inline-block; margin:0 0 10px; padding:5px 9px; border-radius:10px; color:#b33b21; background:#ffe2d5; font-size:8px; font-weight:850; letter-spacing:.8px; }
.chest-success .success-orb { background:linear-gradient(145deg,#ffe693,#ffbf37); color:#17324a; box-shadow:6px 7px 0 rgba(226,146,18,.14); }
.chest-success p b { color:#e44829; }
.prize-ticket { display:flex; align-items:center; gap:12px; background:linear-gradient(120deg,#fff3d5,#fff8e9); border:1px dashed #e6a927; }
.prize-ticket>span { font-size:30px; }
.prize-ticket>div { display:flex; flex-direction:column; gap:4px; }
.prize-ticket b { font-size:12px; color:#17324a; }
.prize-ticket small { color:#87918b; font-size:9px; }
.reward-wallet { display:flex; align-items:center; justify-content:space-around; margin-top:18px; padding:17px 8px; border-radius:19px; color:white; background:linear-gradient(125deg,#17324a,#28536b); }
.reward-wallet div { text-align:center; display:flex; flex-direction:column; gap:5px; }
.reward-wallet b { font-size:22px; color:#ffcf4d; }
.reward-wallet span { font-size:8px; opacity:.72; }
.reward-wallet i { width:1px; height:34px; background:rgba(255,255,255,.17); }