@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

*{box-sizing:border-box}
:root{--ink:#776e69;--muted:#a79e99;--line:rgba(140,130,124,.16);--bg:#f3f0ee}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg);font-family:'Galmuri11',monospace;color:var(--ink);overflow:hidden}
body{min-height:100dvh;-webkit-text-size-adjust:100%}
button,input,select,textarea{font-family:'Galmuri11',monospace;color:inherit}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

.phone-stage{
  width:100vw;height:100dvh;
  display:grid;place-items:center;
  padding:max(0px,env(safe-area-inset-top)) 0 max(0px,env(safe-area-inset-bottom));
  overflow:hidden;
}
.wallet{
  position:relative;
  width:887px;height:1774px;
  transform:scale(var(--app-scale,1));
  transform-origin:center center;
}
.base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}

.summary{position:absolute;left:6%;top:5.5%;width:88%;height:13.5%}
.budget-btn{position:absolute;right:8%;top:13%;font-size:18px}
.stat{position:absolute;top:37%;width:19%;text-align:center}
.stat span{display:block;font-size:18px;opacity:.58}
.stat strong{display:block;margin-top:10px;font-size:24px;font-weight:400}
.stat-income{left:8%} .stat-expense{left:30%} .stat-saving{left:52%} .stat-left{left:74%}
.text-button{border:0;background:transparent;padding:0}
.budget-track{position:absolute;left:10%;right:13%;bottom:10%;height:6px;border-radius:999px;background:rgba(135,125,120,.16)}
.budget-fill{height:100%;width:0;border-radius:inherit;background:#cabbb5}
.budget-heart{position:absolute;left:0;top:50%;transform:translate(-50%,-55%);font-size:30px}
.budget-percent{position:absolute;right:8%;bottom:5%;font-size:18px}

.tabs{position:absolute;left:7%;top:20.5%;width:86%;height:5.5%;display:grid;grid-template-columns:repeat(4,1fr);gap:2%}
.tab{border:0;background:transparent;font-size:25px}

.records{position:absolute;left:7%;top:27.5%;width:86%;height:28.5%;overflow:hidden}
.records h1{position:absolute;left:4%;top:2%;margin:0;font-size:30px;font-weight:400}
.records>p{position:absolute;left:50%;top:8%;transform:translateX(-50%);margin:0;font-size:17px;opacity:.48;white-space:nowrap}
.add-btn{position:absolute;right:5%;top:5%;font-size:18px}
.list{position:absolute;left:4%;top:16%;width:91%;height:78%;overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.list::-webkit-scrollbar{display:none}
.row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 2px;border-bottom:1px solid var(--line)}
.row-title{font-size:20px} .row-meta{font-size:15px;opacity:.5;margin-top:4px} .row-amount{font-size:20px}
.row-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:12px}
.tiny{border:0;background:transparent;font-size:15px}
.empty{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);text-align:center;color:var(--muted)}
.empty .heart{font-size:46px} .empty p{font-size:20px;margin:10px 0 4px} .empty small{font-size:14px}

.mini-grid{position:absolute;left:7%;top:57%;width:86%;height:18.5%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3%}
.mini-card{border:0;background:transparent;text-align:left;padding:8% 12%}
.mini-card span{display:block;font-size:18px;opacity:.72} .mini-card strong{display:block;margin-top:12px;font-size:28px;font-weight:400}

