/* Heebo with real weights */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;700;800;900&display=swap');

/* ========= Theme tokens ========= */
:root{
  --bg:#f4f7ff; --ink:#0e1b39; --muted:#5e6f98;
  --brand:#6b8ff7; --brand-2:#9ed6ff; --accent:#ffe39a;
  --good:#28c1a0; --bad:#f16f8a;
  --card:#ffffff; --soft:#edf3ff; --hard:#dce7ff;
  --shadow:0 14px 32px rgba(16,29,61,.12);
  --r:26px;

  /* unified control sizing */
  --ctl-h:56px;
  --ctl-r:16px;
}

/* ========= Base ========= */
*{box-sizing:border-box}
html{font-size:15px}
body{
  margin:0; direction:rtl;
  background:linear-gradient(180deg,#eef4ff,#fbfdff 55%);
  font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.app{max-width:1100px;margin:0 auto;padding:20px;display:grid;gap:18px}

/* ========= Header ========= */
.head{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:14px 16px; display:flex; align-items:center; justify-content:center; gap:12px;
  border:2px solid var(--hard); text-align:center
}
.brand{display:flex; gap:10px; align-items:center; justify-content:center}
.brand-title{background:var(--brand); color:#fff; padding:8px 12px; border-radius:14px; font-weight:900}
.tagline{font-weight:800; color:#2851a3}

/* ========= Cards / Tiles ========= */
.zone{display:grid; gap:18px}
.square,.card{
  background:var(--card); border-radius:28px; box-shadow:var(--shadow);
  padding:20px; border:2.5px solid var(--hard); text-align:center
}
.square.total{
  background:radial-gradient(120% 120% at 20% 10%, #dbe7ff 0%, #f2f7ff 62%, #ffffff 100%);
  border-color:#cfe0ff
}
.subcard{background:linear-gradient(180deg,#ffffff,#f8fbff)}
.subcard,.card{min-height:140px}

/* ========= Balance layout ========= */
.balance-wrap{display:grid; gap:14px; justify-items:stretch}
.balance-wrap .square.total{width:100%; min-height:160px}
.sub-balance{display:grid; grid-template-columns:1fr 1fr; gap:14px; justify-items:stretch; width:100%}
@media (max-width:780px){ .sub-balance{grid-template-columns:1fr} }

/* ========= Type scale ========= */
.title{font-size:1.2rem; font-weight:900; display:flex; align-items:center; gap:10px; justify-content:center}
.title.lg{font-size:1.35rem}
.title.xl{font-size:1.5rem}
.emoji{font-size:28px}
.huge{font-size:2rem;   font-weight:900}   /* cash/saving */
.mega{font-size:3.6rem; font-weight:900}   /* total */
.sub{font-size:1rem; color:#3a4c77; font-weight:800; text-align:center}

/* ========= Rows & Controls ========= */
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center}
.row + .row{margin-top:12px}

input[type="number"], input[type="text"]{
  padding:0 14px; border:2px solid #dfe7ff; border-radius:var(--ctl-r); background:#fbfdff;
  font:inherit; font-weight:800; text-align:center; height:var(--ctl-h); line-height:var(--ctl-h); min-width:220px
}

.btn{
  border:0; border-radius:var(--ctl-r); padding:0 16px; height:var(--ctl-h); line-height:var(--ctl-h);
  font-size:1.05rem; font-weight:900; cursor:pointer
}
.btn.primary{background:var(--brand); color:#fff}
.btn.good{background:var(--good); color:#fff}
.btn.bad{
  background:transparent; color:var(--bad);
  border:2.5px solid color-mix(in srgb, var(--bad) 55%, white)
}
.btn.ghost{background:#f3f7ff; color:#2753b0; border:2px solid var(--soft)}
.btn.wide{width:100%}
.deposit-big{font-size:1.2rem; box-shadow:0 8px 18px rgba(107,143,247,.18)}

/* ========= Actions (Pattern B) ========= */
/* symmetric columns; nice spacing */
.actions-split{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
}
.actions-left{ grid-column:1; }
.actions-right{ grid-column:2; }
.actions-right input[type="number"],
.actions-right .btn,
.actions-left  .btn { width:100%; }

/* chips under the deposit area */
#kidPeriods{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:12px; }
#kidPeriods .chip{
  padding:12px 16px; min-width:128px; border-radius:999px;
  background:#f6f9ff; border:2px solid var(--soft);
  font-weight:900; line-height:1.15; white-space:nowrap; font-size:1rem;
}
#kidPeriods .chip.active{
  background:var(--brand); color:#fff; border-color:transparent; position:relative;
}
#kidPeriods .chip.active::before{
  content:"✓"; font-weight:900; margin-inline-start:6px;
}

/* mobile: stack, deposit on top */
@media (max-width:900px){
  .actions-split{ grid-template-columns:1fr; gap:16px; }
  .actions-right{ grid-row:1; }
  .actions-left{ grid-row:2; }
}

/* ========= Progress ========= */
.progress{
  position:relative; height:38px; background:#e9f0ff; border:2.5px solid var(--hard);
  border-radius:999px; overflow:hidden; margin-top:10px
}
.progress>span{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); width:0%}
.progress .pct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px}

/* ========= Table (parents’ plans) ========= */
.table-wrap{width:100%; overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
.table th, .table td{padding:10px; text-align:center; border-bottom:2px solid #eef2fb}
.table input[type="number"]{min-width:100px; height:44px; line-height:44px; border-radius:12px}

/* small ghost button inside table */
.btn.small{ padding:8px 10px; height:auto; line-height:1.1; border-radius:12px }

/* ========= History feed ========= */
.feed{display:grid; gap:8px; font-size:15px; color:#1c2b53; text-align:center}
.feed .pos{color:var(--good); font-weight:900}
.feed .neg{color:var(--bad);  font-weight:900}

/* ========= Status pill ========= */
.pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#eef6ff; color:#2753b0; font-weight:800}

/* ========= Confetti layer ========= */
.confetti{pointer-events:none; position:fixed; inset:0; display:none}
.confetti.on{display:block}
.confetti i{position:absolute; width:8px; height:14px; border-radius:2px; animation:fall 900ms ease-out forwards}
@keyframes fall{ from{ transform:translateY(-20vh) rotate(0deg);} to{ transform:translateY(120vh) rotate(300deg);} }
.auth-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.auth-card{
  width:min(420px,100%);
  background:white;
  border:2.5px solid var(--hard);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:28px;
  display:grid;
  gap:14px;
  text-align:center;
}

.auth-card h1{
  margin:0;
  font-size:2.4rem;
  font-weight:900;
  color:#2851a3;
}

.auth-card input{
  width:100%;
  min-width:0;
}