*{box-sizing:border-box} [hidden]{display:none!important} body{margin:0} img{max-width:100%}
/* Layout: one phone-width column on parchment, serif headings like the mockups, bottom tab bar with a central scan button. */
/* Fonts are self-hosted (no requests to Google: GDPR). Licence: SIL OFL, see fonts/. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/playfair-display-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/playfair-display-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/playfair-display-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/playfair-display-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/playfair-display-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/playfair-display-latin-ext-400-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/work-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/work-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/work-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/work-sans-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/work-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/work-sans-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f2eadc; --glow:#fbf6ec; --paper:#fbf7ef; --ink:#2f2924; --muted:#7a6f65; --line:#e3d7c4;
  --taupe:#857a70; --taupe-ink:#faf5ec; --slate:#9fb3bb; --mint:#cdeae7; --mint-ink:#2c4a47;
  --up:#a5533c; --down:#3f7a66; --warn-bg:#f6e4cf;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1e1a17; --glow:#2a241f; --paper:#28231f; --ink:#efe6d8; --muted:#a99d90; --line:#3a332d;
  --taupe:#a59889; --taupe-ink:#1e1a17; --slate:#8aa2ab; --mint:#2c4644; --mint-ink:#cdeae7;
  --up:#e2906f; --down:#8cc6b1; --warn-bg:#3d2f22; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#1e1a17; --glow:#2a241f; --paper:#28231f; --ink:#efe6d8; --muted:#a99d90; --line:#3a332d;
  --taupe:#a59889; --taupe-ink:#1e1a17; --slate:#8aa2ab; --mint:#2c4644; --mint-ink:#cdeae7;
  --up:#e2906f; --down:#8cc6b1; --warn-bg:#3d2f22; color-scheme:dark }

*{box-sizing:border-box}
html,body{min-height:100%}
body{background:radial-gradient(120% 60% at 50% 0%, var(--glow), transparent 70%) var(--bg); background-attachment:fixed; color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:0}
.app{max-width:520px; margin:0 auto; padding-block:14px 120px; display:flex; flex-direction:column; gap:18px}
h1,h2,h3{font-family:var(--display); font-weight:500; margin:0; text-wrap:balance; letter-spacing:.01em}
h1{font-size:1.55rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.label{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:500}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--slate); outline-offset:2px}

.top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px}
.brand svg{width:34px; height:34px; flex:none}
.brand b{font-family:var(--display); font-size:1.3rem; font-weight:500}
.icon-btn{background:none; border:0; padding:8px; border-radius:50%; color:var(--muted); display:grid; place-items:center}
.icon-btn svg{width:22px; height:22px}

.banner{background:var(--mint); color:var(--mint-ink); border-radius:14px; padding:10px 14px; font-size:.85rem; display:flex; gap:10px; align-items:flex-start}
.banner b{font-weight:600}

.monthbar{display:flex; align-items:center; justify-content:center; gap:6px}
.monthbar .m{font-family:var(--display); font-size:1.1rem; min-width:9.5em; text-align:center}
.chev{background:none; border:0; width:36px; height:36px; border-radius:50%; color:var(--muted); font-size:1.3rem}
.chev:disabled{opacity:.3; cursor:default}

.hero{text-align:center; display:flex; flex-direction:column; gap:4px; padding-block:4px}
.hero .big{font-family:var(--display); font-size:2.6rem; line-height:1.1}
.pill{display:inline-flex; align-items:center; gap:6px; align-self:center; padding:4px 12px; border-radius:999px; font-size:.82rem; background:var(--paper); border:1px solid var(--line)}
.pill.up{color:var(--up)} .pill.down{color:var(--down)}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0}
.stat .v{font-family:var(--display); font-size:1.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.section{display:flex; flex-direction:column; gap:10px}
.section-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.linkbtn{background:none; border:0; padding:0; color:var(--muted); font-size:.85rem; text-decoration:underline; text-underline-offset:3px}

.chart{width:100%; height:auto; display:block}
.chart text{fill:var(--muted); font-family:var(--body); font-size:9px}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .bar{fill:var(--taupe); opacity:.45}
.chart .bar.sel{opacity:1}
.chart .avg{stroke:var(--slate); stroke-width:1.5; stroke-dasharray:4 3; fill:none}
.chart .line{stroke:var(--taupe); stroke-width:2; fill:none}
.chart .area{fill:var(--taupe); opacity:.12}
.chart .dot{fill:var(--taupe)}
.chart .base{stroke:var(--slate); stroke-width:1; stroke-dasharray:3 3}
.chart text.end{fill:var(--ink); font-size:10px; font-weight:600}

.ledger{border-top:1.5px solid var(--ink)}
.row{display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:10px; padding:12px 2px; border-bottom:1px solid var(--line); background:none; border-left:0; border-right:0; border-top:0; width:100%; text-align:left}
.row .name{font-family:var(--display); font-size:1.02rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .amt{font-variant-numeric:tabular-nums; font-family:var(--display)}
.row .chev-r{color:var(--muted); transition:transform .15s}
.row[aria-expanded="true"] .chev-r{transform:rotate(90deg)}
.meter{grid-column:2 / 4; height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.meter i{display:block; height:100%; background:var(--taupe)}
.sub{padding:4px 0 10px 32px; display:flex; flex-direction:column; gap:4px; border-bottom:1px solid var(--line)}
.sub div{display:flex; justify-content:space-between; gap:10px; font-size:.88rem}
.sub span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px}
.soon{display:flex; flex-direction:column; gap:6px; border-style:dashed}
.tag{display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--mint); color:var(--mint-ink); font-weight:600}
.tag.scan{background:var(--mint)} .tag.manual{background:var(--line); color:var(--ink)}

.prod{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 2px; border-bottom:1px solid var(--line); width:100%; background:none; border-left:0;border-right:0;border-top:0; text-align:left}
.prod .pn{font-family:var(--display); font-size:1.02rem; text-transform:capitalize; min-width:0}
.prod .pr{text-align:right; font-variant-numeric:tabular-nums}
.prod .meta{font-size:.8rem; color:var(--muted); min-width:0}
.chg{font-size:.8rem; font-variant-numeric:tabular-nums}
.chg.up{color:var(--up)} .chg.down{color:var(--down)} .chg.flat{color:var(--muted)}
.search{width:100%; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit}

.receipt{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 2px; border-bottom:1px solid var(--line); width:100%; background:none; border-left:0;border-right:0;border-top:0; text-align:left}
.receipt .st{font-family:var(--display); font-size:1.02rem}
.receipt .meta{font-size:.8rem; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.btn{border:0; border-radius:999px; padding:12px 20px; background:var(--taupe); color:var(--taupe-ink); font-family:var(--display); font-size:1.02rem; letter-spacing:.02em}
.btn.ghost{background:none; color:var(--ink); border:1px solid var(--line)}
.btn.danger{background:none; color:var(--up); border:1px solid var(--up)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5; cursor:default}

/* bottom bar */
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--paper); border-top:1px solid var(--line);
  padding:6px max(10px, env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(10px, env(safe-area-inset-left,0px))}
