:root { --ink: #19372f; --muted: #70827d; --deep-green: #178866; --orange: #ff8f55; }
* { box-sizing: border-box; }
html { background: #e9f2ee; }
body { margin: 0; color: var(--ink); background: #e9f2ee; font-family: Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
button { font: inherit; }
[hidden] { display: none !important; }
.onboarding-shell { min-height: 100dvh; padding: 18px; background: radial-gradient(circle at 10% 8%, #fff4c9 0 7%, transparent 28%), radial-gradient(circle at 90% 20%, #dff9ee 0 10%, transparent 32%), linear-gradient(155deg, #f8fff9, #fffaf0); }
.onboarding-card { width: min(100%, 470px); min-height: calc(100dvh - 36px); margin: 0 auto; padding: 24px 22px 30px; border: 1px solid rgb(255 255 255 / 80%); border-radius: 32px; background: rgb(255 255 255 / 88%); box-shadow: 0 24px 70px rgb(44 85 70 / 13%); backdrop-filter: blur(16px); }
.onboarding-brand { display: flex; gap: 9px; align-items: center; margin-bottom: 40px; font-size: 15px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #2ab78d, #168360); box-shadow: 0 7px 18px rgb(29 148 111 / 24%); }
.brand-mark .material-symbols-rounded { color: #ffe189; font-size: 21px; font-variation-settings: "FILL" 1; }
.onboarding-step { display: none; animation: view-in .25s ease both; }
.onboarding-step.active { display: block; }
.onboarding-kicker { margin: 0 0 9px; color: var(--deep-green); font-size: 12px; font-weight: 900; }
.onboarding-step h1 { margin: 0; font-size: clamp(29px, 8vw, 38px); line-height: 1.18; letter-spacing: -.065em; }
.onboarding-lead { margin: 13px 0 25px; color: var(--muted); font-size: 14px; line-height: 1.65; word-break: keep-all; }
.role-grid { display: grid; gap: 12px; }
.role-card { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 100%; padding: 17px 15px; border: 1px solid #e2ece6; border-radius: 21px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; box-shadow: 0 9px 24px rgb(43 76 64 / 6%); }
.role-card:hover { transform: translateY(-1px); border-color: #9bd8c2; }
.role-card > .material-symbols-rounded { color: #9aa7a2; font-size: 20px; }
.role-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; }
.role-card.parent .role-icon { color: #177e60; background: #e2f7ef; }
.role-card.guardian .role-icon { color: #65509a; background: #efeaff; }
.role-card.child .role-icon { color: #d66f3c; background: #fff0d9; }
.role-card b, .role-card small { display: block; }
.role-card b { margin-bottom: 5px; font-size: 16px; }
.role-card small { color: var(--muted); font-size: 11px; }
.trust-row { display: flex; gap: 8px; align-items: center; margin-top: 22px; padding: 13px; border-radius: 15px; color: #547069; background: #f2f8f5; font-size: 11px; line-height: 1.5; }
.trust-row .material-symbols-rounded { color: var(--deep-green); font-size: 18px; }
.onboarding-back { display: inline-flex; gap: 4px; align-items: center; margin: -12px 0 23px; padding: 6px 0; border: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.onboarding-back .material-symbols-rounded { font-size: 17px; }
.agreement-box { display: grid; gap: 10px; margin-bottom: 15px; padding: 15px; border: 1px solid #dde9e3; border-radius: 17px; background: #f8fbf9; }
.agreement-box label { display: flex; gap: 8px; align-items: center; color: #4d655e; font-size: 11px; }
.agreement-box label:first-child { color: var(--ink); font-size: 12px; }
.agreement-box > div { height: 1px; background: #e2ebe6; }
.agreement-box input { width: 17px; height: 17px; margin: 0; accent-color: var(--deep-green); }
.agreement-box label span { flex: 1; }
.agreement-box label span b { color: var(--deep-green); }
.agreement-box label button { padding: 2px; border: 0; color: #76877f; background: transparent; font-size: 10px; text-decoration: underline; cursor: pointer; }
.google-auth-button, .email-auth-submit { width: 100%; padding: 14px; border-radius: 14px; font-weight: 900; cursor: pointer; }
.google-auth-button { display: flex; gap: 10px; align-items: center; justify-content: center; border: 1px solid #dce4e0; color: #263c35; background: #fff; }
.google-g { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #4285f4; font-family: Arial, sans-serif; font-size: 17px; font-weight: 900; }
.auth-divider, .code-divider { display: flex; align-items: center; margin: 16px 0; color: #98a59f; font-size: 10px; }
.auth-divider::before, .auth-divider::after, .code-divider::before, .code-divider::after { flex: 1; height: 1px; background: #e5ebe8; content: ""; }
.auth-divider span, .code-divider span { padding: 0 10px; }
.email-auth-form { display: grid; gap: 11px; }
.email-auth-form label, .child-code-form label, .guardian-code-form label { display: grid; gap: 6px; color: #61746e; font-size: 11px; font-weight: 800; }
.email-auth-form input, .child-code-form input, .guardian-code-form input { width: 100%; padding: 13px; border: 1px solid #dce7e1; border-radius: 12px; color: var(--ink); background: #fbfdfc; font: inherit; font-size: 14px; outline-color: var(--deep-green); }
.email-auth-submit, .child-code-form button, .guardian-code-form button { border: 0; color: #fff; background: var(--deep-green); }
.auth-mode-switch { width: 100%; margin-top: 12px; padding: 6px; border: 0; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; }
.auth-mode-switch b { color: var(--deep-green); }
.auth-status { margin: 14px 0 0; padding: 12px; border-radius: 12px; color: #7a5a22; background: #fff4d5; font-size: 11px; line-height: 1.55; text-align: center; }
.child-connect-visual { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 0 22px; border-radius: 28px; color: #fff; background: linear-gradient(145deg, #ffbd56, #ff825b); box-shadow: 0 15px 30px rgb(235 127 77 / 24%); }
.child-connect-visual .material-symbols-rounded { font-size: 43px; }
.child-code-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.child-code-form input { letter-spacing: .08em; text-transform: uppercase; }
.child-code-form button { height: 43px; padding: 0 17px; border-radius: 12px; font-size: 12px; font-weight: 900; cursor: pointer; }
.guardian-connect-visual { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 0 22px; border-radius: 28px; color: #fff; background: linear-gradient(145deg, #7c65b8, #4c3b82); box-shadow: 0 15px 30px rgb(76 59 130 / 24%); }
.guardian-connect-visual .material-symbols-rounded { font-size: 40px; }
.guardian-code-form { display: grid; gap: 10px; }
.guardian-code-form input { letter-spacing: .08em; text-transform: uppercase; outline-color: #65509a; }
.guardian-code-form button { height: 45px; border-radius: 13px; background: #56428d; font-size: 12px; font-weight: 900; cursor: pointer; }
.guardian-guide .material-symbols-rounded { color: #65509a; }
.parent-guide { display: flex; gap: 9px; margin-top: 20px; padding: 14px; border-radius: 15px; color: #667871; background: #f2f7f4; font-size: 11px; line-height: 1.55; }
.parent-guide .material-symbols-rounded { color: var(--deep-green); font-size: 18px; }
.parent-guide p { margin: 0; }
.material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.coin-amount { display: inline-flex; gap: .25em; align-items: center; white-space: nowrap; }
.coin-amount > .material-symbols-rounded { padding: 0; color: #d99a22; background: transparent; font-size: 1.05em; line-height: 1; font-variation-settings: "FILL" 1; }
.app-shell { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: 24px 20px 112px; background: linear-gradient(180deg, #f7fff9 0, #fffaf1 42%, #fff 100%); overflow: hidden; position: relative; box-shadow: 0 0 40px rgb(32 83 67 / 10%); }
.parent-mode-active { background: #eef3f0; }.parent-mode-active .app-shell { padding-bottom: 112px; background: #f7faf8; }.parent-mode-active .bottom-nav { display: none; }.parent-mode-active .parent-bottom-nav { display: flex; }
.view { display: none; animation: view-in .28s ease both; }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.topbar { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 22px; }
.eyebrow, .section-label { margin: 0 0 5px; color: var(--deep-green); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.topbar h1 { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 23px; letter-spacing: -.04em; }
.hello-icon { color: #ef9b3e; font-size: 20px; }
.avatar { width: 48px; height: 48px; border: 3px solid #fff; border-radius: 18px; color: #fff; background: #ffb55b; box-shadow: 0 7px 18px rgb(255 170 81 / 30%); font-size: 12px; font-weight: 800; cursor: pointer; }
.balance-card { position: relative; overflow: hidden; padding: 25px 24px 20px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #36c99a, #179375); box-shadow: 0 18px 40px rgb(28 153 116 / 28%); }
.balance-card::after { content: "★"; position: absolute; right: -14px; top: -31px; color: rgb(255 255 255 / 9%); font-size: 150px; transform: rotate(10deg); }
.balance-glow { position: absolute; width: 130px; height: 130px; right: -20px; bottom: -50px; border-radius: 50%; background: rgb(255 221 106 / 27%); filter: blur(8px); }
.balance-card p { position: relative; margin: 0; font-size: 14px; font-weight: 700; opacity: .88; }
.balance-card > strong { position: relative; z-index: 1; display: flex; gap: 9px; align-items: center; margin: 8px 0 20px; font-size: 44px; letter-spacing: -.04em; }
.balance-card > strong > .material-symbols-rounded { color: #ffe68c; font-size: 31px; font-variation-settings: "FILL" 1; }
.balance-card small { font-size: 22px; }
.weekly-row { position: relative; z-index: 1; display: flex; gap: 8px; }
.weekly-row > span { flex: 1; padding: 9px 10px; border-radius: 12px; background: rgb(255 255 255 / 14%); font-size: 12px; }
.weekly-row .coin-amount > .material-symbols-rounded { color: #ffe68c; }
.goal-card { display: flex; gap: 16px; align-items: center; margin: 18px 0 27px; padding: 17px; border: 1px solid #f1e9d8; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgb(77 64 40 / 8%); }
.goal-icon { display: grid; place-items: center; flex: 0 0 66px; height: 66px; border-radius: 20px; color: #dc7541; background: #fff0dc; }
.goal-icon .material-symbols-rounded { font-size: 33px; }
.goal-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }.goal-card.empty .goal-icon { color: #b3748a; background: #f9eaf0; }.goal-copy > p:last-child button { padding: 0; border: 0; color: var(--deep-green); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.goal-copy { flex: 1; min-width: 0; }
.goal-copy h2 { margin: 0 0 9px; font-size: 17px; letter-spacing: -.03em; }
.progress { height: 8px; overflow: hidden; border-radius: 20px; background: #e8eee9; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb144, #ff8257); }
.goal-copy > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.goal-copy > p:last-child b { color: var(--orange); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.04em; }
.section-heading button { border: 0; color: var(--deep-green); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.mission-list { display: grid; gap: 10px; }
.mission-list article { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid #edf1ed; border-radius: 18px; background: #fff; }
.mission-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; }
.mission-icon .material-symbols-rounded { font-size: 24px; }
.mission-icon.mint { color: #208969; background: #e2f8ef; }
.mission-icon.yellow { color: #b27a20; background: #fff3cf; }
.mission-list article div { flex: 1; }
.mission-list h3 { margin: 0 0 4px; font-size: 14px; }
.mission-list p { margin: 0; color: var(--muted); font-size: 11px; }
.mission-list strong { padding: 7px 9px; border-radius: 11px; color: var(--deep-green); background: #e6f8f1; font-size: 13px; }
.page-header { margin: 4px 0 22px; }
.page-header h1 { margin: 0; font-size: 26px; letter-spacing: -.05em; }
.page-header > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.streak-card { display: flex; gap: 13px; align-items: center; margin-bottom: 18px; padding: 16px; border-radius: 20px; color: #824f20; background: linear-gradient(135deg, #fff1c9, #ffe4bd); }
.streak-card > .material-symbols-rounded { font-size: 31px; color: #ee8141; }
.streak-card div { flex: 1; }
.streak-card strong, .streak-card p { display: block; margin: 0; }
.streak-card p { margin-top: 3px; font-size: 11px; opacity: .7; }
.streak-card > b { padding: 7px 9px; border-radius: 10px; background: rgb(255 255 255 / 55%); font-size: 12px; }
.task-stack { display: grid; gap: 11px; }
.task-card { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid #edf1ed; border-radius: 19px; background: #fff; }
.task-card > div { flex: 1; min-width: 0; }
.task-card h2 { margin: 0 0 4px; font-size: 14px; }
.task-card p { margin: 0; color: var(--muted); font-size: 11px; }
.task-card button { min-width: 82px; padding: 8px 9px; border: 0; border-radius: 11px; color: var(--deep-green); background: #e6f8f1; font-size: 12px; font-weight: 800; cursor: pointer; }
.task-card button:disabled { color: #8b9994; background: #edf1ef; cursor: default; }
.mission-icon.blue { color: #3678aa; background: #e7f3ff; }
.mission-icon.purple { color: #7960aa; background: #f0eaff; }
.shop-header { margin-bottom: 14px; }
.mini-balance { display: inline-flex; gap: 6px; align-items: center; margin-top: 13px; padding: 8px 12px; border-radius: 13px; color: #fff; background: var(--deep-green); font-size: 12px; }
.mini-balance .material-symbols-rounded { color: #ffe68c; font-size: 17px; }
.filter-chips { display: flex; gap: 7px; overflow-x: auto; margin: 0 -2px 17px; padding: 2px; scrollbar-width: none; }
.filter-chips button { flex: 0 0 auto; padding: 8px 13px; border: 1px solid #e3eae6; border-radius: 20px; color: var(--muted); background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.filter-chips .selected { border-color: var(--deep-green); color: #fff; background: var(--deep-green); }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.product-card { padding: 12px; border: 1px solid #edf1ed; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgb(44 70 61 / 5%); }
.product-art { position: relative; display: grid; place-items: center; aspect-ratio: 1.35; margin-bottom: 11px; border-radius: 15px; }
.product-art > .material-symbols-rounded { font-size: 39px; }
.product-art.has-photo { overflow: hidden; }.product-art.has-photo > img { width: 100%; height: 100%; object-fit: cover; }.product-art.has-photo::after { position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(22 42 35 / 10%)); content: ""; }.product-art.has-photo small { z-index: 1; }
.product-art small { position: absolute; right: 7px; top: 7px; padding: 4px 6px; border-radius: 7px; background: rgb(255 255 255 / 70%); font-size: 9px; font-weight: 800; }
.wish-button { position: absolute; z-index: 2; left: 7px; top: 7px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 10px; color: #a7b1ad; background: rgb(255 255 255 / 88%); box-shadow: 0 3px 10px rgb(30 62 50 / 10%); cursor: pointer; }.wish-button .material-symbols-rounded { font-size: 18px; }.wish-button.active { color: #ed6e70; }.wish-button.active .material-symbols-rounded { font-variation-settings: "FILL" 1; }.wish-button:disabled { opacity: .6; }
.peach { color: #cf6e49; background: #ffebdf; } .sky { color: #447da4; background: #e7f4ff; } .lemon { color: #a67b20; background: #fff3c9; } .lilac { color: #775da0; background: #f0e8ff; }
.product-card h2 { margin: 0 0 3px; font-size: 14px; }
.product-card p { margin: 0 0 10px; color: var(--muted); font-size: 10px; }
.product-card > button { width: 100%; padding: 9px; border: 0; border-radius: 10px; color: #fff; background: var(--deep-green); font-size: 12px; font-weight: 800; cursor: pointer; }
.product-card > button:disabled { color: #87948f; background: #e8eeeb; cursor: default; }
.history-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.history-summary div { display: grid; gap: 5px; padding: 15px; border: 1px solid #edf1ed; border-radius: 17px; background: #fff; }
.history-summary div > span { color: var(--muted); font-size: 11px; }
.history-summary strong { font-size: 19px; }
.positive { color: #15966f; } .negative { color: #e56f58; }
.date-label { margin: 18px 2px 9px; color: var(--muted); font-size: 11px; font-weight: 800; }
.history-list { overflow: hidden; border: 1px solid #edf1ed; border-radius: 19px; background: #fff; }
.history-list article { display: flex; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid #eef2ef; }
.history-list article:last-child { border-bottom: 0; }
.history-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; }
.history-icon .material-symbols-rounded { font-size: 19px; }
.history-icon.gain { color: var(--deep-green); background: #e5f7f0; }
.history-icon.spend { color: #e27755; background: #fff0e9; }
.history-list article > div { flex: 1; }
.history-list h2 { margin: 0 0 4px; font-size: 13px; }
.history-list p { margin: 0; color: var(--muted); font-size: 10px; }
.history-list strong { font-size: 13px; }
.profile-title-row { display: flex; justify-content: space-between; align-items: center; }
.settings-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #e6ece8; border-radius: 14px; color: var(--muted); background: #fff; }
.settings-button .material-symbols-rounded { font-size: 21px; }
.profile-card { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; padding: 18px; border-radius: 21px; color: #fff; background: linear-gradient(135deg, #38bd90, #198d6d); }
.profile-avatar { display: grid; place-items: center; width: 62px; height: 62px; border: 3px solid rgb(255 255 255 / 80%); border-radius: 20px; color: #fff; background: #ffb55b; font-size: 13px; font-weight: 800; }
.profile-card > div:last-child > span { display: inline-block; padding: 4px 7px; border-radius: 7px; background: rgb(255 255 255 / 15%); font-size: 9px; font-weight: 800; }
.profile-card .coin-amount > .material-symbols-rounded { color: #ffe68c; }
.profile-card h2 { margin: 6px 0 3px; font-size: 17px; }
.profile-card p { margin: 0; font-size: 10px; opacity: .78; }
.qr-card { display: flex; gap: 17px; align-items: center; padding: 17px; border: 1px solid #edf1ed; border-radius: 21px; background: #fff; }
.qr-image { flex: 0 0 96px; width: 96px; height: 96px; padding: 5px; border: 1px solid #dbe4df; border-radius: 11px; background: #fff; object-fit: contain; }
.qr-card > div:last-child { flex: 1; }
.qr-card h2 { margin: 0 0 5px; font-size: 16px; letter-spacing: .04em; }
.qr-card > div > p:not(.section-label) { margin: 0 0 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.qr-card button { padding: 7px 9px; border: 0; border-radius: 9px; color: var(--deep-green); background: #e6f8f1; font-size: 10px; font-weight: 800; }
.badge-heading { margin-top: 24px; }
.badge-heading > span { color: var(--muted); font-size: 11px; }
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.badge-grid article { display: grid; gap: 7px; place-items: center; padding: 12px 5px; border: 1px solid #edf1ed; border-radius: 15px; background: #fff; text-align: center; }
.badge-grid .material-symbols-rounded { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: #aa7426; background: #fff0ca; font-size: 21px; }
.badge-grid b { font-size: 9px; line-height: 1.3; }
.parent-mode-link { display: flex; gap: 10px; align-items: center; width: 100%; margin-top: 14px; padding: 15px; border: 1px solid #e1ece7; border-radius: 18px; color: var(--ink); background: #f6fffa; font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; }
.parent-mode-link .material-symbols-rounded:first-child { color: var(--deep-green); }
.parent-mode-link .material-symbols-rounded:last-child { margin-left: auto; color: var(--muted); font-size: 19px; }
.parent-header { display: flex; align-items: flex-start; justify-content: space-between; margin: 4px 0 22px; }.parent-header h1 { margin: 0; font-size: 28px; letter-spacing: -.06em; }.parent-header > div:first-child > p:last-child { max-width: 265px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.parent-header-actions { display: flex; gap: 7px; }
.back-button, .lock-button, .parent-child-view, .modal-close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e6ece8; border-radius: 13px; color: var(--muted); background: #fff; cursor: pointer; }
.back-button .material-symbols-rounded, .lock-button .material-symbols-rounded, .parent-child-view .material-symbols-rounded, .modal-close .material-symbols-rounded { font-size: 20px; }
.parent-child-view { color: #258164; background: #ecfaf4; border-color: #cce9dc; }
.lock-button { color: #b17625; background: #fffaf0; }
.parent-child-context { margin: -5px 0 18px; }.parent-child-context > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }.parent-child-context .family-child-list { margin: 0 -2px; }
.parent-panel { display: none; }.parent-panel.active { display: block; animation: view-in .22s ease both; }.parent-panel-heading { margin: 2px 0 20px; }.parent-panel-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.05em; }.parent-panel-heading > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.parent-control-card { margin-bottom: 22px; padding: 16px; border: 1px solid #dceae3; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgb(34 74 57 / 6%); }.parent-control-heading { display: flex; align-items: center; justify-content: space-between; }.parent-control-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.04em; }.parent-control-heading button { display: flex; gap: 4px; align-items: center; padding: 8px 10px; border: 1px solid #cce8dc; border-radius: 10px; color: var(--deep-green); background: #f2fbf6; font-size: 10px; font-weight: 800; cursor: pointer; }.parent-control-heading button .material-symbols-rounded { font-size: 15px; }
.parent-secure-label { display: flex; gap: 4px; align-items: center; color: #3b7e68; font-size: 9px; font-weight: 800; }.parent-secure-label .material-symbols-rounded { font-size: 15px; }
.parent-child-card { display: flex; gap: 13px; align-items: center; margin-bottom: 12px; padding: 17px; border-radius: 19px; color: #fff; background: linear-gradient(135deg, #293f37, #1a6b55); box-shadow: 0 10px 22px rgb(30 75 61 / 16%); }
.family-child-list { display: flex; gap: 8px; overflow-x: auto; margin: 12px -2px; padding: 2px; scrollbar-width: none; }
.family-child-list button { display: flex; flex: 0 0 auto; gap: 7px; align-items: center; padding: 8px 11px; border: 1px solid #e1ebe5; border-radius: 14px; color: var(--muted); background: #f9fcfa; font-size: 11px; font-weight: 800; cursor: pointer; }
.family-child-list button.active { border-color: var(--deep-green); color: var(--deep-green); background: #e9fbf3; box-shadow: inset 0 0 0 1px #d0ebdf; }
.family-child-list b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 8px; color: #fff; background: #ffb55b; font-size: 9px; }
.parent-child-avatar { display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid rgb(255 255 255 / 70%); border-radius: 17px; background: #ffb55b; font-weight: 900; }
.parent-child-card > div:nth-child(2) { flex: 1; }
.parent-child-card p, .parent-child-card h2 { margin: 0; }
.parent-child-card p { font-size: 10px; opacity: .72; }
.parent-child-card h2 { margin: 3px 0 5px; font-size: 18px; }
.parent-child-card strong { display: flex; gap: 4px; align-items: center; color: #ffe68c; font-size: 15px; }
.parent-child-card strong .material-symbols-rounded { font-size: 17px; }
.child-live { display: flex; gap: 5px; align-items: center; align-self: flex-start; padding: 5px 7px; border-radius: 8px; background: rgb(255 255 255 / 12%); font-size: 9px; font-weight: 800; }
.child-live i { width: 6px; height: 6px; border-radius: 50%; background: #8cfaad; box-shadow: 0 0 0 3px rgb(140 250 173 / 12%); }
.parent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.parent-actions button { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 13px 8px; border-radius: 15px; font-size: 12px; font-weight: 800; text-align: left; cursor: pointer; }.parent-actions button > span:last-child { display: grid; gap: 2px; }.parent-actions small { font-size: 9px; font-weight: 600; opacity: .74; }
.parent-actions .grant { border: 1px solid #aee7d3; color: #087858; background: #e4faf1; }
.parent-actions .take { border: 1px solid #ffd6c9; color: #bd5d45; background: #fff0eb; }
.parent-actions .material-symbols-rounded { font-size: 18px; }
.parent-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.parent-overview-grid button { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 12px 10px; border: 1px solid #e2ebe6; border-radius: 16px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }.parent-overview-grid .material-symbols-rounded { grid-row: 1 / 3; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; font-size: 17px; }.parent-overview-grid .mint { color: #168365; background: #e4f7ef; }.parent-overview-grid .orange { color: #bb6f28; background: #fff0db; }.parent-overview-grid .blue { color: #447ba4; background: #e7f2fb; }.parent-overview-grid .purple { color: #765ba1; background: #f0e9fb; }.parent-overview-grid small { color: var(--muted); font-size: 9px; }.parent-overview-grid strong { font-size: 14px; }
.shop-manager { margin: 0 0 24px; padding: 16px; border: 1px solid #e2ece6; border-radius: 24px; background: #fafffc; }
.shop-manager .section-heading { align-items: center; margin: 0; }.shop-manager .section-heading > button { display: flex; gap: 4px; align-items: center; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: var(--deep-green); font-size: 10px; font-weight: 800; cursor: pointer; }.shop-manager .section-heading > button .material-symbols-rounded { font-size: 15px; }
.shop-manager-note { margin: 5px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.reward-manager-list { display: grid; gap: 8px; }
.reward-manager-card { display: flex; gap: 9px; align-items: center; padding: 10px; border: 1px solid #e7eeea; border-radius: 14px; background: #fff; }.reward-manager-card > .material-symbols-rounded, .reward-manager-card > img { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #bd7524; background: #fff0cf; font-size: 18px; }.reward-manager-card > img { object-fit: cover; }.reward-manager-card > div { flex: 1; min-width: 0; }.reward-manager-card h3, .reward-manager-card p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }.reward-manager-card h3 { font-size: 12px; }.reward-manager-card p { margin-top: 3px; color: var(--muted); font-size: 9px; }.reward-manager-card button { padding: 7px 9px; border: 1px solid #cfe4da; border-radius: 9px; color: var(--deep-green); background: #f1fbf6; font-size: 10px; font-weight: 800; cursor: pointer; }
.praise-manager { padding: 16px; border: 1px solid #e4dff0; border-radius: 24px; background: #fcfaff; }.praise-manager .section-heading { align-items: center; margin: 0; }.praise-manager .section-heading > button { display: flex; gap: 4px; align-items: center; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: #70569a; font-size: 10px; font-weight: 800; cursor: pointer; }.praise-manager .section-heading > button .material-symbols-rounded { font-size: 15px; }.praise-manager-list { display: grid; gap: 8px; }.praise-manager-card { display: grid; grid-template-columns: auto 1fr auto auto; gap: 9px; align-items: center; padding: 11px; border: 1px solid #e9e3f1; border-radius: 15px; background: #fff; }.praise-manager-card > .material-symbols-rounded { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #70569a; background: #f1eafb; font-size: 19px; }.praise-manager-card > div { min-width: 0; }.praise-manager-card h3, .praise-manager-card p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }.praise-manager-card h3 { font-size: 12px; }.praise-manager-card p { margin-top: 3px; color: var(--muted); font-size: 9px; }.praise-manager-card strong { color: #70569a; font-size: 11px; }.praise-manager-card button { padding: 7px 8px; border: 1px solid #ded4ec; border-radius: 9px; color: #70569a; background: #f8f4fc; font-size: 10px; font-weight: 800; cursor: pointer; }
.add-child-button { display: flex; gap: 7px; align-items: center; justify-content: center; width: 100%; margin: -13px 0 26px; padding: 12px; border: 1px dashed #94cfbc; border-radius: 15px; color: var(--deep-green); background: #f5fffa; font-size: 12px; font-weight: 800; cursor: pointer; }
.add-child-button .material-symbols-rounded { font-size: 18px; }
.family-manager-list { display: grid; gap: 9px; }.family-manager-card { display: flex; gap: 11px; align-items: center; padding: 13px; border: 1px solid #e3ebe6; border-radius: 18px; background: #fff; }.family-manager-card.selected { border-color: #9fd8c3; background: #f4fff9; }.family-manager-card > b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: #ffb55b; font-size: 11px; }.family-manager-card > div { flex: 1; min-width: 0; }.family-manager-card h3, .family-manager-card p { margin: 0; }.family-manager-card h3 { font-size: 13px; }.family-manager-card p { margin-top: 4px; color: var(--muted); font-size: 9px; }.family-manager-card button { padding: 8px 10px; border: 0; border-radius: 10px; color: var(--deep-green); background: #e9f8f1; font-size: 10px; font-weight: 800; cursor: pointer; }.family-manager-card.selected button { color: #fff; background: var(--deep-green); }.family-add-button { display: flex; gap: 10px; align-items: center; width: 100%; margin-top: 11px; padding: 14px; border: 1px dashed #8fcbb6; border-radius: 17px; color: var(--deep-green); background: #f5fffa; text-align: left; cursor: pointer; }.family-add-button > span:last-child { display: grid; gap: 3px; font-size: 12px; font-weight: 800; }.family-add-button small { color: var(--muted); font-size: 9px; font-weight: 600; }
.family-subheading { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 9px; }.family-subheading h3 { margin: 0; font-size: 14px; }.family-subheading > span { color: var(--muted); font-size: 10px; font-weight: 800; }.child-heading { margin-top: 26px; }
.guardian-manager-list { display: grid; gap: 9px; }.guardian-manager-card { display: flex; gap: 11px; align-items: center; padding: 13px; border: 1px solid #e6e0f2; border-radius: 18px; background: #fff; }.guardian-manager-card > b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #8069b7, #55418a); font-size: 11px; }.guardian-manager-card > div { flex: 1; min-width: 0; }.guardian-manager-card h3, .guardian-manager-card p { margin: 0; }.guardian-manager-card h3 { font-size: 13px; }.guardian-manager-card p { overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.guardian-role { padding: 5px 8px; border-radius: 9px; color: #5e4a91; background: #eee9fa; font-size: 9px; font-weight: 900; }.guardian-role.owner { color: #177e60; background: #e2f7ef; }
.guardian-invite-button { display: flex; gap: 10px; align-items: center; width: 100%; margin-top: 11px; padding: 14px; border: 1px dashed #a99bd0; border-radius: 17px; color: #5e4a91; background: #faf8ff; text-align: left; cursor: pointer; }.guardian-invite-button > span:last-child { display: grid; gap: 3px; font-size: 12px; font-weight: 800; }.guardian-invite-button small { color: var(--muted); font-size: 9px; font-weight: 600; }.guardian-owner-note { margin: 10px 2px 0; color: var(--muted); font-size: 10px; }
.family-card-actions { display: flex; gap: 5px; }
.family-card-actions button:last-child, .family-manager-card.selected .family-card-actions button:last-child { color: #8a6521; background: #fff2d7; }
.parent-section { margin-bottom: 10px; }
.parent-section > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.pending-list { display: grid; gap: 9px; }
.pending-card { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid #edf1ed; border-radius: 18px; background: #fff; }
.pending-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }
.pending-icon.gain { color: var(--deep-green); background: #e5f7f0; }
.pending-icon.spend { color: #d16f50; background: #fff0e9; }
.pending-icon .material-symbols-rounded { font-size: 19px; }
.pending-card > div:nth-child(2) { flex: 1; min-width: 0; }
.pending-card p, .pending-card h2, .pending-card strong { margin: 0; }
.pending-card p { color: var(--muted); font-size: 9px; }
.pending-card h2 { overflow: hidden; margin: 2px 0 3px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pending-card strong { font-size: 11px; }
.pending-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pending-actions button { padding: 7px 8px; border: 0; border-radius: 9px; font-size: 10px; font-weight: 800; cursor: pointer; }
.pending-actions button:first-child { color: #fff; background: var(--deep-green); }
.pending-actions button:last-child { color: var(--muted); background: #f1f4f2; }
.pending-actions button:disabled { opacity: .55; cursor: default; }
.empty-pending, .empty-note { padding: 22px 16px; border: 1px dashed #dce6e1; border-radius: 18px; color: var(--muted); background: #fbfdfc; text-align: center; }
.empty-pending { display: grid; gap: 5px; place-items: center; }
.empty-pending .material-symbols-rounded { color: #e3a33b; font-size: 27px; }
.empty-pending strong { color: var(--ink); font-size: 13px; }
.empty-pending p { margin: 0; font-size: 10px; }
.empty-note { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.parent-note { display: flex; gap: 7px; align-items: center; margin: 19px 4px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.parent-note .material-symbols-rounded { color: var(--deep-green); font-size: 16px; }
.parent-history-section { margin-top: 18px; padding: 16px; border: 1px solid #dfe9e4; border-radius: 24px; background: #fff; box-shadow: 0 10px 26px rgb(34 74 57 / 5%); }
.parent-history-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.parent-history-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.04em; }
.parent-history-heading > .material-symbols-rounded { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #a76c1f; background: #fff1ca; font-size: 20px; }
.parent-history-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.parent-history-summary > div { display: grid; gap: 4px; padding: 11px; border-radius: 14px; background: #f7faf8; }
.parent-history-summary > div > span { color: var(--muted); font-size: 9px; }
.parent-history-summary strong { font-size: 13px; }
.parent-history-filters { display: flex; gap: 6px; margin-bottom: 11px; }
.parent-history-filters button { padding: 7px 11px; border: 1px solid #e0e8e4; border-radius: 18px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.parent-history-filters button.selected { border-color: var(--deep-green); color: #fff; background: var(--deep-green); }
.parent-history-list { display: grid; gap: 7px; }
.parent-history-list article { display: flex; gap: 10px; align-items: center; padding: 11px; border: 1px solid #e8eeeb; border-radius: 15px; background: #fcfefd; }
.parent-history-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; }
.parent-history-icon.gain { color: var(--deep-green); background: #e5f7f0; }
.parent-history-icon.spend { color: #d16f50; background: #fff0e9; }
.parent-history-icon .material-symbols-rounded { font-size: 18px; }
.parent-history-list article > div { flex: 1; min-width: 0; }
.parent-history-list h3, .parent-history-list p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.parent-history-list h3 { font-size: 12px; }
.parent-history-list p { margin-top: 3px; color: var(--muted); font-size: 9px; }
.parent-history-list article > strong { font-size: 11px; }
.empty-parent-history { display: grid; gap: 5px; place-items: center; padding: 18px; border: 1px dashed #dce6e1; border-radius: 15px; color: var(--muted); background: #fbfdfc; text-align: center; }
.empty-parent-history .material-symbols-rounded { font-size: 23px; }
.empty-parent-history p { margin: 0; font-size: 10px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 92px; width: max-content; max-width: calc(100% - 42px); padding: 12px 16px; transform: translate(-50%, 16px); border-radius: 14px; color: #fff; background: #19372f; box-shadow: 0 10px 28px rgb(20 52 43 / 25%); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.celebration { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(19 55 47 / 0%); opacity: 0; pointer-events: none; transition: .25s ease; }
.celebration::before, .celebration::after { position: absolute; color: #ffd857; font-size: 70px; content: "✦"; opacity: 0; }
.celebration::before { margin: -210px 0 0 -180px; }.celebration::after { margin: 170px -190px 0 0; }
.celebration.show { background: rgb(19 55 47 / 22%); opacity: 1; }
.celebration.show::before, .celebration.show::after { animation: sparkle .9s ease both; }
.celebration-card { display: grid; gap: 8px; place-items: center; width: min(280px, 100%); padding: 27px 22px; transform: scale(.78) rotate(-3deg); border: 4px solid #fff; border-radius: 30px; color: #fff; background: linear-gradient(145deg, #ffba44, #ff7e5d); box-shadow: 0 24px 60px rgb(19 55 47 / 30%); text-align: center; }
.celebration.show .celebration-card { animation: reward-pop .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.celebration-card > .material-symbols-rounded { color: #fff3a8; font-size: 46px; filter: drop-shadow(0 4px 0 rgb(160 83 28 / 22%)); }
.celebration-card .coin-amount > .material-symbols-rounded { color: #fff3a8; font-size: .95em; filter: none; }
.celebration-card strong { font-size: 38px; letter-spacing: -.06em; }.celebration-card p { margin: 0; font-size: 13px; font-weight: 800; }
@keyframes reward-pop { to { transform: scale(1) rotate(0); } }
@keyframes sparkle { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.5) rotate(20deg); opacity: 0; } }
.point-modal[hidden] { display: none; }
.point-modal { position: fixed; z-index: 45; inset: 0; display: grid; place-items: end center; padding: 18px; background: rgb(19 55 47 / 38%); }
.point-modal-card { position: relative; display: grid; gap: 13px; width: min(440px, 100%); padding: 25px 20px 20px; border-radius: 25px; background: #fff; box-shadow: 0 18px 50px rgb(19 55 47 / 24%); }
.point-modal-card h2 { margin: -7px 0 5px; font-size: 21px; letter-spacing: -.04em; }
.point-modal-card label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.point-modal-card input, .point-modal-card select { width: 100%; padding: 12px; border: 1px solid #dce7e1; border-radius: 12px; color: var(--ink); background: #fbfdfc; font: inherit; font-size: 14px; outline-color: var(--deep-green); }
.modal-close { position: absolute; right: 16px; top: 16px; }.modal-submit { padding: 14px; border: 0; border-radius: 13px; color: #fff; background: var(--deep-green); font-weight: 800; cursor: pointer; }.modal-submit:disabled { opacity: .55; }
.parent-auth-modal[hidden] { display: none; }
.parent-auth-modal { position: fixed; z-index: 46; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(19 55 47 / 48%); }
.parent-auth-card { display: grid; gap: 13px; width: min(370px, 100%); padding: 27px 22px 20px; border-radius: 27px; background: #fff; box-shadow: 0 24px 64px rgb(19 55 47 / 30%); }
.auth-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #c38020; background: #fff1c8; font-size: 25px; }
.parent-auth-card h2 { margin: -6px 0 0; font-size: 21px; letter-spacing: -.04em; }
.parent-auth-card > p:not(.eyebrow) { margin: -5px 0 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.parent-auth-card label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.parent-auth-card input { width: 100%; padding: 13px; border: 1px solid #dce7e1; border-radius: 12px; color: var(--ink); background: #fbfdfc; font: inherit; font-size: 15px; letter-spacing: .12em; outline-color: var(--deep-green); }
.auth-submit { padding: 14px; border: 0; border-radius: 13px; color: #fff; background: #19372f; font-weight: 800; cursor: pointer; }.auth-submit:disabled { opacity: .55; }
.auth-cancel { padding: 5px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.add-child-modal[hidden] { display: none; }
.add-child-modal { position: fixed; z-index: 46; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(19 55 47 / 48%); }
.add-child-card { position: relative; display: grid; gap: 13px; width: min(370px, 100%); padding: 27px 22px 20px; border-radius: 27px; background: #fff; box-shadow: 0 24px 64px rgb(19 55 47 / 30%); }
.add-child-card h2 { margin: -6px 0 0; font-size: 21px; letter-spacing: -.04em; }
.add-child-card > p:not(.eyebrow) { margin: -5px 0 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.add-child-card label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.add-child-card input, .add-child-card select { width: 100%; padding: 13px; border: 1px solid #dce7e1; border-radius: 12px; color: var(--ink); background: #fbfdfc; font: inherit; font-size: 15px; outline-color: var(--deep-green); }
.pairing-modal[hidden], .legal-modal[hidden] { display: none; }
.pairing-modal, .legal-modal { position: fixed; z-index: 52; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgb(19 55 47 / 52%); }
.pairing-card, .legal-card { position: relative; display: grid; gap: 12px; width: min(380px, 100%); margin: auto; padding: 27px 22px 21px; border-radius: 28px; background: #fff; box-shadow: 0 24px 64px rgb(19 55 47 / 30%); }
.pairing-card h2, .legal-card h2 { margin: -5px 0 0; font-size: 22px; letter-spacing: -.045em; }
.pairing-card > p:not(.eyebrow) { margin: -4px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.pairing-qr-wrap { display: grid; place-items: center; width: 230px; height: 230px; margin: 3px auto; padding: 12px; border: 1px solid #dce8e2; border-radius: 24px; background: #fff; }
.pairing-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
.pairing-card > strong { color: var(--deep-green); font-size: 19px; letter-spacing: .09em; text-align: center; }
.guardian-invite-card { border: 1px solid #e4dcf4; }.guardian-invite-card .eyebrow, .guardian-invite-card > strong { color: #5d468f; }.guardian-qr-wrap { border-color: #d9cef1; background: #fdfcff; }.guardian-copy-button { background: #56428d; }
.legal-copy { max-height: 55vh; overflow-y: auto; padding: 14px; border-radius: 14px; color: #586c65; background: #f6f9f7; font-size: 11px; line-height: 1.7; }
.legal-copy h3 { margin: 13px 0 5px; color: var(--ink); font-size: 12px; }
.legal-copy p { margin: 0 0 8px; }
.reward-modal[hidden] { display: none; }.reward-modal { position: fixed; z-index: 47; inset: 0; display: grid; place-items: center; padding: 18px; overflow-y: auto; background: rgb(19 55 47 / 48%); }.reward-card { position: relative; display: grid; gap: 11px; width: min(390px, 100%); margin: auto; padding: 25px 22px 20px; border-radius: 27px; background: #fff; box-shadow: 0 24px 64px rgb(19 55 47 / 30%); }.reward-card h2 { margin: -6px 0 0; font-size: 21px; letter-spacing: -.04em; }.reward-card > p:not(.eyebrow) { margin: -5px 0 4px; color: var(--muted); font-size: 12px; }.reward-card label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }.reward-card input, .reward-card select { width: 100%; padding: 11px; border: 1px solid #dce7e1; border-radius: 11px; color: var(--ink); background: #fbfdfc; font: inherit; font-size: 13px; outline-color: var(--deep-green); }.reward-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.reward-photo-field > span { color: #98a59f; font-size: 9px; font-weight: 600; }.reward-photo-field input[type="file"] { padding: 9px; font-size: 10px; }.reward-photo-field input::file-selector-button { margin-right: 9px; padding: 7px 9px; border: 0; border-radius: 8px; color: #fff; background: var(--deep-green); font-weight: 800; }.reward-photo-preview { display: grid; place-items: center; height: 112px; overflow: hidden; border: 1px dashed #cbded5; border-radius: 15px; color: #83a99a; background: #f4fbf8; }.reward-photo-preview > .material-symbols-rounded { font-size: 30px; }.reward-photo-preview img { width: 100%; height: 100%; object-fit: cover; }.reward-photo-preview img[hidden], .reward-photo-preview span[hidden] { display: none; }
.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 50%; display: flex; width: min(100%, 480px); height: 78px; padding: 8px 13px 12px; transform: translateX(-50%); border-top: 1px solid #edf0eb; background: rgb(255 255 255 / 96%); box-shadow: 0 -10px 28px rgb(48 73 64 / 7%); backdrop-filter: blur(12px); }
.bottom-nav button { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; border: 0; color: #9aa7a3; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.bottom-nav button span { display: grid; place-items: center; opacity: .68; }
.bottom-nav button span i { font-size: 22px; }
.bottom-nav .active { color: var(--deep-green); }
.bottom-nav .active span { opacity: 1; }
.bottom-nav .shop-button span { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -25px; border: 4px solid #fff; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #ffb64f, #ff7f58); box-shadow: 0 8px 20px rgb(255 126 79 / 30%); opacity: 1; }
.bottom-nav .shop-button span i { font-size: 21px; }
.parent-bottom-nav { position: fixed; z-index: 11; bottom: 0; left: 50%; display: none; width: min(100%, 480px); height: 78px; padding: 8px 10px 12px; transform: translateX(-50%); border-top: 1px solid #dfe7e3; background: rgb(255 255 255 / 97%); box-shadow: 0 -10px 28px rgb(48 73 64 / 7%); backdrop-filter: blur(12px); }.parent-bottom-nav button { position: relative; display: flex; flex: 1; flex-direction: column; gap: 4px; align-items: center; justify-content: center; border: 0; border-radius: 14px; color: #8d9b96; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }.parent-bottom-nav button > .material-symbols-rounded { font-size: 21px; }.parent-bottom-nav button.active { color: var(--deep-green); background: #ebf8f2; }.parent-bottom-nav i { position: absolute; top: 6px; left: calc(50% + 7px); min-width: 16px; padding: 2px 4px; border: 2px solid #fff; border-radius: 9px; color: #fff; background: #ef7258; font-size: 8px; font-style: normal; line-height: 1; }.parent-bottom-nav i[hidden] { display: none; }
@media (min-width: 700px) { body { padding: 24px 0; } .app-shell { min-height: calc(100dvh - 48px); border-radius: 34px; } .bottom-nav, .parent-bottom-nav { bottom: 24px; border-radius: 0 0 34px 34px; } }