:root {
  --ink: #2e413d;
  --muted: #697a75;
  --blue: #4b7466;
  --pale: #e9f0ed;
  --line: #e2e9e6;
  --orange: #a36f50;
  --bg: #f3f6f5;
  --font: "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --caption: 12px;
  --body: 14px;
  --heading: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #e8eeeb; font: 14px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 140ms var(--ease), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, [role=button]:focus-visible { outline: 3px solid #94b7a9; outline-offset: 3px; }
.shell { max-width: 1100px; margin: auto; min-height: 100vh; display: grid; grid-template-columns: 1fr 440px; gap: 88px; align-items: center; padding: 32px 48px; }
.brand { display: flex; gap: 10px; align-items: center; font-size: 20px; font-weight: 600; letter-spacing: 2px; color: var(--blue); }
.brand svg { width: 28px; height: 34px; }
.eyebrow { font-size: 12px; letter-spacing: 2px; color: var(--blue); margin-top: 64px; }
.intro h1 { font-size: 38px; font-weight: 500; line-height: 1.6; letter-spacing: 1px; margin: 16px 0; }
.intro h1 em { font-style: normal; color: var(--blue); }
.intro p { color: var(--muted); line-height: 2; }
.intro .divider { width: 32px; height: 1px; background: #9eb5ab; margin: 32px 0; }
.preview-label { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.mode-switch { display: flex; gap: 4px; background: #dce6e0; border: 1px solid #d2dfd7; border-radius: 14px; padding: 4px; width: max-content; margin-top: 20px; }
.mode-switch button { border: 0; border-radius: 10px; background: transparent; padding: 10px 20px; font-size: 12px; min-height: 44px; }
.mode-switch button.active { background: #fff; color: var(--blue); box-shadow: 0 2px 6px #2e413d09; }
.device { background: var(--bg); border: 7px solid white; border-radius: 42px; box-shadow: 0 24px 70px #324e4215, 0 0 0 1px #dce5df; position: relative; overflow: hidden; height: 850px; max-height: calc(100vh - 48px); min-height: 650px; display: flex; flex-direction: column; }
.status { height: 32px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 24px 0; font-size: 12px; font-weight: 600; }
.signal { letter-spacing: 2px; }
.app-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px 12px; flex-shrink: 0; }
.app-brand { font-size: 16px; letter-spacing: 1px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.app-brand svg { width: 20px; height: 25px; color: var(--blue); }
.capsule { border: 1px solid #dce5e0; border-radius: 20px; padding: 1px 10px; background: #ffffff90; font-size: 14px; letter-spacing: 2px; color: #52675e; }
.capsule span { border-left: 1px solid #dce5e0; margin-left: 6px; padding-left: 8px; }
.scroll { overflow-y: auto; scrollbar-width: none; flex: 1; padding: 8px 24px 24px; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { display: none; }
.hello { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 22px; }
.hello h2 { font-size: var(--heading); letter-spacing: .3px; font-weight: 600; margin: 0 0 6px; line-height: 1.5; }
.sub { font-size: var(--caption); color: var(--muted); line-height: 1.8; }
.avatar { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: #e2ece6; color: var(--blue); border: 1px solid #d7e4dc; font-size: 14px; flex-shrink: 0; }
button.avatar { box-shadow: 0 3px 7px #2e413d05; }
.balance-scene { position:relative;isolation:isolate;border-radius:24px;background:#e8efeb; }
.balance-scene:before,.balance-scene:after { content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none; }
.balance-scene:before { width:180px;height:180px;right:-2px;top:9px;background:#a5bfae; }
.balance-scene:after { width:100px;height:100px;left:2px;bottom:7px;background:#c6baab;opacity:.55; }
.balance-card { position:relative;isolation:isolate;border:1px solid #ffffffd9;border-radius:24px;background:#ffffff80;height:238px;padding:23px;overflow:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 22px #31513d0d,inset 0 1px 0 #ffffff7a; }
.tree-button { position:absolute;z-index:3;width:70px;height:82px;right:16px;bottom:44px;padding:6px 8px;border:1px solid transparent;border-radius:22px;background:transparent;display:grid;place-items:center; }
.tree-button .tree-mark { width:52px;height:65px;transform-origin:50% 88%;filter:drop-shadow(0 3px 2px #3554410a); }
.tree-button:hover,.tree-button:focus-visible { background:#ffffff42;border-color:#ffffff8c; }
.tree-button:active { transform:scale(.96); }

.tree-mark { display:block;flex-shrink:0; }
.balance.balance-compact { font-size:32px;letter-spacing:-.8px; }
.balance-label { font-size: var(--caption); color: #536d60; font-weight: 500; letter-spacing: .5px; }
.balance { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 48px; line-height: 1.2; margin-top: 12px; letter-spacing: -1.5px; position: relative; z-index: 2; }
.balance small { font-size: 14px; font-weight: 400; letter-spacing: 0; margin-left: 8px; color: #5f7568; }
.balance-card .tiny-tag { max-width:calc(100% - 70px); }
.tiny-tag { display: inline-flex; align-items: center; gap: 5px; color: #567363; font-size: 12px; margin-top: 13px; position: relative; z-index: 2; line-height: 1.6; }
.tree { width: 152px; height: 190px; position: absolute; right: 6px; bottom: 32px; filter: drop-shadow(0 7px 7px #3457450c); }
.card-footer { position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px solid #cddfd25e; padding: 11px 23px; font-size: 12px; color: #5b7364; background: #ffffff3d; }
.stats { display: flex; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 17px 0; margin: 12px 0 24px; }
.stat { flex: 1; padding-left: 23px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-label { font-size: var(--caption); color: var(--muted); margin-bottom: 5px; }
.stat-value { font-size: 24px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.stat-value small { font-size: 12px; font-weight: 400; margin-left: 5px; color: var(--muted); }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; min-height: 32px; }
.section-title h3, .panel h3 { font-size: var(--body); font-weight: 600; margin: 0; letter-spacing: .3px; }
.text-btn { position: relative; border: 0; background: transparent; color: var(--blue); font-size: 12px; padding: 8px 0 8px 8px; min-height: 40px; border-radius: 8px; }
.transactions { background: #fff; border-radius: 18px; padding: 0; border: 1px solid var(--line); overflow: hidden; }
.record { display: flex; align-items: center; gap: 12px; padding: 17px 0; position: relative; }
.record + .record { border-top: 1px solid #edf1ee; }
.record[role=button] { cursor: pointer; transition: background-color 160ms ease; -webkit-tap-highlight-color: transparent; }
.record[role=button]:active { background: #edf3ef; }
.transactions > .record { padding:17px 16px; }
.transactions > .record + .record { border-top-color:transparent; }
.transactions > .record + .record:before { content:"";position:absolute;top:-1px;left:16px;right:16px;height:1px;background:#edf1ee;pointer-events:none; }
.transactions > .record:first-child { border-top-left-radius:17px;border-top-right-radius:17px; }
.transactions > .record:last-child { border-bottom-left-radius:17px;border-bottom-right-radius:17px; }
.transactions > .record[role=button]:focus-visible { outline-offset:-3px; }
.record-icon { width: 38px; height: 38px; border: 1px solid #e3ece6; border-radius: 12px; background: #eff5f1; color: #628172; display: grid; place-items: center; flex-shrink: 0; }
.record-icon.minus { background: #f7f1eb; color: #9b7457; border-color: #eee5da; }
.record-icon svg { width: 19px; height: 19px; }
.record-main { flex: 1; min-width: 0; }
.record-title { font-size: 14px; margin-bottom: 4px; overflow-wrap: anywhere; line-height: 1.6; }
.record-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.amount { font-size: 20px; font-weight: 500; color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.amount.minus { color: var(--orange); }
.row-arrow { font-size: 15px; color: #8a9f93; margin-left: -5px; }
.quiet-note { text-align: center; color: #788b80; font-size: 12px; margin: 21px 0 0; }
.nav { flex-shrink: 0; background: #ffffffed; border-top: 1px solid var(--line); display: flex; padding: 8px 14px 16px; justify-content: space-around; }
.nav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 90px; border: 0; border-radius: 14px; padding: 9px 16px 6px; background: transparent; font-size: 12px; color: #75877c; line-height: 1.4; }
.nav button svg { width: 21px; height: 21px; transition: transform 180ms var(--ease); }
.nav button.active { color: #3f6d57; background: #eaf1eb; font-weight: 500; }
.nav button.active svg { animation: nav-in 220ms var(--ease); }
.page-title { font-size: 18px; letter-spacing: .3px; font-weight: 600; margin: 8px 0 7px; line-height: 1.6; }
.filters { display: flex; gap: 5px; margin: 20px 0 16px; padding: 4px; border-radius: 14px; background: #e7ede9; border: 1px solid #dfe7e1; }
.chip { flex: 1; border: 0; border-radius: 10px; padding: 9px 14px; background: transparent; color: #647d6c; font-size: 12px; min-height: 40px; }
.chip.active { background: white; color: #3f6d57; box-shadow: 0 2px 5px #2e413d08; font-weight: 600; }
.panel { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin: 16px 0; }
.panel h3 { margin-bottom: 12px; }
.panel p { font-size: 14px; line-height: 1.9; color: var(--muted); margin: 8px 0; }
.profile-top { text-align: center; padding: 22px 0 12px; }
.profile-top .avatar { margin: auto; width: 60px; height: 60px; border-radius: 21px; font-size: 22px; }
.profile-top h2 { font-size: 18px; font-weight: 600; margin: 16px 0 4px; }
.profile-top .tiny-tag { border: 1px solid #d9e6dd; border-radius: 20px; padding: 4px 12px; margin-top: 8px; background: #eaf2ec; }
.primary, .secondary { width: 100%; border-radius: 13px; min-height: 46px; padding: 12px 16px; font-size: 14px; font-weight: 500; }
.primary { border: 1px solid #476e5b; background: var(--blue); color: white; box-shadow: 0 4px 9px #3b604d0e; }
.secondary { border: 1px solid var(--line); background: white; margin-top: 10px; color: #586f60; }
.field { display: block; font-size: 12px; font-weight: 500; color: #5d7366; margin: 17px 0 7px; }
input, select { border: 1px solid #d9e3dc; background: #fbfcfb; width: 100%; padding: 11px 12px; border-radius: 11px; color: var(--ink); font-size: 14px; min-height: 46px; transition: border-color 150ms ease, box-shadow 150ms ease; }
input:focus, select:focus { border-color: #83a793; box-shadow: 0 0 0 3px #7ca88d14; }
input::placeholder { color: #87998e; }
.reason-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.reason-option { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px 12px; border: 1px solid #d9e3dc; border-radius: 11px; background: #fbfcfb; color: #586f60; font-size: 12px; font-weight: 500; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.reason-option.selected { border-color: #658875; background: #e7f0e9; color: #365e49; }
.reason-check { display:none; width:12px; font-size:12px; }
.reason-option.selected .reason-check { display:inline-block; }
.reason-option:hover { border-color: #83a793; }
.reason-option:focus-visible { outline: 2px solid #476e5b; outline-offset: 3px; }
.reason-help { margin: 7px 0 0; color: #718579; font-size: 12px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-summary { display:flex;gap:12px;margin:20px 0 16px;padding:3px;border-radius:20px;background:radial-gradient(ellipse at 80% 30%,#aec6b6,transparent 70%),#e6ede8; }
.admin-summary > div { flex: 1; background:#ffffff8c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #ffffffbd; border-radius: 16px; padding: 18px; }
.admin-summary strong { display: block; font-size: 28px; line-height: 1.3; font-weight: 500; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.admin-summary span { font-size: 12px; color: #5d7666; }
.teacher { padding: 13px 0; display: flex; align-items: center; gap: 10px; }
.teacher + .teacher { border-top: 1px solid var(--line); }
.teacher .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 14px; }
.teacher-info { flex: 1; font-size: 14px; }
.teacher-info small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.small-btn { border: 1px solid #dbe6de; background: #eef4ef; padding: 9px 12px; border-radius: 10px; font-size: 12px; min-height: 40px; color: var(--blue); }
.small-btn.danger { color: #9c7357; background: #f9f3ed; border-color: #eee2d8; }
.toast { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: #2e493bee; color: white; padding: 12px 18px; border-radius: 13px; font-size: 12px; z-index: 10; max-width: 90%; width: max-content; box-shadow: 0 5px 20px #293b5314; animation: toast-in 200ms var(--ease); }
.modal { position: absolute; inset: 0; background: #203c2e55; z-index: 8; display: flex; align-items: flex-end; backdrop-filter: blur(4px); animation: shade-in 240ms var(--ease); }
.sheet { position: relative; border-radius: 25px 25px 0 0; background: var(--bg); width: 100%; padding: 28px 24px 30px; max-height: 92%; overflow-y: auto; animation: sheet-in 360ms cubic-bezier(.2,.8,.3,1.12); }
.sheet:before { content: ""; position: absolute; top: 9px; left: calc(50% - 17px); width: 34px; height: 4px; border-radius: 2px; background: #cdd9d0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet h2 { font-size: 18px; font-weight: 600; margin: 0; }
.close { background: #e4ece6; border: 1px solid #d8e4db; border-radius: 50%; width: 36px; height: 36px; font-size: 20px; }
.sheet .primary { margin-top: 20px; }
.modal.closing { pointer-events: none; animation: shade-out 180ms ease-out forwards; }
.modal.closing .sheet { animation: sheet-out 180ms ease-out forwards; }
.empty { text-align: center; padding: 32px 8px; color: var(--muted); font-size: 12px; line-height: 2; }
.demo-hint { color: var(--muted); font-size: 12px; text-align: center; margin: 16px 0; line-height: 1.8; }
.mobile-switch { display: none; }
.audit { font-size: 12px; line-height: 1.8; color: var(--muted); margin-top: 10px; }
.step-badge { background: #e4eee6; border: 1px solid #d6e4d9; border-radius: 18px; width: 54px; height: 54px; display: grid; place-items: center; font-size: 24px; margin: 20px auto; color: var(--blue); }
.detail-amount { text-align: center; font-size: 36px; font-weight: 500; margin: 22px 0 6px; font-variant-numeric: tabular-nums; color: var(--blue); }
.detail-amount.minus { color: var(--orange); }
.detail-heading { text-align: center; font-size: 14px; margin: 0 0 24px; overflow-wrap: anywhere; }
.detail-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font-size: 14px; padding: 13px 0; }
.detail-line + .detail-line { border-top: 1px solid var(--line); }
.detail-line span:first-child { color: var(--muted); flex-shrink: 0; font-size: 12px; }
.entry-animation { animation: appear 220ms var(--ease); }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nav-in { from { transform: translateY(2px) scale(.92); } to { transform: none; } }
@keyframes shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shade-out { to { opacity: 0; } }
@keyframes sheet-out { to { transform: translateY(18px); opacity: .5; } }
@keyframes sheet-in { from { transform:translateY(100%);opacity:.8; } to { transform:translateY(0);opacity:1; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.success-modal { align-items:center;padding:24px; }
.success-modal .sheet { border-radius:24px;max-height:90%;animation:success-reveal 420ms cubic-bezier(.22,.7,.3,1) both;background:#fbfdfbf5; }
.success-modal .sheet:before { display:none; }
.success-feedback { text-align:center;padding:12px 0 4px; }
.success-tree { width:80px;height:80px;margin:7px auto 23px;border:1px solid #b8cebf;border-radius:50%;background:#eaf2ec;display:grid;place-items:center;box-shadow:0 0 0 8px #eaf2ec66; }
.success-tree .tree-mark { width:42px;height:54px; }
.success-feedback h3 { font-size:18px;font-weight:500;margin:0 0 12px; }
.success-amount { font-size:32px;color:var(--blue);margin:8px 0;font-variant-numeric:tabular-nums; }
.success-amount small { font-size:12px; }
@keyframes success-reveal { from{clip-path:circle(0 at 50% 65%);transform:scale(.96)} to{clip-path:circle(150% at 50% 65%);transform:scale(1)} }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .balance-card{background:#e8f0ea}.admin-summary>div{background:#edf3ee} }
@media (hover:hover) and (pointer:fine) {
  .primary:hover { background: #3d6353; box-shadow: 0 5px 12px #3b604d20; }
  .secondary:hover, .small-btn:hover, .text-btn:hover { background: #e9f1eb; }
  .record[role=button]:hover { background: #f5f8f6; }
  .nav button:not(.active):hover, .chip:not(.active):hover { background: #eaf0eb; }
  button.avatar:hover { background: #d6e6da; }
}
@media (max-width:850px) { .shell { gap: 40px; padding: 24px; grid-template-columns: 1fr 410px; } .intro h1 { font-size: 30px; } .intro p { font-size: 12px; } .eyebrow { margin-top: 40px; } }
@media (max-width:680px) {
  body { background: var(--bg); }
  .shell { display: block; padding: 0; }
  .intro { display: none; }
  .device { border: 0; border-radius: 0; box-shadow: none; max-height: none; height: 100dvh; min-height: 0; max-width: 480px; margin: auto; }
  .status { display: none; }
  .app-head { padding-top: 18px; }
  .mobile-switch { display: block; position: fixed; right: 12px; top: 12px; z-index: 6; font-size: 12px; border: 1px solid #d9e4dc; background: #fff; color: #597262; padding: 8px 12px; border-radius: 22px; min-height: 40px; }
  .capsule { margin-right: 84px; }
  .scroll { padding-bottom: 18px; }
  .nav { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width:370px) { .scroll { padding-left: 18px; padding-right: 18px; } .tree { width: 132px; right: 0; } .balance-card { padding-left: 20px; } .tiny-tag { font-size: 12px; max-width: 160px; } .teacher { gap: 7px; } .small-btn { padding: 8px; } }
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto; } }

/* Claims keep the forms and audit text on solid surfaces. */
textarea { font:inherit;border:1px solid #d9e3dc;background:#fbfcfb;width:100%;padding:11px 12px;border-radius:11px;color:var(--ink);font-size:14px;min-height:86px;resize:vertical; }
textarea:focus-visible { outline:3px solid #94b7a9;outline-offset:3px; }
textarea::placeholder { color:#87998e; }
.nav button { min-width:0;flex:1;padding-left:5px;padding-right:5px; }
.claim-home { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-8px 0 20px;text-align:left; }
.claim-home span { font-size:11px;color:var(--muted);font-weight:400; }
.claim-new { margin:20px 0 4px; }
.claim-list { display:grid;gap:12px;margin-top:16px; }
.claim-summary { margin-top:0; }
.claim-card { border:1px solid var(--line);border-radius:18px;background:#fff;padding:17px; }
.claim-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.claim-card-head strong { font-size:14px;font-weight:500;overflow-wrap:anywhere; }
.claim-status { flex-shrink:0;border-radius:20px;padding:3px 9px;font-size:11px;white-space:nowrap; }
.claim-status.pending { background:#f5eee3;color:#846435; }
.claim-status.approved { background:#e9f2ec;color:#43694f; }
.claim-status.rejected { background:#f7ebe7;color:#975b4d; }
.claim-meta { color:var(--muted);font-size:12px;margin-top:6px; }
.claim-note { white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.8;margin:12px 0;color:var(--ink); }
.claim-feedback { font-size:12px;color:#6a746e;border-top:1px solid var(--line);padding-top:12px;margin:12px 0 0;overflow-wrap:anywhere;white-space:pre-wrap; }
.claim-result { font-size:12px;color:var(--blue);margin:10px 0; }
.claim-review { display:block;margin-top:12px;margin-left:auto; }
.claim-count { font-size:11px;font-weight:400;color:var(--muted);margin-left:6px; }
.claim-intro { margin-top:18px; }
.claim-review-detail { background:#fff;padding:14px 16px;border:1px solid var(--line);border-radius:14px;margin-top:14px; }
.claim-review-detail .claim-note { margin-bottom:0; }
@media(max-width:370px) { .claim-home{align-items:flex-start;flex-direction:column}.reason-options{gap:6px}.reason-option{padding:8px 10px} }

/* Interactive glass: local pointer light, a slight tilt, and native touch scrolling. */
.balance-scene { perspective:1100px;background:linear-gradient(135deg,#e7eeea,#e1eae4); }
.balance-scene:before { right:10px;top:15px;width:154px;height:190px;border-radius:65% 35% 55% 45%;background:linear-gradient(140deg,#acc8b7,#789d87);opacity:.6;transform:translate(var(--glass-dx,0px),var(--glass-dy,0px));transition:transform 240ms var(--ease); }
.balance-scene:after { width:96px;height:90px;background:#c3b3a0;opacity:.24;transform:translate(calc(var(--glass-dx,0px) * -.5),calc(var(--glass-dy,0px) * -.5));transition:transform 240ms var(--ease); }
.balance-card { --glass-x:22%;--glass-y:18%;background:linear-gradient(130deg,#ffffffa6,#ffffff50 48%,#e7f0e875);backdrop-filter:blur(17px) saturate(1.15);-webkit-backdrop-filter:blur(17px) saturate(1.15);border:1px solid #ffffffd9;box-shadow:0 9px 25px #294b3612,inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #ffffff5c;transform:rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg));transition:transform 190ms cubic-bezier(.2,.8,.3,1),box-shadow 220ms ease; }
.balance-card:after { content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;background:radial-gradient(ellipse 190px 140px at var(--glass-x) var(--glass-y),#ffffffa6,transparent 75%),linear-gradient(115deg,transparent 32%,#ffffff45 46%,transparent 58%);opacity:.38;transition:opacity 200ms ease; }
.balance-card>[class]:not(.tree-button):not(.card-footer) { position:relative;z-index:1; }
.balance-card>.card-footer { z-index:1; }
.balance-card[data-glass-active=true] { box-shadow:0 13px 28px #294b361c,inset 0 1px 0 #fffffff2,inset 0 -1px 0 #ffffff80; }
.balance-card[data-glass-active=true]:after { opacity:.85; }
.balance-card[data-glass-pressed=true] { transform:rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg)) scale(.992);box-shadow:0 5px 14px #294b3614,inset 0 1px 0 #ffffffd9; }
@media(hover:hover) and (pointer:fine) { .balance-card[data-glass-active=true] { will-change:transform; } }
@media(prefers-reduced-motion:reduce) { .balance-card,.balance-card[data-glass-pressed=true] { transform:none!important; }.balance-scene:before,.balance-scene:after{transform:none!important} }

/* Shared Lucide Trees mark chosen by the owner. */
.tree-mark { color:#537b62; }
.tree-button .tree-mark { width:48px;height:60px;filter:none; }