@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#E9F0E2;--paper-alt:#DFE9D8;--paper-mid:#D6E2CE;--paper-dark:#CDDBC6;
  --rule:rgba(100,140,120,0.20);--rule-s:rgba(80,120,100,0.36);
  --div:#C4884A;--div-f:rgba(196,136,74,0.22);
  --navy:#1E3A6E;--navy-mid:#2C5090;--navy-dim:#4A6EB0;--navy-faint:rgba(30,58,110,0.07);
  --ink:#1A2010;--ink-dim:#4E6048;
  --pay:#4A7A55;--pay-f:rgba(74,122,85,0.11);
  --red:#A03020;--red-f:rgba(160,48,32,0.09);
  --amber:#8B6010;--tab-h:58px;
}
:root[data-theme="mono"]{
  --paper:#F5F5F5;--paper-alt:#F5F5F5;--paper-mid:#F5F5F5;--paper-dark:#FFFFFF;
  --rule:#CCCCCC;--rule-s:#CCCCCC;
  --div-f:#CCCCCC;
  --navy:#111111;--navy-mid:#111111;--navy-dim:#111111;--navy-faint:rgba(17,17,17,0.07);
  --ink:#111111;--ink-dim:#666666;
  --pay:#111111;--pay-f:rgba(17,17,17,0.11);
  --red:#111111;--red-f:rgba(17,17,17,0.09);
  --amber:#111111;
}
body{background:var(--paper-dark);display:flex;flex-direction:column;align-items:center;
  min-height:100vh;font-family:'Courier Prime',monospace}