.saving-goal{position:absolute;left:7%;top:77%;width:86%;height:8%;padding:2.5% 10% 2% 18%}
.saving-goal span{font-size:17px} .saving-goal strong{display:block;margin-top:8px;font-size:24px;font-weight:400}
.goal-track{position:absolute;left:35%;right:9%;top:58%;height:7px;border-radius:999px;background:rgba(135,125,120,.15)}
.goal-fill{height:100%;width:0;border-radius:inherit;background:#cabbb5}
#goalPercent{position:absolute;right:6%;top:25%;font-size:18px}

.bottom-shortcuts{position:absolute;left:7%;top:86%;width:86%;height:7.5%;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.bottom-shortcuts button{border:0;background:transparent;text-align:left;padding:8% 16%}
.bottom-shortcuts span{display:block;font-size:18px} .bottom-shortcuts strong{display:block;margin-top:8px;font-size:20px;font-weight:400}

.modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:end center;background:rgba(80,72,68,.24);backdrop-filter:blur(5px);padding:0 8px max(8px,env(safe-area-inset-bottom))}
.modal.hidden{display:none}
.sheet{width:100%;max-height:82dvh;overflow:auto;background:#fffdfc;border:1px solid #ded5d0;border-radius:24px 24px 18px 18px;padding:20px}
.sheet.small{max-height:none}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sheet-head strong{font-size:18px;font-weight:400} .sheet-head button{border:0;background:transparent;font-size:24px}
.sheet label{display:grid;gap:6px;font-size:13px;margin:10px 0}
.sheet input,.sheet select,.sheet textarea{width:100%;border:1px solid #ddd5d0;border-radius:12px;background:#faf8f7;padding:12px;font-size:16px;outline:0}
.sheet-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.sheet-actions button{border:1px solid #d9d0cb;border-radius:999px;background:#faf7f5;padding:10px 16px}
.sheet-actions .save{background:#ddd1cc}
.hidden{display:none!important}


/* ===== v2: reuse established HIME WALLET CSS language ===== */
:root{
  --ink:#776e69;
  --ink-strong:#554d49;
  --muted:#aaa19c;
  --line:rgba(145,135,130,.16);
  --soft:#faf8f7;
  --panel:#fffdfc;
  --accent:#c8b8b1;
}

/* Galmuri11 regular everywhere */
html,body,
button,input,select,textarea,
.stat span,.stat strong,
.tab,
.records h1,.records>p,
.add-btn,.budget-btn,
.row-title,.row-meta,.row-amount,.tiny,
.mini-card span,.mini-card strong,
.saving-goal span,.saving-goal strong,
.bottom-shortcuts span,.bottom-shortcuts strong,
.sheet,.sheet input,.sheet select,.sheet textarea,.sheet button{
  font-family:'Galmuri11',monospace !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* Text-only clickable controls: use the base image's button slots */
.tab,
.text-button,
.mini-card,
.bottom-shortcuts button{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--ink) !important;
}

.tab{
  opacity:.88;
  text-shadow:none !important;
}
.tab.active{
  color:var(--ink-strong) !important;
  opacity:1;
  text-shadow:0 0 8px rgba(105,90,82,.16) !important;
}

.budget-btn,
.add-btn{
  color:#6f6662 !important;
  opacity:.88;
}

.stat span{
  color:var(--ink);
  opacity:.52 !important;
}
.stat strong{
  color:#655d59 !important;
}

.records h1{
  color:#675e59 !important;
}
.records>p{
  color:var(--ink);
  opacity:.48 !important;
}

/* List rows match previous web version */
.row{
  border-bottom:1px solid var(--line) !important;
}
.row-title{
  color:#665e5a;
}
.row-meta{
  color:var(--ink);
  opacity:.5 !important;
}
.row-amount{
  color:#655d59;
}
.tiny{
  color:#746a66;
  opacity:.62 !important;
}

/* Empty state from previous version */
.empty{
  color:var(--muted) !important;
}
.empty .heart{
  color:#9e938d;
}

/* Lower mobile cards remain image-backed: text only */
.mini-card,
.bottom-shortcuts button{
  padding-left:12% !important;
  padding-right:10% !important;
}
.mini-card span,
.bottom-shortcuts span,
.saving-goal span{
  color:var(--ink);
  opacity:.68;
}
.mini-card strong,
.bottom-shortcuts strong,
.saving-goal strong{
  color:#655d59;
}

/* Modal / sheet styling copied from the earlier HIME web app family */
.modal{
  background:rgba(79,70,66,.22) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.sheet{
  background:var(--panel) !important;
  border:1px solid #ddd4cf !important;
  box-shadow:0 24px 70px rgba(76,65,58,.22) !important;
}

.sheet-head strong{
  color:#5c5450 !important;
}

.sheet input,
.sheet select,
.sheet textarea{
  border:1px solid #ddd4cf !important;
  background:var(--soft) !important;
  color:var(--ink) !important;
}
.sheet input:focus,
.sheet select:focus,
.sheet textarea:focus{
  border-color:#b9aca6 !important;
  background:#fff !important;
}

.sheet-actions button{
  border:1px solid #d8d0cb !important;
  background:#faf7f5 !important;
  box-shadow:none !important;
}
.sheet-actions .save{
  background:#ddd1cc !important;
  color:#554c48 !important;
}

/* iPhone tap ergonomics without changing visible geometry */
.tab,
.budget-btn,
.add-btn,
.mini-card,
.bottom-shortcuts button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Subtle compact Nintendo-ish spacing */
.stat span,
.records>p,
.row-meta,
.tiny,
.mini-card span,
.bottom-shortcuts span{
  line-height:1.2;
}

.stat strong,
.tab,
.records h1,
.row-title,
.row-amount,
.mini-card strong,
.bottom-shortcuts strong{
  line-height:1.15;
}


/* ===== iPhone v3: exact 887x1774 fit, no transform scaling ===== */
html,body{
  margin:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  background:#f3f0ee!important;
}

.phone-stage{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:
    env(safe-area-inset-top)
    0
    env(safe-area-inset-bottom)!important;
  overflow:hidden!important;
}

/* Actual base aspect ratio = 887 / 1774 = 0.5 */
.wallet{
  position:relative!important;
  width:min(100vw, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.5))!important;
  height:auto!important;
  aspect-ratio:887 / 1774!important;
  transform:none!important;
  transform-origin:initial!important;
  flex:none!important;
  margin:0!important;
}

.base{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
}

/* Every overlay remains percentage-based relative to the fitted wallet */
.summary,
.tabs,
.records,
.mini-grid,
.saving-goal,
.bottom-shortcuts{
  transform:none!important;
}

/* Touch text scales with the wallet instead of using fixed giant desktop pixels */
.budget-btn{font-size:clamp(7px,2.1vw,18px)!important}
.stat span{font-size:clamp(7px,2vw,18px)!important}
.stat strong{font-size:clamp(9px,2.8vw,24px)!important}
.budget-percent{font-size:clamp(7px,2vw,18px)!important}
.budget-heart{font-size:clamp(14px,4vw,30px)!important}
.tab{font-size:clamp(10px,3.2vw,25px)!important}
.records h1{font-size:clamp(12px,3.8vw,30px)!important}
.records>p{font-size:clamp(7px,2vw,17px)!important}
.add-btn{font-size:clamp(7px,2.1vw,18px)!important}
.row-title,.row-amount{font-size:clamp(9px,2.5vw,20px)!important}
.row-meta,.tiny{font-size:clamp(7px,1.9vw,15px)!important}
.empty .heart{font-size:clamp(20px,6vw,46px)!important}
.empty p{font-size:clamp(9px,2.5vw,20px)!important}
.empty small{font-size:clamp(7px,1.8vw,14px)!important}
.mini-card span,.bottom-shortcuts span,.saving-goal span{font-size:clamp(8px,2.2vw,18px)!important}
.mini-card strong,.bottom-shortcuts strong,.saving-goal strong{font-size:clamp(10px,3vw,28px)!important}
#goalPercent{font-size:clamp(8px,2.2vw,18px)!important}


/* ===== iPhone v4: Safari visualViewport positioning ===== */
.phone-stage{
  position:fixed!important;
  left:var(--vv-left,0px)!important;
  top:var(--vv-top,0px)!important;
  width:var(--vv-width,100vw)!important;
  height:var(--vv-height,100svh)!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

.wallet{
  position:relative!important;
  width:var(--wallet-width, min(100vw, 50svh))!important;
  height:auto!important;
  aspect-ratio:887 / 1774!important;
  margin:0!important;
  flex:none!important;
  transform:none!important;
}

/* ===== v4: lift text slightly upward ===== */

/* top summary */
.budget-btn{ top:8%!important; }
.stat{ top:32%!important; }
.budget-track{ bottom:14%!important; }
.budget-percent{ bottom:9%!important; }

/* 4 main tabs */
.tabs{ top:20.15%!important; }

/* main record area */
.records h1{ top:0.8%!important; }
.records>p{ top:6.2%!important; }
.add-btn{ top:3.3%!important; }

/* lower cards */
.mini-card{ padding-top:5.5%!important; }
.saving-goal{ padding-top:1.5%!important; }
.bottom-shortcuts button{ padding-top:5.5%!important; }

/* list rows themselves a touch higher/tighter */
.row{ padding-top:10px!important; padding-bottom:12px!important; }