:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#243047;background:#f5f7fb}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0}
header{background:white;border-bottom:1px solid #e6eaf1;padding:18px max(24px,calc((100vw - 1100px)/2));display:flex;align-items:center;justify-content:space-between}
.logo{font-size:23px;font-weight:850;color:#4c67db}
.shell{max-width:1100px;margin:25px auto;padding:0 20px}
.nav{display:flex;gap:8px}
.nav a{display:grid;place-items:center;padding:10px 17px;border-radius:10px;background:#eef1f7;color:#59677d;text-decoration:none;touch-action:manipulation}
.nav a.active{background:#526ee5;color:white}
.panel{background:white;border:1px solid #e8ecf3;border-radius:18px;padding:24px;margin-bottom:18px;box-shadow:0 4px 18px #1e315009}
.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
.metric{padding:20px;border-radius:14px;background:#f6f8fc}
.metric small{display:block;color:#69778b;margin-bottom:9px}
.metric strong{font-size:23px}
.income{color:#286ed3}
.expense{color:#e65e70}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.controls button,.ghost{padding:9px 12px;border-radius:9px;background:#edf1f8;color:#35445e}
.primary{padding:11px 17px;border-radius:10px;background:#526ee5;color:white}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:16px}
.weekday{text-align:center;color:#7a8799;padding:10px 0;font-size:13px}
.day{min-height:103px;border:1px solid #e9edf4;background:white;border-radius:11px;text-align:left;padding:10px;display:flex;flex-direction:column;gap:7px}
.day.muted{opacity:.35}
.day.selected{outline:2px solid #526ee5;background:#f5f7ff}
.day .num{font-weight:700}
.day .money{font-size:11px;overflow-wrap:anywhere}
.day .plus{color:#286ed3}
.day .minus{color:#e65e70}
.entry{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f5}
.entry:last-child{border:0}
.entry .details{flex:1;min-width:0}
.entry small{color:#8290a3}
.entry .amount{font-weight:750}
.entry button{color:#8794a7;background:#f3f5f9;padding:7px;border-radius:8px}
.record-day{margin-top:18px;padding-top:14px;border-top:1px solid #edf0f5;scroll-margin-top:12px}
.record-day h4{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:15px}
.record-day h4 small{font-size:12px;font-weight:500;color:#8290a3}
.record-day.is-selected h4{color:#4c67db}
.record-day .empty{padding:20px 0;text-align:left;font-size:14px}
.pill{font-size:12px;padding:5px 9px;border-radius:20px;background:#eef1fb;color:#5265a0}
.empty{padding:28px;text-align:center;color:#8794a7}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px}
.field input,.field select,.field textarea{border:1px solid #dce2ec;border-radius:10px;padding:12px;background:white;min-width:0}
.full{grid-column:1/-1}
.typepick{display:flex;gap:8px}
.typepick label{padding:10px 15px;border-radius:10px;background:#eef1f7;cursor:pointer}
.typepick input{accent-color:#526ee5}
h2{margin:0;font-size:21px}
h3{margin:0 0 14px;font-size:17px}
.tablewrap{overflow:auto}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th,td{padding:12px;border-bottom:1px solid #e9edf4;text-align:right}
th:first-child,td:first-child{text-align:left}
th{background:#f6f8fc;color:#66758a;font-size:13px}
.month-toggle{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.month-toggle[aria-expanded="true"]{background:#e5eaff;color:#4c67db;font-weight:700}
#monthlyStats .stats-month td{color:#69778b}
#monthlyStats .stats-month.is-selected td{font-weight:700}
#monthlyStats .stats-month.is-selected .income{color:#286ed3}
#monthlyStats .stats-month.is-selected .expense{color:#e65e70}
#monthlyStats .stats-month.is-selected .stats-net{color:#4c67db}
#categoryStats .category-zero{color:#8490a2}
#monthlyStats .stats-week th,#monthlyStats .stats-week td{background:#f6f8fc;font-size:12px}
#monthlyStats .stats-week th{padding-left:20px;font-weight:500}
.muted{color:#8490a2}
.hidden{display:none!important}
.weekbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.weekbar button{padding:9px 12px;border-radius:8px;background:#eef1f7}
.weekbar button.active{background:#526ee5;color:white}
.calc{max-width:360px;margin:auto}
.calc input{width:100%;padding:16px;font-size:24px;text-align:right;border:1px solid #dce2ec;border-radius:12px}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.keys button{padding:17px;border-radius:10px;background:#edf1f8;font-size:18px}
.keys button.equals{background:#526ee5;color:white}
.notice{background:#fff7e9;color:#8b6530;padding:13px;border-radius:10px;font-size:13px;margin-top:14px}

.import-label{cursor:pointer}

.record-dialog{border:0;border-radius:18px;padding:25px;width:min(94vw,520px);box-shadow:0 20px 80px #1a2c4c44}

.sub-dialog{border:0;border-radius:18px;padding:25px;width:min(94vw,440px)}

.calc-dialog{border:0;border-radius:18px;padding:24px;width:min(94vw,420px)}

.mt-20{margin-top:20px}

.mt-18{margin-top:18px}

.apply-calculation{width:100%;margin-top:12px}

.subscription-image{width:40px;height:40px;object-fit:contain;border-radius:9px}

.subscription-icon{font-size:25px}

.category-pill{display:inline-flex;align-items:center;gap:7px;margin:3px}

.category-delete{background:none;color:#8b96a8;padding:0}

html{scroll-padding-bottom:100px}
body{min-width:280px;line-height:1.5}
button,.import-label{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.tablewrap:focus-visible{outline:3px solid #526ee5;outline-offset:3px}
.controls .primary{background:#526ee5;color:white}
input,select,textarea{max-width:100%}
section,.panel,.formgrid>*,.metric{min-width:0}
.metric strong{display:block;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.entry .details,.entry .pill{overflow-wrap:anywhere}
.entry .amount{font-variant-numeric:tabular-nums}
.controls input{min-width:0;flex:1;border:1px solid #dce2ec;border-radius:10px;padding:12px}
.category-pill{max-width:100%;overflow-wrap:anywhere}
.category-delete{flex-shrink:0;min-width:36px;min-height:36px;font-size:20px}
.topline h3{margin-bottom:0}
.topline select{border:1px solid #dce2ec;border-radius:10px;padding:10px;background:white}
.tablewrap{max-width:100%;overscroll-behavior-x:contain}
.money-mobile{display:none}
dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
dialog::backdrop{background:#17244380}
body:has(dialog[open]){overflow:hidden}

/* Keep the phone layout at every browser width. */
@media all{
  header{
    position:sticky;top:0;z-index:10;
    padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
  }
  .logo{font-size:21px}
  .nav{
    position:fixed;bottom:0;left:0;right:0;z-index:20;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
    padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    background:white;border-top:1px solid #e6eaf1;box-shadow:0 -4px 20px #24304708;
  }
  .nav a{min-height:48px;padding:10px 4px;font-size:14px;font-weight:700}
  .shell{
    margin:16px auto 0;
    padding:0 max(12px,env(safe-area-inset-right)) calc(156px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  .panel{padding:16px;border-radius:16px;margin-bottom:14px}
  h2{font-size:19px}
  h3{font-size:16px}
  button,.import-label{min-height:44px}
  input,select,textarea{font-size:16px;min-height:48px}
  .home-toolbar{display:block}
  .period-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;margin-top:14px}
  .period-navigation{grid-column:2;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
  #period{text-align:center;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
  #prev,#next{flex:0 0 36px;font-size:26px;padding:0;background:transparent}
  #today{grid-column:3;justify-self:end;min-width:36px;padding:9px 4px;font-size:14px;font-weight:700;color:#4c67db}
  #add{
    position:absolute;right:max(20px,env(safe-area-inset-right));
    bottom:calc(84px + env(safe-area-inset-bottom));z-index:9;
    display:grid;place-items:center;width:56px;height:56px;
    padding:0;border-radius:50%;font-size:32px;font-weight:400;line-height:1;
    box-shadow:0 6px 20px #526ee54d;
  }
  .summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
  .metric{padding:14px 12px}
  .metric small{font-size:12px;margin-bottom:6px}
  .metric strong{font-size:clamp(16px,4.5vw,22px);letter-spacing:-.5px}
  .metric:last-child{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .metric:last-child small{margin:0;flex-shrink:0}
  .calendar{gap:4px;margin-top:12px}
  .weekday{font-size:12px;padding:8px 0}
  .day{min-width:0;min-height:84px;padding:7px 2px;gap:5px;border-radius:8px;text-align:center;align-items:center}
  .day.selected{outline-offset:-2px}
  .day .num{font-size:13px}
  .day .money{font-size:10px;line-height:1.35;letter-spacing:-.3px;max-width:100%;overflow-wrap:anywhere}
  .money-desktop{display:none}
  .money-mobile{display:inline}
  .entry{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:16px 0}
  .entry>.pill{grid-column:1;justify-self:start;max-width:100%}
  .entry>.amount{grid-column:2/4;grid-row:1;justify-self:end;font-size:15px;overflow-wrap:anywhere;max-width:100%}
  .entry>.details{grid-column:1;grid-row:2;font-size:14px}
  .entry>[data-edit]{grid-column:2;grid-row:2}
  .entry>[data-delete]{grid-column:3;grid-row:2}
  .entry button{padding:8px 10px;font-size:13px}
  #subList .entry{grid-template-columns:40px minmax(0,1fr) auto}
  #subList .entry>.subscription-image,#subList .entry>.subscription-icon{grid-column:1;grid-row:1/3}
  #subList .entry>.details{grid-column:2;grid-row:1}
  #subList .entry>.expense{grid-column:2;grid-row:2;overflow-wrap:anywhere}
  #subList .entry>[data-subdelete]{grid-column:3;grid-row:1/3}
  .formgrid{grid-template-columns:minmax(0,1fr);gap:14px}
  .field{min-width:0}
  .field input,.field select,.field textarea{width:100%}
  #settings .controls{flex-wrap:nowrap;margin-top:12px}
  #settings .panel:last-child .controls{display:grid;grid-template-columns:minmax(0,1fr)}
  .import-label{display:flex;justify-content:center;align-items:center}
  .notice{line-height:1.7;overflow-wrap:anywhere}
  th,td{padding:12px 10px;font-size:13px}
  .tablewrap{margin-top:14px}
  .tablewrap th:first-child,.tablewrap td:first-child{position:sticky;left:0;background:white;z-index:1}
  .tablewrap th:first-child{background:#f6f8fc}
  .record-dialog,.sub-dialog,.calc-dialog{
    width:calc(100% - 24px);max-width:480px;
    max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-radius:18px;
  }
  [data-close]{min-width:44px}
  #recordForm>.topline{display:grid;grid-template-columns:1fr 2fr}
  .keys button{min-height:48px;padding:12px}
}

/* Center a phone-sized app on desktop; scroll its content inside the frame. */
html{background:#e6ebf3}
body{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:520px;
  height:calc(100vh - 48px);
  height:calc(100dvh - 48px);
  min-height:0;
  margin:24px auto;
  overflow:hidden;
  background:#f5f7fb;
  border-radius:28px;
  box-shadow:0 12px 48px #24304718;
}
header{position:static;flex-shrink:0}
.nav{position:absolute}
.shell{
  flex:1;
  min-height:0;
  width:100%;
  max-width:none;
  margin:0;
  padding-top:16px;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-padding-bottom:100px;
}
.record-dialog,.sub-dialog,.calc-dialog{max-width:480px}

/* The record sheet slides over a calendar that fits the initial viewport. */
.shell:has(#home:not(.hidden)){
  padding-top:12px;
  padding-bottom:calc(var(--nav-height,69px) + 16px);
  scroll-padding-top:12px;
}
.calendar-panel{
  position:sticky;top:12px;z-index:0;
  display:flex;flex-direction:column;
  height:calc(var(--home-height,calc(100dvh - 130px)) - 100px);
  min-height:0;margin-bottom:12px;
}
.calendar-panel .home-toolbar{flex-shrink:0}
.calendar-panel .home-toolbar h2{font-size:16px}
.calendar-panel .period-controls{margin-top:4px}
.calendar-panel .summary{flex-shrink:0;grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0;gap:6px}
.calendar-panel .metric,.calendar-panel .metric:last-child{display:block;grid-column:auto;padding:10px 6px}
.calendar-panel .metric small,.calendar-panel .metric:last-child small{margin:0 0 4px;font-size:11px}
.calendar-panel .metric strong{font-size:clamp(12px,3.6vw,17px)}
.calendar-panel #calendar{display:flex;flex:1;min-height:0}
.calendar-panel .calendar{
  flex:1;min-height:0;margin-top:0;gap:3px;
  grid-template-rows:24px repeat(var(--calendar-weeks,6),minmax(0,1fr));
}
.calendar-panel .weekday{padding:0;align-self:center}
.calendar-panel .day{min-height:0;padding:3px 1px;gap:2px;justify-content:center}
.calendar-panel .day .money{font-size:9px;line-height:1.2}
.records-sheet{
  position:relative;z-index:2;
  min-height:calc(var(--home-height,calc(100dvh - 130px)) - 12px);
  margin-bottom:0;padding-top:0;border-radius:22px 22px 16px 16px;
  box-shadow:0 -8px 24px #24304712;
}
.records-handle{
  display:block;width:100%;height:24px;min-height:24px;padding:0;
  background:transparent;cursor:grab;touch-action:none;
}
.records-handle::before{content:'';display:block;width:36px;height:4px;margin:auto;border-radius:4px;background:#c8d0df}
.records-handle:active{cursor:grabbing}

@media(max-height:650px){
  .calendar-panel{padding:10px}
  .calendar-panel .home-toolbar h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .calendar-panel .period-controls{margin-top:0}
  .calendar-panel .summary{margin:6px 0}
  .calendar-panel .metric,.calendar-panel .metric:last-child{padding:6px 4px}
  .calendar-panel .metric strong{font-size:14px}
  .calendar-panel .day{padding:1px;gap:0}
  .calendar-panel .day .num{font-size:11px;line-height:1.2}
  .calendar-panel .day .money{font-size:8px}
}

@media(max-width:650px){
  body{
    height:100vh;
    height:100dvh;
    margin:0 auto;
    border-radius:0;
    box-shadow:none;
  }
}

@media(max-width:360px){
  .panel{padding:12px}
  .nav{gap:4px}
  .nav a{font-size:13px}
  .day{min-height:80px}
}