.phone{width:340px;flex-shrink:0;display:flex;flex-direction:column;
  border-radius:36px;border:8px solid #050a05;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.9);background:var(--paper)}
.notch{height:26px;background:#050a05;border-radius:0 0 14px 14px;
  width:88px;margin:0 auto;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nlbl{font-size:8px;color:rgba(233,240,226,0.2);letter-spacing:3px;
  text-transform:uppercase;font-family:'Courier Prime',monospace}
.inner{flex:1;overflow:hidden;display:flex;flex-direction:column;
  background:var(--paper);
  background-image:repeating-linear-gradient(transparent,transparent 27px,var(--rule) 27px,var(--rule) 28px);
  position:relative}
/* HEADER */
.phdr{padding:24px 16px 0;background:var(--paper-alt);border-bottom:3px solid var(--navy);flex-shrink:0}
.phdr-inner{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:9px}
.brand{display:flex;flex-direction:column;gap:1px}
.ptitle{font-family:'Libre Baskerville',Georgia,serif;font-size:22px;letter-spacing:3px;text-transform:uppercase;color:var(--navy);line-height:1}
/* The y drops slightly to echo the ledger tail */
.ptitle-y{display:inline-block;color:var(--div);font-style:italic}
.psub{font-size:8px;letter-spacing:1px;color:var(--navy-dim);font-style:italic;font-family:'Courier Prime',monospace;margin-top:2px}
.ptitle-sm{font-family:'Libre Baskerville',Georgia,serif;font-size:17px;letter-spacing:3px;text-transform:uppercase;color:var(--navy)}
/* BALANCE */
.bal{background:var(--navy);padding:10px 16px;flex-shrink:0}
.blbl{font-size:8px;color:rgba(180,200,240,0.50);letter-spacing:2px;text-transform:uppercase;margin-bottom:2px;font-family:'Courier Prime',monospace}
.bamt{font-family:'Libre Baskerville',Georgia,serif;font-size:24px;color:#D0DCFA;letter-spacing:1px}
.bamt.neg{color:#F4A0A0}
.brow{display:flex;justify-content:space-between;align-items:flex-end;margin-top:5px;
  padding-top:6px;border-top:1px solid rgba(255,255,255,0.08)}
.bproj-lbl{font-size:8px;color:rgba(180,200,240,0.38);letter-spacing:1.5px;text-transform:uppercase;font-family:'Courier Prime',monospace;margin-bottom:2px}
.bproj{font-family:'Courier Prime',monospace;font-size:13px;color:rgba(208,220,250,0.65)}
.bproj.warn{color:rgba(244,160,160,0.7)}
/* CAL */
.cnav{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;
  background:var(--paper-alt);border-bottom:1px solid var(--rule-s);flex-shrink:0}
.cmo{font-family:'Libre Baskerville',serif;font-size:12px;color:var(--navy);letter-spacing:2px;text-transform:uppercase}
.carr{color:var(--navy-mid);font-size:20px;padding:0 6px;cursor:pointer;line-height:1}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);flex-shrink:0}
.cdow{text-align:center;font-size:7px;color:var(--navy-dim);padding:4px 0 3px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;border-bottom:2px solid var(--div-f);
  border-right:1px solid var(--rule);font-family:'Courier Prime',monospace;background:var(--paper-mid)}
.cday{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;padding:2px 0}
.dn{font-size:13px;color:var(--ink);font-family:'Courier Prime',monospace;line-height:1}
.dt{font-size:7px;color:var(--navy-dim);font-family:'Courier Prime',monospace;margin-top:1px}
.cday.today{background:var(--navy-faint)}.cday.today .dn{color:var(--navy);font-weight:700}
.cday.sel{background:var(--navy)}.cday.sel .dn{color:#D0DCFA}.cday.sel .dt{color:rgba(208,220,250,0.6)}
.cday.fill{background:var(--paper-dark);opacity:0.45}
.cday.nf{background:rgba(160,48,32,0.06)}.cday.nl{background:rgba(160,48,32,0.13)}
.cday.nm{background:rgba(160,48,32,0.21)}.cday.ns{background:rgba(160,48,32,0.31)}
.dots{display:flex;gap:2px;margin-top:3px;min-height:5px}
.dot{width:4px;height:4px;border-radius:50%}
.dot.job{background:var(--navy-mid)}.dot.pay{background:var(--pay)}.dot.exp{background:var(--red)}
/* DAY PANEL */
.dp{margin:8px 10px 0;border:1px solid var(--div-f);border-top:2px solid var(--div);border-radius:2px;overflow:hidden;background:var(--paper-alt)}
.dph{background:var(--navy);padding:8px 12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px}
.dpd{font-family:'Libre Baskerville',serif;font-size:11px;color:#D0DCFA;letter-spacing:1px}
.dpp{font-size:10px;font-family:'Courier Prime',monospace}
.dpp.pos{color:#90C8A0}.dpp.neg{color:#F4A0A0}
.drow{display:flex;align-items:center;padding:9px 12px;gap:8px;border-bottom:1px solid var(--rule);cursor:pointer}
.drule{width:3px;height:18px;border-radius:1px;flex-shrink:0}
.drule.job{background:var(--navy-mid)}.drule.pay{background:var(--pay)}.drule.exp{background:var(--red)}
.dname{font-size:14px;color:var(--ink);font-family:'Courier Prime',monospace}
.dsub{font-size:14px;color:var(--ink-dim);font-style:italic;margin-top:1px}
.damt{font-size:14px;font-weight:700;font-family:'Courier Prime',monospace;margin-left:auto;flex-shrink:0}
.damt.pos{color:var(--pay)}.damt.neg{color:var(--red)}
.dempty{padding:14px 12px;font-size:11px;color:var(--ink-dim);font-style:italic;font-family:'Courier Prime',monospace}
/* LEDGER */
.lfilt{display:flex;gap:4px;padding:7px 10px;background:var(--paper-alt);border-bottom:2px solid var(--navy);flex-shrink:0}
.fb{font-family:'Courier Prime',monospace;font-size:9px;padding:5px 10px;border:1px solid var(--navy-mid);border-radius:1px;color:var(--navy);background:transparent;cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-weight:700}
.fb.active{background:var(--navy);color:#D0DCFA;border-color:var(--navy)}
.cat-filter-new { animation: highlight-fade 1.5s ease-out; }
@keyframes highlight-fade { 0% { background: var(--div-f); } 100% { background: transparent; } }
.lscr{flex:1;overflow-y:auto}.lscr::-webkit-scrollbar{display:none}
.mhdr{display:flex;justify-content:space-between;align-items:center;padding:7px 14px;
  background:var(--paper-mid);border-bottom:2px solid var(--div);border-top:1px solid var(--div-f)}
.mname{font-family:'Libre Baskerville',serif;font-size:11px;color:var(--navy);letter-spacing:2px;text-transform:uppercase}
.lrow{display:grid;grid-template-columns:1fr 82px;padding:9px 14px;
  border-bottom:1px solid var(--rule);border-left:3px solid transparent;
  align-items:center;cursor:pointer;background:var(--paper)}
.lrow:hover{background:var(--paper-alt)}
.lrow.inc{border-left-color:var(--pay);background:var(--pay-f)}
.lrow.exp{border-left-color:var(--red);background:var(--red-f)}
.ln{font-size:14px;color:var(--ink);font-family:'Courier Prime',monospace}
.ls{font-size:14px;color:var(--ink-dim);font-style:italic;margin-top:1px}
.la{font-size:14px;font-weight:700;font-family:'Courier Prime',monospace;text-align:right}
.la.pos{color:var(--pay)}.la.neg{color:var(--red)}
/* JOBS */
.jscr{flex:1;overflow-y:auto}.jscr::-webkit-scrollbar{display:none}
.slbl{padding:7px 14px 5px;font-size:15px;text-transform:uppercase;letter-spacing:2px;
  color:var(--ink-dim);font-weight:700;background:var(--paper-mid);
  border-bottom:2px solid var(--div-f);font-family:'Courier Prime',monospace}
.jrow{display:flex;align-items:center;padding:12px 14px;gap:10px;
  border-bottom:1px solid var(--rule);background:var(--paper);cursor:pointer}
.jrow:hover{background:var(--paper-alt)}
.jicon{width:34px;height:34px;border:1px solid var(--div-f);border-radius:2px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--paper-alt);font-size:16px;color:var(--navy-mid)}
.jmain{flex:1;min-width:0}
.jclient{font-size:14px;color:var(--ink);font-weight:700;font-family:'Courier Prime',monospace}
.jdet{font-size:14px;color:var(--ink-dim);font-style:italic;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jright{text-align:right;flex-shrink:0}
.jfee{font-family:'Libre Baskerville',serif;font-size:14px;color:var(--navy)}
.jbadge{display:inline-block;font-size:11px;padding:2px 6px;border:1px solid;border-radius:1px;
  margin-top:3px;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-family:'Courier Prime',monospace}
.bp{border-color:var(--amber);color:var(--amber)}
.bpd{border-color:var(--pay);color:var(--pay)}
/* ADD FORM */
.fscr{flex:1;overflow-y:auto;padding:14px 16px}.fscr::-webkit-scrollbar{display:none}
.tpick{display:flex;gap:8px;margin-bottom:14px}
.tpb{flex:1;border:1px solid var(--div-f);background:var(--paper);border-radius:2px;padding:12px 4px;text-align:center;cursor:pointer}
.tpb.active{background:var(--navy);border-color:var(--navy)}
.tplbl{font-size:10px;color:var(--ink);font-family:'Courier Prime',monospace;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.tpb.active .tplbl{color:#D0DCFA}
.fl{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-dim);margin-bottom:4px;font-weight:700;display:block;font-family:'Courier Prime',monospace}
.fi{width:100%;background:var(--paper);border:1px solid var(--div-f);
  border-bottom:1px solid var(--rule-s);border-radius:1px;
  padding:9px 10px;color:var(--ink);font-size:15px;font-family:'Courier Prime',monospace;margin-bottom:10px}
input[type='date'].fi, input[type='time'].fi { width:100%; max-width:100%; display:block; }
.fi:focus{outline:none;border-color:var(--navy)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fr2>div,.fr3>div{min-width:0}
.fr2 .fi,.fr3 .fi{min-width:0;width:100%;max-width:100%;overflow:hidden}
::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.freqs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.fqb{font-family:'Courier Prime',monospace;font-size:8px;padding:5px 9px;
  border:1px solid var(--navy-mid);border-radius:1px;color:var(--navy);
  cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-weight:700;background:transparent}
.fqb.active{background:var(--navy);color:#D0DCFA;border-color:var(--navy)}
.btnp{width:100%;background:var(--navy);color:#D0DCFA;border:none;border-radius:2px;
  padding:13px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Libre Baskerville',serif;letter-spacing:2px;text-transform:uppercase;margin-top:4px}
/* SETTINGS */
.sscr{flex:1;overflow-y:auto}.sscr::-webkit-scrollbar{display:none}
.ssec{padding:7px 14px 5px;font-size:15px;text-transform:uppercase;letter-spacing:2px;
  color:var(--ink-dim);font-weight:700;background:var(--paper-mid);
  border-bottom:2px solid var(--div-f);font-family:'Courier Prime',monospace}
.srow{display:flex;align-items:center;padding:12px 14px;gap:10px;
  border-bottom:1px solid var(--rule);background:var(--paper);cursor:pointer}
.srow:hover{background:var(--paper-alt)}
.sn{font-size:15px;color:var(--ink);font-family:'Courier Prime',monospace;font-weight:700;flex:1}
.sd{font-size:15px;color:var(--ink-dim);font-style:italic;margin-top:2px}
.sv{font-size:15px;color:var(--ink-dim);font-family:'Courier Prime',monospace;
  max-width:110px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sch{color:var(--navy-dim);font-size:14px;flex-shrink:0}
.dbxd{width:8px;height:8px;border-radius:50%;background:var(--pay);flex-shrink:0}
/* TABS */
.tabs{display:flex;background:var(--navy);height:var(--tab-h);flex-shrink:0;border-top:3px solid var(--navy-mid)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;cursor:pointer;color:rgba(180,200,240,0.28);
  border-right:1px solid rgba(255,255,255,0.05);padding-top:2px}
.tab.active{color:#D0DCFA;background:rgba(255,255,255,0.05)}
.tab svg{width:18px;height:18px;stroke-width:1.5}
.tab span{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-family:'Courier Prime',monospace}
/* FAB */
.fab{position:absolute;bottom:calc(var(--tab-h) + 13px);right:14px;width:44px;height:44px;
  background:var(--navy);border:1px solid var(--div-f);border-radius:2px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 3px 14px rgba(30,58,110,0.45)}
.fab svg{width:20px;height:20px;stroke:#D0DCFA;stroke-width:2.5}
.view{display:none;flex-direction:column;flex:1;overflow:hidden}
.view.active{display:flex}

html,body{height:100%;min-height:100dvh;overflow:hidden;background:var(--paper)}
#app{position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;max-width:430px;margin:0 auto;background:var(--paper);background-image:repeating-linear-gradient(transparent,transparent 27px,var(--rule) 27px,var(--rule) 28px)}
@media (min-width:600px){
  body{padding:28px 16px}
  #app{height:auto;min-height:680px;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);max-width:480px;border-radius:14px;overflow:hidden;box-shadow:0 24px 64px rgba(20,30,15,0.35),0 2px 8px rgba(20,30,15,0.18);border:1px solid var(--rule-s)}
}
@media (min-width:900px){
  #app{max-width:560px}
  .cday{min-height:58px}
}
#screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--tab-h) + 8px)}
#screen::-webkit-scrollbar{display:none}
#tabs{display:flex;background:var(--navy);border-top:3px solid var(--navy-mid);height:var(--tab-h);position:relative;z-index:100}
.overlay{position:fixed;inset:0;background:rgba(10,20,35,0.55);z-index:500;opacity:0;transition:opacity .25s;pointer-events:none}
.overlay.show{opacity:1;pointer-events:all}
.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;background:var(--paper-alt);border-top:3px solid var(--navy);z-index:600;transition:transform .3s cubic-bezier(.32,.72,0,1);border-radius:10px 10px 0 0}
@media (min-width:600px){.sheet{max-width:480px;border-radius:14px}}
@media (min-width:900px){.sheet{max-width:560px}}
.sheet.show{transform:translateX(-50%) translateY(0)}
.shandle{width:32px;height:3px;background:var(--div);border-radius:2px;margin:10px auto;opacity:0.5}
.stitle{font-family:'Libre Baskerville',serif;font-size:15px;color:var(--navy);letter-spacing:2px;text-transform:uppercase;padding:6px 16px 11px;border-bottom:2px solid var(--div-f)}
.sbody{padding:14px 16px;max-height:76vh;overflow-y:auto}
.sbody::-webkit-scrollbar{display:none}
.miles-hint{font-size:10px;color:var(--ink-dim);font-style:italic;margin:-6px 0 10px;min-height:16px}
.invl{display:flex;gap:6px;margin-bottom:8px;align-items:center}
.invl input{background:var(--paper);border:1px solid var(--div-f);border-bottom:1px solid var(--rule-s);border-radius:1px;padding:8px 10px;color:var(--ink);font-size:13px;font-family:'Courier Prime',monospace}
.invl input:focus{outline:none;border-color:var(--navy)}
.idesc{flex:2}.iamt{flex:1}
.idel{width:30px;height:36px;background:var(--red-f);border:1px solid rgba(160,48,32,0.25);border-radius:1px;color:var(--red);cursor:pointer;font-size:16px;flex-shrink:0}
.btnd{width:100%;background:var(--red-f);color:var(--red);border:1px solid rgba(160,48,32,0.28);border-radius:2px;padding:11px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Courier Prime',monospace;letter-spacing:1px;text-transform:uppercase;margin-top:6px}
.btns{width:100%;background:var(--paper-mid);color:var(--ink);border:1px solid var(--rule-s);border-radius:2px;padding:11px;font-size:12px;font-weight:700;cursor:pointer;margin-top:6px;font-family:'Courier Prime',monospace;letter-spacing:1px;text-transform:uppercase}

/* ── ONBOARDING (from ledgery_blank.html) ──────────── */
.ob{position:fixed;inset:0;width:100%;max-width:430px;background:var(--paper);z-index:2000;display:flex;flex-direction:column;margin:0 auto;background-image:repeating-linear-gradient(transparent,transparent 27px,var(--rule) 27px,var(--rule) 28px)}
@media (min-width:600px){.ob{top:28px;bottom:28px;height:auto;max-width:480px;border-radius:14px;overflow:hidden;box-shadow:0 24px 64px rgba(20,30,15,0.35);border:1px solid var(--rule-s)}}
@media (min-width:900px){.ob{max-width:560px}}
.ob-pips{display:flex;gap:5px;padding:52px 28px 0}
.ob-pip{height:3px;flex:1;background:var(--rule-s);border-radius:2px}
.ob-pip.done{background:var(--navy)}
.ob-pip.act{background:var(--div)}
.ob-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 28px 16px;overflow-y:auto}
.ob-body::-webkit-scrollbar{display:none}
.ob-icon{font-size:52px;text-align:center;margin-bottom:20px}
.ob-title{font-family:'Libre Baskerville',Georgia,serif;font-size:24px;color:var(--navy);letter-spacing:3px;text-transform:uppercase;text-align:center;margin-bottom:8px;line-height:1.2}
.ob-title .yt{color:var(--div);font-style:italic}
.ob-sub{font-size:13px;color:var(--ink-dim);font-style:italic;text-align:center;line-height:1.7;margin-bottom:24px;font-family:'Courier Prime',monospace}
.ob-foot{padding:20px 28px 32px;border-top:1px solid var(--rule-s);background:var(--paper-alt);flex-shrink:0}
.ob-btn{width:100%;background:var(--navy);color:#D0DCFA;border:none;border-radius:2px;padding:15px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Libre Baskerville',serif;letter-spacing:2px;text-transform:uppercase}
.ob-skip{display:block;text-align:center;margin-top:12px;font-size:10px;color:var(--ink-dim);cursor:pointer;font-family:'Courier Prime',monospace;letter-spacing:1px;text-transform:uppercase;text-decoration:underline}
.sync-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--rule-s);border-radius:2px;cursor:pointer;background:var(--paper);margin-bottom:10px;transition:border-color .15s}
.sync-opt:hover{border-color:var(--navy)}
.sync-opt.off{opacity:0.45;cursor:default}
.sync-icon{font-size:24px;flex-shrink:0;width:32px;text-align:center}
.sync-name{font-size:13px;font-weight:700;font-family:'Courier Prime',monospace;color:var(--ink)}
.sync-desc{font-size:10px;color:var(--ink-dim);font-style:italic;margin-top:2px}
.ob-note{font-size:10px;color:var(--ink-dim);font-style:italic;line-height:1.6;padding:10px 12px;border:1px solid var(--rule-s);background:var(--paper-light);margin-top:4px}
