@import url('vazir.css');
:root{--fs:1;--green:#087f6b;--green2:#064f43;--green3:#063b33;--mint:#e8f6f1;--mint2:#d2ede5;--lt:#6bb3a4;--gold:#8fd0bd;--gold2:#54a48f;--cream:#fbfaf5;--text:#18332e;--muted:#71807b;--line:#e4ebe7;--white:#fff;--danger:#c95e54;--shadow:0 12px 36px rgba(8,127,107,.09);--kid1:#087f6b;--kid2:#5ba292;--kid3:#8fd0bd;--kid4:#c2e5db}
*{box-sizing:border-box}body{margin:0;background:#eef2ef;color:var(--text);font-family:Vazirmatn,Tahoma,sans-serif}
button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}textarea{resize:vertical}
.app{max-width:480px;min-height:100vh;margin:auto;background:var(--cream);position:relative;box-shadow:0 0 60px #173c3420}
.topbar{position:sticky;top:0;z-index:10;background:rgba(251,250,245,.94);backdrop-filter:blur(14px);padding:12px 16px 10px;border-bottom:1px solid #e9eeeb;display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:9px;min-width:0}.logo{width:42px;height:42px;border-radius:12px;object-fit:cover;flex:none}.brand b{display:block;font-size:calc(13.5px * var(--fs,1));line-height:1.6}.brand span{font-size:calc(10px * var(--fs,1));color:var(--muted);display:block}
.iconbtn{width:38px;height:38px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--green);flex:none}.iconbtn i{font-size:calc(16px * var(--fs,1))}
.userchip{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:5px 11px;font-size:calc(10.5px * var(--fs,1));color:var(--green2);white-space:nowrap;flex:none}.userchip i{font-size:calc(15px * var(--fs,1));color:var(--green)}
.userchip b,.userchip small{display:block}.userchip small{color:var(--muted)}
main{padding:18px 16px 104px}.screen{display:none;animation:fade .25s ease}.screen.active{display:block}@keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero{background:linear-gradient(145deg,var(--green),var(--lt));color:white;border-radius:25px;padding:22px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;inset:auto -30px -50px auto;width:170px;height:170px;border:1px solid #ffffff40;border-radius:50%}
.hero h1{margin:0 0 7px;font-size:calc(23px * var(--fs,1))}.hero p{margin:0 0 18px;color:rgba(255,255,255,.92);font-size:calc(13px * var(--fs,1));line-height:2}
.btn{padding:12px 17px;border-radius:13px;font-weight:700;display:inline-block;text-align:center}.btn.primary{background:#fff;color:var(--green)}.btn.green{background:var(--green);color:#fff}.btn.full{width:100%}.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;border: 1px solid #FFF;}.btn.ghost{background:var(--mint);color:var(--green)}.btn:disabled{opacity:.55;cursor:not-allowed}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:24px 2px 12px}.section-head h2{font-size:calc(16px * var(--fs,1));margin:0}.section-head a{font-size:calc(11px * var(--fs,1));color:var(--green);cursor:pointer}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.stat{background:linear-gradient(145deg,var(--green2),var(--green3));border:1px solid #ffffff38;border-radius:16px;padding:13px 8px;text-align:center;color:#fff}.stat strong{display:block;font-size:calc(16px * var(--fs,1))}.stat span{font-size:calc(10px * var(--fs,1));color:rgba(255,255,255,.85)}
.cards{display:grid;gap:10px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 5px 18px #123b3010}
.child{display:flex;gap:12px;align-items:center}.avatar{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--mint),var(--mint2));display:grid;place-items:center;font-size:calc(26px * var(--fs,1));flex:none}.child h3{margin:0 0 4px;font-size:calc(14px * var(--fs,1))}.child p{margin:0;color:var(--muted);font-size:calc(11px * var(--fs,1));line-height:1.8}.grow{flex:1}.tag{font-size:calc(9px * var(--fs,1));padding:5px 8px;border-radius:9px;background:var(--mint);color:var(--green);white-space:nowrap}.tag.red{background:#fdecea;color:var(--danger)}
.search{display:flex;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 13px;align-items:center;margin-bottom:11px}.search i{color:var(--muted)}.search input{width:100%;border:0;outline:0;padding:12px;background:transparent;font-size:calc(12px * var(--fs,1))}
.filters{display:flex;gap:7px;overflow:auto;padding-bottom:4px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.chip{padding:7px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:calc(10px * var(--fs,1));white-space:nowrap;color:var(--text)}.chip.on{background:var(--green);color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.action{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px 10px;text-align:center;color:var(--text)}.action .emoji{font-size:calc(24px * var(--fs,1))}.action .emoji i{color:var(--green)}.action b{display:block;font-size:calc(12px * var(--fs,1));margin-top:7px}.action small{color:var(--muted);font-size:calc(9px * var(--fs,1));display:block;line-height:1.8}
.action.on{background:var(--mint);border-color:var(--green)}
.titleline{display:flex;align-items:center;gap:10px;margin-bottom:16px}.titleline h1{font-size:calc(19px * var(--fs,1));margin:0}.back{background:none;color:var(--green);font-size:calc(20px * var(--fs,1))}
.detail-head{background:linear-gradient(145deg,var(--mint),#fff);border:1px solid var(--line);border-radius:22px;padding:20px;text-align:center}.detail-head .avatar{margin:auto;width:78px;height:78px;font-size:calc(38px * var(--fs,1))}.detail-head h2{margin:9px 0 2px;font-size:calc(18px * var(--fs,1))}.detail-head p{margin:0;color:var(--muted);font-size:calc(11px * var(--fs,1))}
.progress{height:9px;background:#e7eeeb;border-radius:20px;overflow:hidden}.progress i{display:block;height:100%;width:72%;background:var(--green);border-radius:20px}
.payment{display:grid;gap:9px}.pay-option{padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;gap:10px;align-items:center}.pay-option.selected{border:2px solid var(--green);padding:12px}.pay-option input{accent-color:var(--green)}
.field{margin-bottom:10px}.field label{display:block;font-size:calc(10px * var(--fs,1));color:var(--muted);margin-bottom:5px}.field input,.field textarea,.field select{width:100%;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff;outline:none}
.notice{padding:12px;border-radius:14px;background:var(--mint);color:var(--green2);font-size:calc(10px * var(--fs,1));line-height:1.9}.notice.blue{background:var(--mint);color:var(--green2)}
.success{text-align:center;padding:38px 15px}.success .check{width:76px;height:76px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:calc(35px * var(--fs,1));margin:auto}
.listrow{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:calc(11px * var(--fs,1))}.listrow:last-child{border:0}.listrow small{color:var(--muted)}
.bottom{position:fixed;bottom:0;z-index:20;width:min(480px,100%);height:72px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:7px 5px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px #163a3210}
.nav{background:none;color:#8b9995;font-size:calc(9px * var(--fs,1));display:grid;place-items:center;gap:2px}.nav b{font-size:calc(19px * var(--fs,1));font-weight:500;display:block}.nav b i{font-size:calc(18px * var(--fs,1))}.nav.active{color:var(--green);font-weight:700}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);background:var(--green3);color:#fff;padding:11px 16px;border-radius:12px;font-size:calc(11px * var(--fs,1));opacity:0;pointer-events:none;transition:.25s;z-index:30;max-width:90vw}.toast.show{opacity:1;transform:translateX(-50%)}
.sponsor-cta{background:linear-gradient(135deg,var(--mint),var(--mint2));border:1.5px solid var(--gold);border-radius:22px;padding:18px;position:relative;overflow:hidden}
.sponsor-cta .ring{font-size:calc(44px * var(--fs,1));color:var(--green)}.sponsor-cta h3{margin:10px 0 6px;font-size:calc(16px * var(--fs,1));color:var(--green2)}.sponsor-cta p{margin:0 0 14px;font-size:calc(11px * var(--fs,1));color:var(--gold2);line-height:2}
.heartline{position:relative;direction:ltr;height:46px;margin:10px 6px 4px}.hl-track{position:absolute;left:12px;right:12px;top:22px;height:4px;border-radius:10px;background:linear-gradient(90deg,var(--mint2),var(--gold));box-shadow:inset 0 1px 2px #0002}
.hl-heart{position:absolute;top:8px;width:34px;height:34px;font-size:calc(26px * var(--fs,1));text-align:center;line-height:38px;transition:left .12s ease;filter:drop-shadow(0 4px 6px color-mix(in srgb,var(--green2) 45%,transparent));left:4%}.hl-heart i{color:var(--green);font-size:calc(30px * var(--fs,1))}
.heartline input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;z-index:2}
.hl-label{text-align:center;font-size:calc(12px * var(--fs,1));color:var(--green2);font-weight:700}.hl-kids{display:flex;justify-content:center;gap:10px;margin:12px 0 4px;min-height:54px}
.kid-draw{animation:float 3s ease-in-out infinite}.kid-draw:nth-child(2){animation-delay:.4s}.kid-draw:nth-child(3){animation-delay:.8s}.kid-draw:nth-child(4){animation-delay:1.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.kid-draw{font-size:calc(40px * var(--fs,1))}.kid-draw i{display:block;font-size:calc(34px * var(--fs,1));color:var(--green)}.kid-draw small{display:block;font-size:calc(9px * var(--fs,1));color:var(--muted);text-align:center}
.seasonal-strip{display:flex;gap:9px;overflow:auto;padding:3px 1px 6px;scrollbar-width:none}.seasonal-strip::-webkit-scrollbar{display:none}
.season{flex:none;min-width:96px;background:linear-gradient(150deg,var(--mint),var(--mint2));border:1px solid var(--gold);border-radius:16px;padding:12px 8px;text-align:center;cursor:pointer}.season .emoji{font-size:calc(26px * var(--fs,1));display:block}.season .emoji i{color:var(--green)}.season b{font-size:calc(10.5px * var(--fs,1));display:block;margin-top:6px;color:var(--green2)}.season small{font-size:calc(8.5px * var(--fs,1));color:var(--gold2)}
.amount-chips{display:flex;gap:7px;overflow:auto;padding-bottom:4px}.amount-chip{padding:8px 14px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:calc(10.5px * var(--fs,1));white-space:nowrap;color:var(--text)}.amount-chip.on{background:var(--green);color:#fff}
.otp-box{display:flex;gap:8px;direction:ltr;justify-content:center;margin:16px 0}.otp-box input{width:48px;height:54px;text-align:center;font-size:calc(22px * var(--fs,1));border:1.5px solid var(--line);border-radius:14px;outline:none}.otp-box input:focus{border-color:var(--green)}
.news-card{display:flex;gap:12px;align-items:flex-start}.news-thumb{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--mint),var(--mint2));display:grid;place-items:center;font-size:calc(24px * var(--fs,1));flex:none;object-fit:cover}
[hidden]{display:none !important}.hidden{display:none!important}
.fsbox{position:relative}
.fsmenu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:flex;align-items:center;gap:6px;z-index:20}
.fsmenu button{background:var(--mint);color:var(--green2);border:0;border-radius:10px;padding:8px 13px;font-weight:800;cursor:pointer}.fsmenu button:active{filter:brightness(.95)}
.fsmenu b{font-size:calc(12px*var(--fs));color:var(--green2);min-width:54px;text-align:center}
.fsmenu .fsres{font-size:calc(10px*var(--fs));color:var(--muted);cursor:pointer;padding:6px}
.installbar{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border-radius:16px;margin:0 14px 10px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:calc(12px*var(--fs));z-index:15}
.installbar i{font-size:16px}
.installbar .ib-btn{background:#fff;color:var(--green2);border:0;border-radius:11px;padding:8px 13px;font-weight:800;cursor:pointer;font-size:calc(11px*var(--fs));white-space:nowrap}
.installbar .ib-close{margin-inline-start:auto;border:0;background:#ffffff2b;color:#fff;border-radius:9px;padding:5px 9px;cursor:pointer;font-size:11px}
.sheet-hi{position:fixed;inset:0;background:#00000066;z-index:40;display:grid;place-items:end center;padding-top:20px}
.sheet-hi .sh{background:#fff;border-radius:22px 22px 0 0;padding:22px;width:100%;max-width:480px}
.sheet-hi .sh h3{margin:0 0 10px;color:var(--green2);font-size:calc(15px*var(--fs))}
.sheet-hi .sh p{font-size:calc(11px*var(--fs));color:var(--muted);line-height:2.2;margin:0 0 16px}
table.statement{border-collapse:collapse;width:100%;font-size:calc(12px*var(--fs))}
table.statement th,table.statement td{text-align:right;padding:9px 11px;border-bottom:1px solid var(--line)}
table.statement th{color:var(--green2);background:var(--mint)}
table.statement .num{direction:ltr;text-align:left}
table.statement tr.sum td{font-weight:800;border-top:1.5px solid var(--green2);background:var(--mint)}
.divider{height:1px;background:var(--line);margin:16px 0}
.empty{text-align:center;color:var(--muted);font-size:calc(11px * var(--fs,1));padding:30px 10px;line-height:2}
.money-input{display:flex;align-items:center;gap:8px}.money-input input{flex:1}.money-input span{font-size:calc(11px * var(--fs,1));color:var(--muted);white-space:nowrap}
@media(min-width:600px){body{padding:25px 0}.app{border-radius:28px;overflow:hidden}.bottom,.toast{width:min(480px,100%)}}
