.plus-mark { display:inline-block; color:var(--coral-dark); font-size:.65em; vertical-align:super; margin-left:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.savings-page { max-width:1280px; margin:auto; padding:28px 36px 48px; }
.savings-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
.savings-heading h1 { font-size:clamp(1.8rem,3vw,2.8rem); }
.savings-heading p { margin-bottom:5px; }
.savings-world { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:stretch; }
.bank-room { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:490px; border:8px solid #fff7ed; border-radius:100px 100px 35px 35px; background:radial-gradient(ellipse at 50% 26%,#fffdf3 0 27%,transparent 60%), repeating-linear-gradient(90deg,#f3dfe9 0 36px,#f9e9ee 36px 72px); box-shadow:inset 0 0 0 3px #dec5d3,0 8px 0 #d6becf,0 16px 28px #745d6a17; }
.bank-room::after { content:""; position:absolute; inset:auto 0 0; height:104px; background:linear-gradient(#e3c7b6 0 6px,#f4ded2 6px 19px,#cfad9c 19px 22px,#edcbbb 22px); border-top:5px solid #fff7ed; z-index:0; }
.bank-plaque { position:relative; z-index:1; margin:16px 0 0; padding:8px 24px; border:2px solid #d6b89a; border-radius:8px; background:#fff8e7; box-shadow:0 4px 0 #dec7b9; color:#765765; font-family:var(--display); font-weight:800; font-size:.8rem; letter-spacing:.05em; }
.bank-art { position:relative; z-index:1; display:block; width:min(100%,400px); height:auto; overflow:visible; }
.bank-caption { position:relative; z-index:1; color:#654e60; font-weight:800; margin:-8px 0 18px; }
.bank-room .bank-sparkles { animation:bank-twinkle 3s ease-in-out infinite; transform-origin:center; }
.bank-bubbles { animation:bank-bubble 2.5s ease-in-out infinite; }
.bank-room .rocket-flame { opacity:.4; transform-origin:190px 278px; }
.bank-art.receiving .bank-body { animation:bank-jiggle .7s ease-in-out 1; transform-origin:50% 85%; }
.bank-art.receiving .deposit-coin { animation:coin-deposit 1.1s ease-in forwards; }
.bank-art.goal-complete .bank-body { animation:bank-win 1.2s ease-in-out 1; transform-origin:50% 85%; }
.bank-rocket.goal-complete .bank-body { animation:rocket-launch 1.8s ease-in-out 1; }
.bank-rocket.goal-complete .rocket-flame { opacity:1; }
.bank-dinosaur.goal-complete .bank-body { animation:dino-dance 1.5s ease-in-out 1; }
.bank-chest.goal-complete .bank-sparkles { animation:bank-twinkle .45s ease-in-out 5; }
.bank-cauldron.goal-complete .bank-bubbles { animation:bank-bubble .5s ease-in-out 5; }
.completion-stars text { animation:bank-twinkle .7s ease-in-out 3; transform-origin:center; }
.goal-detail { display:flex; flex-direction:column; justify-content:center; gap:18px; min-width:0; }
.goal-title { display:flex; gap:15px; align-items:center; }
.goal-title .goal-icon { display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; font-size:2.1rem; background:#fff9eb; border:3px solid white; border-radius:22px; box-shadow:0 4px 0 #e7ced8; }
.goal-title h2 { font-size:clamp(1.6rem,3vw,2.4rem); overflow-wrap:anywhere; }
.savings-number { font-family:var(--display); font-size:clamp(2.8rem,5vw,4.3rem); line-height:1.1; font-weight:850; letter-spacing:-.05em; }
.savings-number small { display:block; font-family:var(--body); font-size:.85rem; font-weight:600; letter-spacing:0; margin-top:8px; color:var(--ink-soft); }
.savings-progress { height:18px; overflow:hidden; border:3px solid white; border-radius:20px; background:#e7d8df; box-shadow:0 2px 0 #cdbac3; }
.savings-progress span { display:block; height:100%; background:linear-gradient(90deg,#5bbfa9,#9ee3b1); border-radius:20px; transition:width .8s; }
.savings-labels { display:flex; justify-content:space-between; gap:14px; font-size:.85rem; margin-top:-10px; }
.savings-labels strong { font-size:1.05rem; }
.maths-card { background:#fffcf0; border:2px solid #efdfbc; border-radius:24px; padding:20px 22px; box-shadow:0 5px 0 #e9d9bd; }
.maths-card h3 { margin:0 0 4px; font-size:1.1rem; }
.maths-card p { font-size:.83rem; margin-bottom:12px; }
.maths-form { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.maths-equation { font-size:clamp(1.05rem,2vw,1.4rem); font-weight:850; white-space:nowrap; }
.maths-form input { width:84px; min-height:46px; border:2px solid #cfbf9f; border-radius:12px; padding:8px; text-align:center; background:white; color:var(--ink); font-weight:800; }
.maths-form .button { padding:10px 13px; }
.maths-feedback { min-height:24px; margin:12px 0 0 !important; font-weight:700; }
.maths-reveal { margin-top:8px; font-size:.78rem; text-decoration:underline; }
.bank-wardrobe { margin-top:32px; }
.bank-wardrobe-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.bank-wardrobe-heading p { margin:0; font-size:.8rem; color:var(--ink-soft); }
.bank-choices { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.bank-choice { position:relative; display:flex; flex-direction:column; align-items:center; padding:4px 8px 12px; border:2px solid #ead4df; border-radius:22px; background:#fffaf7; font-family:var(--display); font-weight:800; font-size:.8rem; cursor:pointer; min-width:0; }
.bank-choice .bank-art { width:100%; max-width:130px; margin:-2px 0 -14px; }
.bank-choice.selected { border-color:var(--coral-dark); box-shadow:0 4px 0 var(--pink); }
.bank-choice[disabled] { cursor:default; opacity:.6; }
.bank-choice small { position:absolute; top:9px; right:11px; color:var(--ink-soft); font-size:.65rem; }
.savings-trail { margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.savings-trail .paper-card { padding:24px; }
.money-stages { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.money-stages div { padding:12px 0; }
.money-stages small { display:block; font-size:.7rem; color:var(--ink-soft); }
.money-stages strong { display:block; font-size:1.35rem; margin-top:5px; }
.savings-note { padding:14px 18px; background:#fff9e9; border:1px solid #e7d6b8; border-radius:15px; font-size:.82rem; }
.goal-proposal { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px; border:2px dashed #d7b4c9; border-radius:20px; background:#fff8f7; margin:18px 0; }
.goal-proposal p { margin:3px 0; font-size:.85rem; }
.goal-empty { text-align:center; padding:20px 0; }
.goal-empty .button { margin-top:12px; }
.parent-savings-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:25px; }
.parent-savings-grid .paper-card { padding:24px; }
.finance-controls { display:grid; gap:16px; }
.finance-controls label { display:flex; align-items:flex-start; gap:12px; font-size:.9rem; }
.finance-controls input[type=checkbox] { width:21px; height:21px; accent-color:var(--coral-dark); }
.finance-controls small { display:block; color:var(--ink-soft); }
.finance-form { display:grid; gap:15px; text-align:left; }
.finance-form .field { margin:0; }
.finance-form .button { min-height:46px; }
.finance-form .confirm-checkbox { display:flex; gap:10px; align-items:flex-start; font-size:.83rem; }
.finance-form .confirm-checkbox input { margin-top:4px; flex-shrink:0; width:19px; height:19px; }
.payment-saving-choice { padding:14px; border:1px solid #b5d5bb; border-radius:14px; background:#f1fbef; }
.payment-saving-choice small { display:block; margin-top:5px; line-height:1.4; color:var(--ink-soft); }
.finance-history { margin-top:26px; }
.history-list { list-style:none; padding:0; margin:0; }
.history-list li { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid #e8dfd6; padding:13px 0; font-size:.85rem; }
.history-list li strong,.history-list li small { display:block; }
.history-list li small { font-size:.72rem; color:var(--ink-soft); margin-top:4px; overflow-wrap:anywhere; }
.history-list li > b { flex-shrink:0; }
.history-list .history-actions { flex-shrink:0; text-align:right; }
.history-list .history-actions button { display:block; margin-left:auto; font-size:.72rem; }
.invoice-savings-note { padding:15px 0; font-size:.82rem; color:var(--ink-soft); }
.payment-amount { font-family:var(--display); font-size:2.4rem; font-weight:800; margin:12px 0; }
.payment-steps { padding:0 0 0 22px; text-align:left; font-size:.85rem; }
.payment-steps li { padding:4px 0; }
.form-error:empty { display:none; }
@keyframes bank-twinkle { 0%,100% { opacity:.3; } 50% { opacity:1; } }
@keyframes bank-bubble { 0%,100% { transform:translateY(0); opacity:.6; } 50% { transform:translateY(-17px); opacity:1; } }
@keyframes coin-deposit { 0% { transform:translateY(-40px); opacity:0; } 20% { opacity:1; } 85%,100% { transform:translateY(210px) rotate(3deg); opacity:0; } }
@keyframes bank-jiggle { 25% { transform:rotate(-3deg); } 60% { transform:rotate(3deg); } }
@keyframes bank-win { 30% { transform:translateY(-20px) scale(1.04); } 65% { transform:translateY(2px) scale(.98); } }
@keyframes rocket-launch { 25% { transform:translateY(3px) rotate(2deg); } 65% { transform:translateY(-48px); } }
@keyframes dino-dance { 20%,60% { transform:rotate(-5deg) translateY(-8px); } 40%,80% { transform:rotate(5deg); } }
@media(max-width:900px) { .savings-page { padding:22px 20px 40px; } .savings-world { gap:20px; grid-template-columns:1fr 1fr; } .bank-room { min-height:440px; } .bank-wardrobe-heading { align-items:flex-start; } .parent-savings-grid { grid-template-columns:1fr; } .parent-sidebar nav { grid-template-columns:repeat(3,1fr); } }
@media(max-width:620px) { .savings-heading { align-items:flex-start; } .savings-heading > .button { padding:10px; font-size:.75rem; } .savings-world { grid-template-columns:1fr; } .bank-room { min-height:340px; border-radius:65px 65px 28px 28px; } .bank-room .bank-art { width:270px; margin-top:-5px; } .bank-plaque { font-size:.7rem; } .bank-caption { font-size:.78rem; } .goal-detail { padding:10px 3px; } .bank-choices { grid-template-columns:repeat(3,1fr); gap:9px; } .bank-choice { font-size:.72rem; } .bank-choice .bank-art { max-width:100px; } .savings-trail { grid-template-columns:1fr; } .bank-wardrobe-heading { display:block; } .bank-wardrobe-heading p { margin-top:8px; } .goal-proposal { align-items:flex-start; flex-direction:column; } .history-list li { gap:8px; } .money-stages strong { font-size:1.15rem; } }
@media(prefers-reduced-motion:reduce) { .bank-art *, .bank-room *, .savings-progress span { animation:none !important; transition:none !important; } .deposit-coin { display:none; } }
@media print { .bank-wardrobe,.finance-controls { display:none; } }