:root{
  --retro-ink:#111;
  --retro-paper:#f7efd9;
  --retro-card:#fffdf5;
  --retro-yellow:#ffd94a;
  --retro-blue:#4b73f6;
  --retro-green:#59d49d;
  --retro-red:#ff6f73;
  --retro-shadow:5px 5px 0 #111;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at 1px 1px,rgba(17,17,17,.08) 1px,transparent 1.2px) 0 0/18px 18px,
    var(--retro-paper);
  color:var(--retro-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}
.app{max-width:820px;min-height:100vh;margin:auto;background:transparent}
.top{
  position:sticky;top:0;z-index:5;
  margin:12px 12px 18px;
  padding:14px 14px 12px;
  background:var(--retro-yellow);
  border:3px solid var(--retro-ink);
  border-radius:3px;
  box-shadow:var(--retro-shadow);
}
.brand{display:flex;align-items:center;gap:12px}
.school-logo{
  width:64px;height:64px;object-fit:contain;
  background:#111;padding:5px;border:2px solid #111;border-radius:0;
  filter:none;transform:rotate(-2deg)
}
h1{margin:0;color:#111;font-size:1.45rem;font-weight:1000;letter-spacing:-.02em}
.sub{color:#222;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.sync-status{
  margin:0;padding:5px 8px;
  background:#fff;border:2px solid #111;border-radius:2px;
  color:#111!important;font-size:.7rem;font-weight:900;
  box-shadow:2px 2px 0 #111;
}
.install-app-btn{
  width:100%;margin-top:10px;padding:9px 10px;
  border:3px solid #111;border-radius:0;background:#fff;color:#111;
  font-weight:1000;font-size:.82rem;box-shadow:3px 3px 0 #111;cursor:pointer
}
.install-app-btn[hidden]{display:none!important}
.install-app-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}
.header-date{
  margin:0!important;padding:3px!important;
  background:#fff!important;border:2px solid #111!important;border-radius:2px!important;
  box-shadow:2px 2px 0 #111!important;gap:1px!important;
}
.header-date .date-nav{color:#111!important;font-weight:1000}
.header-date .date-center{color:#111!important}
.header-date .calendar-icon{color:#111!important}
.header-date .date-center strong{font-weight:1000}
.header-date .date-center small{color:#444!important;font-weight:700}

.main{padding:0 12px 120px}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.sum{
  min-height:104px;padding:13px 12px;text-align:left;
  border:3px solid #111;border-radius:2px;box-shadow:var(--retro-shadow);
  display:flex;flex-direction:column;justify-content:center;
}
.sum small{
  display:block;color:#111;font-size:.75rem;font-weight:1000;
  letter-spacing:.08em;text-transform:uppercase
}
.sum b{display:block;margin-top:7px;color:#111!important;font-size:1.65rem;font-weight:1000}
.sum.in{background:var(--retro-green)}
.sum.out{background:var(--retro-red)}
.sum.net{background:var(--retro-blue);color:#fff}
.sum.net small,.sum.net b{color:#fff!important}

.card{
  margin-bottom:16px;padding:15px;
  background:var(--retro-card);
  border:3px solid #111;border-radius:2px;
  box-shadow:var(--retro-shadow);
}
#daily>.card:first-of-type{background:var(--retro-card)}
.label{
  display:inline-block;margin:0 0 8px;padding:4px 8px;
  background:#111;color:#fff;font-size:.77rem;font-weight:1000;letter-spacing:.03em
}
.field{
  width:100%;padding:13px 12px;
  border:3px solid #111;border-radius:1px;
  background:#fff;color:#111;font-size:1.03rem;font-weight:750;outline:none;
  box-shadow:3px 3px 0 #d9cdb0;
}
.field:focus{border-color:#111;box-shadow:4px 4px 0 var(--retro-yellow)}
.row{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;margin-top:14px}
.types{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.type{
  min-height:48px;padding:10px 8px;
  border:3px solid #111;border-radius:1px;
  background:#fff;color:#111;font-size:.95rem;font-weight:1000;
  box-shadow:3px 3px 0 #111;cursor:pointer
}
.type.active.income{background:var(--retro-green);color:#111;border-color:#111;box-shadow:3px 3px 0 #111}
.type.active.expense{background:var(--retro-red);color:#111;border-color:#111;box-shadow:3px 3px 0 #111}
.type:active,.add:active,.tab:active,.month-chip:active,.reset-day-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}

.add{
  width:100%;min-height:52px;margin-top:14px;padding:12px;
  border:3px solid #111;border-radius:1px;
  background:var(--retro-blue);color:#fff;
  font-size:1rem;font-weight:1000;box-shadow:4px 4px 0 #111;cursor:pointer
}
.listhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.listhead strong{font-size:1rem;font-weight:1000}
#count{background:#111;color:#fff;padding:3px 7px;font-size:.72rem;font-weight:900}
.item{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  margin:8px 0;padding:11px 10px;
  border:2px solid #111;border-radius:1px;background:#fff;
}
.item:last-child{border-bottom:2px solid #111}
.desc{font-weight:900}
.time{font-size:.76rem;color:#555;font-weight:650}
.amt{font-weight:1000}
.amt.in{color:#08734b}.amt.out{color:#c92533}
.del{
  border:2px solid #111;border-radius:0;background:#ffdedf;color:#111;
  padding:7px 9px;font-weight:900;box-shadow:2px 2px 0 #111
}
.deleted-item{opacity:.5;text-decoration:line-through;background:#e8e3d7!important}
.deleted-badge{border-radius:0;background:#111;color:#fff}
.deleted-lock{color:#555}

.daily-tools{display:flex;justify-content:center}
.reset-bottom{margin:16px 0 4px}
.reset-day-btn{
  border:2px solid #111;border-radius:0;background:#fff;color:#111;
  padding:8px 14px;font-size:.74rem;font-weight:1000;
  box-shadow:3px 3px 0 #111;cursor:pointer
}

.tabs{
  position:fixed;bottom:0;left:0;right:0;max-width:820px;margin:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:8px 12px 10px;background:var(--retro-paper);
  border-top:3px solid #111;z-index:6;backdrop-filter:none;box-shadow:none
}
.tab{
  padding:12px 8px;text-align:center;font-weight:1000;color:#111;
  background:#fff;border:3px solid #111;border-radius:0;box-shadow:3px 3px 0 #111
}
.tab.active{color:#111;background:var(--retro-yellow)}

.monthbar{display:flex;justify-content:space-between;gap:10px;align-items:center}
.monthbar strong,.selected-month-title{font-weight:1000;color:#111}
.year-select{
  border:2px solid #111;border-radius:0;padding:8px;background:#fff;color:#111;
  font-weight:900;box-shadow:2px 2px 0 #111
}
.month-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.month-chip{
  position:relative;border:2px solid #111;background:#fff;color:#111;border-radius:0;
  padding:8px 3px;font-weight:1000;box-shadow:2px 2px 0 #111;cursor:pointer
}
.month-chip.active{background:var(--retro-yellow);color:#111;border-color:#111;box-shadow:2px 2px 0 #111}
.month-has-data{background:#111;color:#fff;border-radius:0}
.dayrow{border-bottom:2px solid #111}
.dayrow.head{font-weight:1000;color:#111;background:#f0e4c7;padding:9px 6px}
.month-total-row{
  border:2px solid #111;border-radius:0;background:var(--retro-yellow);
  box-shadow:2px 2px 0 #111;font-weight:900
}
.month-day{border-bottom:0}
.month-day-summary{
  margin-top:8px;padding:10px 8px;background:#fff;
  border:2px solid #111;font-weight:1000
}
.month-items{padding:4px 0 8px}
.month-item{border-bottom:1px dashed #111}
.pos{color:#08734b;font-weight:1000}.neg{color:#c92533;font-weight:1000}

@media(max-width:600px){
  .top{margin:8px 8px 14px;padding:11px}
  .school-logo{width:54px;height:54px}
  h1{font-size:1.12rem;line-height:1.08}
  .sub{font-size:.67rem}
  .status-row{gap:6px}
  .sync-status{font-size:.62rem;padding:4px 6px}
  .header-date .date-center strong{font-size:.66rem}
  .header-date .date-center small{font-size:.54rem}
  .main{padding:0 8px 108px}
  .summary{gap:8px}
  .sum{min-height:88px;padding:9px 8px;box-shadow:3px 3px 0 #111}
  .sum small{font-size:.64rem}
  .sum b{font-size:1.15rem}
  .card{padding:12px;box-shadow:4px 4px 0 #111}
  .row{grid-template-columns:1fr;gap:10px}
  .types{grid-template-columns:1fr 1fr}
  .month-buttons{grid-template-columns:repeat(6,1fr);gap:5px}
  .month-chip{font-size:.69rem;padding:7px 1px}
  .month-item{grid-template-columns:42px 1fr auto;font-size:.8rem}
  .month-item-type{display:none}
  .tabs{padding:7px 8px 9px;gap:7px}
  .tab{font-size:.83rem;padding:10px 5px}
}