:root{font-family:Inter,ui-rounded,system-ui,sans-serif;color:#27233a;background:#f7f5ff;font-size:17px;--purple:#6d5dfc;--green:#27ae7b;--red:#e65d69;--muted:#716d80}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,#e9e4ff,transparent 38%),#f7f5ff}
header{height:72px;padding:0 max(18px,calc((100% - 1050px)/2));display:flex;align-items:center;justify-content:space-between;background:#ffffffcc;backdrop-filter:blur(12px);border-bottom:1px solid #e5e0f5;position:sticky;top:0;z-index:2}
.development header{background:#fff4d6;border-bottom:3px solid #e7a21a}
h1{font-size:1.3rem;margin:0}
main{max-width:1050px;margin:auto;padding:28px 18px 60px}
.hidden{display:none!important}
.loading{text-align:center;padding:80px;color:var(--muted)}
h2{font-size:2rem;margin:.2em 0}
h3{margin:0 0 16px}
.subtitle,.muted{color:var(--muted)}
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:28px}
.profile,.card{background:#fff;border:1px solid #e8e4f2;border-radius:24px;box-shadow:0 10px 32px #3d326e12}
.profile{padding:28px 16px;text-align:center;cursor:pointer;transition:.15s}
.profile:hover{transform:translateY(-4px);box-shadow:0 15px 35px #3d326e25}
.avatar{font-size:3rem;display:block}
.photo-slot{width:92px;height:92px;border-radius:50%;overflow:hidden;background:#eeeaf8;display:grid;place-items:center;font-size:2rem;font-weight:800;color:var(--purple)}
.photo-slot img{width:100%;height:100%;object-fit:cover;object-position:center}
.photo-slot.small{width:52px;height:52px;font-size:1.2rem;flex:0 0 auto}
.child-name{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.parent-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:20px;align-items:start}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:block;color:var(--muted);font-size:.9rem}
.catalog{margin-top:10px;max-height:280px;overflow:auto}
.catalog-item{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eeeaf5}
.catalog-item small{color:var(--muted);text-align:right}
.week-group{margin-bottom:20px}
.week-group h4{background:#f0edf8;padding:9px 12px;border-radius:10px;margin:5px 0}
.profile strong{display:block;margin-top:12px;font-size:1.15rem}
.parent-profile{border-style:dashed}
.login{max-width:420px;margin:50px auto;padding:28px}
.login input,.field input,.field select{width:100%;padding:14px;border:1px solid #dcd7e8;border-radius:14px;font-size:1rem;margin:8px 0 16px}
.btn{border:0;border-radius:14px;padding:13px 18px;font-weight:700;font-size:.95rem;cursor:pointer;background:var(--purple);color:white}
.btn:disabled{opacity:.5}
.btn.green{background:var(--green)}
.btn.red{background:var(--red)}
.btn.full{width:100%}
.ghost{border:0;background:transparent;color:var(--purple);font-weight:700;cursor:pointer}
.hero{padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.balance{font-size:3.2rem;font-weight:900;color:var(--purple);line-height:1}
.dh{font-size:1.1rem;color:var(--muted);margin-top:9px}
.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:20px}
.card{padding:22px}
.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.action{border:1px solid #e3dff0;background:#faf9ff;border-radius:17px;padding:16px;text-align:left;cursor:pointer}
.action .icon{font-size:1.7rem}
.action strong{display:block;margin:8px 0}
.gain .value{color:var(--green)}
.expense .value{color:var(--red)}
.tx{display:grid;grid-template-columns:1fr auto;gap:5px;padding:13px 0;border-bottom:1px solid #eeeaf5}
.tx:last-child{border:0}
.status{font-size:.78rem;border-radius:20px;padding:4px 8px;background:#f0edf8}
.approved{color:var(--green)}
.rejected{color:var(--red)}
.pending{color:#b7791f}
.family{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
.child{padding:18px}
.child .amount{font-size:1.7rem;font-weight:800;color:var(--purple)}
.request{padding:16px;border:1px solid #e7e2f0;border-radius:16px;margin:10px 0}
.request-head{display:flex;justify-content:space-between;gap:10px}
.request-actions{display:flex;gap:8px;margin-top:12px}
.empty{text-align:center;padding:25px;color:var(--muted)}
.modal{position:fixed;inset:0;background:#241d4699;display:grid;place-items:center;padding:18px;z-index:5}
.modal-box{background:white;border-radius:24px;padding:25px;width:min(440px,100%)}
.duration{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}
.duration button{padding:12px;border:1px solid #ddd6ef;border-radius:12px;background:white}
.duration button.selected{background:var(--purple);color:white}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:#27233a;color:white;padding:12px 20px;border-radius:12px;transition:.2s;z-index:9}
#toast.show{transform:translateX(-50%) translateY(0)}
@media(max-width:720px){header{height:62px}
header h1{font-size:1rem}
.grid{grid-template-columns:1fr}
.hero{align-items:flex-start}
.balance{font-size:2.5rem}
.family{grid-template-columns:1fr}
.parent-grid,.form-row{grid-template-columns:1fr}
.actions{grid-template-columns:1fr}
main{padding-top:18px}
.ghost{font-size:.75rem}
}