.tabs .inner{max-width:520px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 76px 1fr 1fr; align-items:end}
.tab{background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; color:var(--muted); font-size:.72rem}
.tab svg{width:22px; height:22px}
.tab[aria-current="page"]{color:var(--ink); font-weight:600}
.fab{justify-self:center; width:62px; height:62px; border-radius:50%; border:4px solid var(--paper); background:var(--ink); color:var(--paper); display:grid; place-items:center; margin-top:-26px; box-shadow:0 6px 18px rgba(40,30,20,.25)}
.fab svg{width:26px; height:26px}

/* sheet */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(30,24,20,.45); display:flex; align-items:flex-end; justify-content:center}
.sheet{background:var(--bg); width:100%; max-width:560px; max-height:92%; overflow:auto; border-radius:22px 22px 0 0;
  padding:18px max(16px, env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  display:flex; flex-direction:column; gap:14px}
.sheet-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field input,.field select,.item input,.item select{font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 10px; width:100%; min-width:0}
.two{display:grid; grid-template-columns:1.4fr 1fr; gap:10px}
.items{display:flex; flex-direction:column; gap:8px}
.item{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:10px; display:grid; grid-template-columns:1fr 92px 32px; gap:8px; align-items:center}
.item .printed{grid-column:1 / 4; font-size:.75rem; color:var(--muted); font-family:ui-monospace, "SF Mono", Menlo, monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .line2{grid-column:1 / 4; display:grid; grid-template-columns:1.3fr .7fr .9fr; gap:8px}
.item input.price{text-align:right; font-variant-numeric:tabular-nums}
.x{background:none; border:0; color:var(--muted); font-size:1.2rem; width:32px; height:32px; border-radius:50%}
.totals{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--display); font-size:1.15rem; padding-top:6px; border-top:1.5px solid var(--ink)}
.warn{background:var(--warn-bg); border-radius:12px; padding:10px 12px; font-size:.85rem}
.thumb{max-height:220px; width:auto; max-width:100%; align-self:center; border-radius:10px; border:1px solid var(--line)}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.actions .btn{flex:1 1 auto}
.choice{display:flex; flex-direction:column; gap:10px}
.choice button{display:flex; gap:14px; align-items:center; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px}
.choice svg{width:28px; height:28px; flex:none; color:var(--taupe)}
.scanning{display:flex; flex-direction:column; align-items:center; gap:14px; padding-block:10px}
.progress{width:70%; height:14px; border-radius:999px; border:2px solid var(--ink); padding:2px; overflow:hidden}
.progress i{display:block; height:100%; width:40%; border-radius:999px; background:var(--ink); animation:slide 1.4s ease-in-out infinite alternate}
@keyframes slide{from{transform:translateX(-10%)} to{transform:translateX(160%)}}
@media (prefers-reduced-motion:reduce){ .progress i{animation:none; width:60%} }
table.mini{width:100%; border-collapse:collapse; font-size:.88rem}
table.mini td,table.mini th{padding:7px 4px; border-bottom:1px solid var(--line); text-align:left}
table.mini td:last-child,table.mini th:last-child{text-align:right; font-variant-numeric:tabular-nums}
table.mini th{font-weight:500; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em}
.empty{text-align:center; padding:30px 10px; color:var(--muted)}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom,0px)); z-index:60; background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px; font-size:.9rem}
@media (max-width:380px){ .stats{grid-template-columns:1fr 1fr} .hero .big{font-size:2.2rem} }

/* sign-in screen */
.auth{max-width:420px; margin:0 auto; padding-block:8vh 40px; display:flex; flex-direction:column; gap:18px}
.auth .brand{justify-content:center}
.auth .brand svg{width:54px; height:54px}
.auth .brand b{font-size:2rem}
.auth p.lead{text-align:center; color:var(--muted); margin:0}
.auth form{display:flex; flex-direction:column; gap:12px}
.auth .switch{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.msg{border-radius:12px; padding:10px 12px; font-size:.88rem; background:var(--mint); color:var(--mint-ink)}
.msg.err{background:var(--warn-bg); color:var(--ink)}
.foot{text-align:center; font-size:.8rem; color:var(--muted)}
.foot a{color:inherit}
.settings-list{display:flex; flex-direction:column; gap:10px}
:root{color-scheme:light}
.app{padding-top:calc(14px + env(safe-area-inset-top,0px))}
.auth{padding-top:calc(8vh + env(safe-area-inset-top,0px))}