@font-face{font-family:NeedMood;src:url('./needmood.ttf') format('truetype');font-display:swap} :root{--sky:#DDF4F2;--cream:#FDF8F2;--ink:#70536F;--muted:#948397;--blue:#A7DDE2;--blue2:#DCEFEB;--pink:#F8DCE7;--mint:#DDF0E8;--peach:#F8E9D9;--line:#EDE4EB;--shadow:0 8px 24px #A7DDE21C}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:NeedMood,'Trebuchet MS',sans-serif;font-size:16px;background-image:radial-gradient(#C8EAE7 0.65px,transparent .65px);background-size:18px 18px}.app-shell{max-width:760px;margin:auto;min-height:100dvh;background:linear-gradient(180deg,#F5F4F0 0,#FDF8F2 35%);position:relative;padding-bottom:88px}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:13px 17px;background:#FDF8F2E8;backdrop-filter:blur(12px);border-bottom:1px solid #EDE4EB}.brand{display:flex;align-items:center;gap:10px}.logo{width:46px;height:46px;border-radius:16px;background:var(--sky);display:grid;place-items:center;font-size:27px;box-shadow:var(--shadow)}.brand-name{font-size:19px;font-weight:bold;letter-spacing:.2px}.brand-sub{font-size:10px;color:var(--muted);margin-top:2px}.today-pill{font-size:11px;background:white;border:1px solid var(--line);padding:8px 11px;border-radius:20px;color:var(--muted)}.main{padding:18px 15px 20px}.page-head{display:flex;justify-content:space-between;align-items:center;margin:3px 2px 16px}.page-head h1{font-size:25px;margin:0}.eyebrow{font-size:11px;color:#8FBABD;letter-spacing:1px;text-transform:uppercase}.subtitle{font-size:12px;color:var(--muted);margin-top:4px}.btn{border:0;border-radius:15px;padding:12px 16px;font:inherit;font-size:14px;background:var(--blue);color:#72536F;box-shadow:0 4px 12px #A7DDE255;cursor:pointer}.btn:active{transform:scale(.98)}.btn.soft{background:#fff;border:1px solid var(--line);box-shadow:none}.btn.pink{background:var(--pink);color:#9B657C}.btn.mint{background:var(--mint);color:#668A79}.btn.small{padding:8px 11px;font-size:12px;border-radius:11px}.btn.danger{background:#FCE9E5;color:#C17C78}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.metric{padding:14px;border-radius:20px;background:white;border:1px solid #EDE4EB;box-shadow:var(--shadow);min-height:100px;position:relative;overflow:hidden}.metric:after{content:'';position:absolute;width:68px;height:68px;border-radius:50%;right:-18px;top:-22px;background:var(--bubble,var(--sky));opacity:.65}.metric .ico{font-size:20px}.metric .label{font-size:11px;color:var(--muted);margin-top:8px}.metric .value{font-size:23px;font-weight:bold;margin-top:2px}.metric .hint{font-size:10px;color:#A39AA5;margin-top:2px}.section{margin-top:22px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:0 2px 11px}.section-title h2{font-size:17px;margin:0}.card{background:#fff;border:1px solid #EDE4EB;border-radius:20px;padding:14px;box-shadow:var(--shadow);margin-bottom:11px}.row{display:flex;align-items:center;justify-content:space-between;gap:9px}.muted{color:var(--muted);font-size:12px}.empty{text-align:center;padding:30px 12px;color:#91A7A6;font-size:13px}.empty .big{font-size:32px;margin-bottom:8px}.nav-item{border:0;background:transparent;color:#91A7A6;font:inherit;font-size:9px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;flex:1;padding:8px 1px}.nav-item .nav-ico{font-size:19px;line-height:1.2}.nav-item.active{color:#5D9294}.nav-item.active .nav-ico{background:var(--sky);border-radius:12px;padding:5px 11px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);display:flex;justify-content:space-around;padding:7px 4px calc(7px + env(safe-area-inset-bottom));background:#FDF8F2E8;backdrop-filter:blur(14px);border-top:1px solid #EDE4EB;z-index:8}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.menu-tile{background:white;border:1px solid #EDE4EB;border-radius:18px;padding:13px;text-align:left;box-shadow:var(--shadow);color:var(--ink);font:inherit;cursor:pointer}.menu-tile .dish{font-size:14px;font-weight:bold;min-height:37px}.menu-tile .price{font-size:16px;color:#5D9294;margin-top:6px}.menu-tile .tag{font-size:10px;color:#A39AA5}.field{width:100%;border:1px solid #E8E4ED;background:#fff;border-radius:13px;padding:11px 12px;font:inherit;color:var(--ink);outline:none}.field:focus{border-color:#A7DDE2;box-shadow:0 0 0 3px #DDF4F2}.field-label{font-size:12px;color:#8B8293;display:block;margin:12px 0 6px}.chip{border:1px solid #E8E4ED;border-radius:30px;padding:8px 11px;background:#fff;color:#7F8F94;font:inherit;font-size:12px;cursor:pointer}.chip.selected{background:#DDF4F2;border-color:#A7DDE2;color:#6E687F}.choice-wrap{display:flex;flex-wrap:wrap;gap:7px}.qty-row{display:flex;align-items:center;gap:7px}.qty-row button{width:27px;height:27px;border:0;border-radius:9px;background:var(--sky);color:#5D9294;font-size:17px}.qty{min-width:17px;text-align:center}.list-item{padding:12px 0;border-bottom:1px solid #F0EAF0}.list-item:last-child{border-bottom:0}.pill{display:inline-block;padding:5px 9px;border-radius:20px;background:#E4F2F0;font-size:10px;color:#648F95}.pill.pink{background:#FBE9EF;color:#A96F88}.pill.mint{background:#E7F2E9;color:#668A79}.order-line{font-size:13px;line-height:1.6;color:#7F8F94}.total-line{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}.total-line strong{font-size:16px}.modal-backdrop{position:fixed;inset:0;background:#806B8055;z-index:20;display:flex;align-items:flex-end;justify-content:center}.modal{width:min(100%,650px);max-height:92dvh;overflow:auto;background:var(--cream);border-radius:25px 25px 0 0;padding:18px 17px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px #70536F22}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.modal-head h2{margin:0;font-size:20px}.close{border:0;background:#E4F2F0;border-radius:50%;width:34px;height:34px;font-size:19px;color:#6F8D91}.modal-actions{display:flex;gap:8px;margin-top:17px}.modal-actions>*{flex:1}.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,20px);opacity:0;transition:.25s;background:#765A78;color:white;padding:10px 16px;border-radius:22px;font-size:12px;z-index:50;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.date-row{display:flex;gap:8px;align-items:center}.date-row .field{flex:1}.chart{height:130px;display:flex;align-items:end;gap:7px;padding:12px 2px 0}.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:end}.bar{width:100%;max-width:28px;background:linear-gradient(180deg,#B9E5E4,#E1F1EF);border-radius:8px 8px 3px 3px;min-height:3px}.bar-label{font-size:9px;color:#91A7A6}.bar-val{font-size:9px;color:#6F9298}.print-only{display:none}@media(min-width:600px){.main{padding:23px 22px}.grid{grid-template-columns:repeat(3,1fr)}.menu-grid{grid-template-columns:repeat(3,1fr)}}@media print{body{background:white}.app-shell,.modal-backdrop,.toast{display:none!important}.print-only{display:block!important}}

/* V4: keep native date controls inside their cards on iPhone Safari */
.card input.field[type="date"],
.section-title input.field[type="date"],
.date-row input.field[type="date"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.date-row input.field[type="date"] {
  flex: 0 1 150px;
}
@media (max-width: 420px) {
  .date-row.card { flex-wrap: wrap; }
  .date-row.card > div { min-width: 0; }
  .date-row.card input.field[type="date"] { flex: 1 1 100%; }
  .section-title input.field[type="date"] { max-width: 46vw; }
}

/* V5: compact History and Report date fields on iPhone */
#historyDate,
#reportDate {
  display: block;
  width: 250px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* V6: reduce the Dashboard New Order call-to-action size */
.page-head .dashboard-cta {
  flex: 0 0 150px;
  width: 150px;
  min-height: 76px;
  padding: 10px 14px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.45;
  align-self: center;
}
@media (max-width: 420px) {
  .page-head .dashboard-cta {
    flex-basis: 126px;
    width: 126px;
    min-height: 68px;
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* V7: compact two-column add-on cards inside the item customizer */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 10px 0 14px;
}
.addon-card {
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  padding: 11px 10px;
  border: 1px solid #EDE4EB;
  border-radius: 13px;
  background: rgba(255,255,255,.86);
}
.addon-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.addon-info b {
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.addon-info .muted {
  font-size: 11px;
  line-height: 1.25;
}
.addon-qty {
  width: 100%;
  justify-content: space-between;
  gap: 5px;
}
.addon-qty button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 9px;
  font-size: 17px;
}
.addon-qty .qty {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
}

/* V8: tidy four actions on draft order cards */
.draft-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.draft-actions .btn {
  width: 100%;
  min-width: 0;
  white-space: normal;
  padding-left: 8px;
  padding-right: 8px;
}

/* V9: compact New Customer action in My Cart header */
.page-head .dashboard-cta {
  flex: 0 0 126px;
  width: 126px;
  min-height: 58px;
  padding: 8px 10px;
  font-size: 12px;
}

/* V10: make the new-customer action compact */
.page-head .dashboard-cta {
  flex: 0 0 126px;
  width: 126px;
  min-height: 58px;
  padding: 8px 10px;
  font-size: 12px;
}

/* V12 — Expense invoice form */
.expense-entry{padding:18px;border:1.5px solid #C8EAE7;background:#FFFCF8}
.expense-entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.expense-entry-head h2{margin:0 0 5px;color:#69B9C2}
.expense-entry-head .muted{max-width:260px;line-height:1.45}
.expense-add-btn{flex:0 0 112px;min-height:62px;white-space:normal;line-height:1.25;background:linear-gradient(135deg,#69B9C2,#A7DDE2);color:white}
.expense-item-card{border:1.5px solid #E8E4ED;border-radius:18px;background:white;padding:14px;margin:12px 0}
.expense-item-top{display:flex;align-items:center;justify-content:space-between;color:#A7DDE2;margin-bottom:12px}
.expense-item-fields{display:grid;grid-template-columns:1.25fr .8fr 1.15fr;gap:9px}
.expense-item-fields label{min-width:0;display:flex;flex-direction:column;gap:6px;color:#8B8293;font-size:11px;font-weight:700;letter-spacing:.06em}
.expense-item-fields .field{min-width:0;width:100%;box-sizing:border-box;padding:10px 9px;font-size:14px}
.expense-item-total{text-align:right;color:#69B9C2;font-weight:700;margin-top:10px}
.expense-total-box{margin:16px 0 20px;padding:16px;border-radius:20px;background:linear-gradient(120deg,#E4D5E9,#D8EDEB);color:#69B9C2}
.expense-total-box>.row{font-size:20px}
.expense-total-box>.row strong,.expense-final strong{font-size:24px}
.expense-round-row{display:flex;justify-content:space-between;border-top:1px dashed #C8E3E1;margin-top:12px;padding-top:10px;color:#95899B}
.round-btn{width:100%;margin:12px 0;background:#C8EAE7;color:#69B9C2}
.expense-final{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-radius:15px;background:#F5F4F0;font-size:18px}
.expense-entry>.field-label{display:block;margin:15px 0 7px}
.expense-supplier-row{display:flex;gap:8px;align-items:center}
.expense-supplier-row select{flex:1;min-width:0}
.expense-supplier-row button{flex:0 0 auto}
.expense-today-row{display:flex;justify-content:flex-end;margin-top:8px}
.expense-save-btn{width:100%;margin-top:18px;min-height:58px;background:linear-gradient(135deg,#69B9C2,#A7DDE2);color:white}
.expense-history{margin-top:18px}
.expense-filter-row{display:flex;gap:9px;align-items:center;margin:12px 0}
.expense-filter-row input{flex:1;min-width:0}
.expense-record{border-bottom:1px solid #EDE4EB;padding:13px 0}
.expense-record-item{display:flex;justify-content:space-between;gap:8px;padding:5px 0;color:#8B8293;font-size:13px}
@media(max-width:420px){.expense-entry{padding:14px}.expense-item-fields{grid-template-columns:1.1fr .65fr 1fr;gap:6px}.expense-item-fields .field{padding:9px 7px;font-size:13px}.expense-add-btn{flex-basis:100px}}

/* V13 — Daily / Monthly report selector */
.report-controls{padding:16px}
.report-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.report-mode .btn{min-height:48px}
.report-period-input{max-width:100%;box-sizing:border-box}
.report-day-head,.report-day-row{display:grid;grid-template-columns:1.1fr 1.25fr 1fr 1fr 1fr;gap:6px;align-items:center}
.report-day-head{font-size:10px;color:#95899B;padding:10px 0;border-bottom:1px solid #EDE4EB}
.report-day-row{font-size:11px;color:#7F8F94;padding:12px 0;border-bottom:1px solid #F0EAF0}
.report-day-row strong{color:#70536F}
@media(max-width:430px){.report-day-head,.report-day-row{grid-template-columns:1.05fr 1.2fr .9fr .9fr .9fr;gap:3px;font-size:9px}.report-day-row{font-size:10px}}

/* V14 — Compact report date/month selector */
.report-period-input{
  display:block;
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  margin-top:8px;
}
@media(max-width:480px){
  .report-period-input{
    width:100%;
    max-width:240px;
    margin-left:0;
    margin-right:auto;
  }
}

/* V15 — Force compact native date/month input on iPhone Safari */
.card.report-controls input#reportPeriod.field.report-period-input{
  display:block !important;
  box-sizing:border-box !important;
  width:240px !important;
  min-width:0 !important;
  max-width:240px !important;
  inline-size:240px !important;
  flex:0 1 240px !important;
  justify-self:start !important;
  -webkit-appearance:none;
  appearance:none;
}
@media(max-width:480px){
  .card.report-controls input#reportPeriod.field.report-period-input{
    width:240px !important;
    max-width:240px !important;
    inline-size:240px !important;
  }
}

/* V16 — Keep typography compact and consistent throughout Expense */
.expense-page{font-size:13px}
.expense-page .page-head h1{font-size:23px;line-height:1.25;letter-spacing:.08em}
.expense-page .page-head .subtitle{font-size:11px;line-height:1.5}
.expense-page h2,
.expense-page .expense-entry-head h2,
.expense-page .expense-history h2{font-size:14px;line-height:1.4;letter-spacing:.08em}
.expense-page .muted,
.expense-page .field-label{font-size:11px;line-height:1.5}
.expense-page .expense-item-top,
.expense-page .expense-item-fields label{font-size:10px;letter-spacing:.05em}
.expense-page .expense-item-fields .field,
.expense-page .field{font-size:13px !important}
.expense-page .expense-item-total{font-size:13px;font-weight:600}
.expense-page .expense-total-box>.row{font-size:14px}
.expense-page .expense-total-box>.row strong,
.expense-page .expense-final strong{font-size:15px}
.expense-page .expense-round-row{font-size:12px}
.expense-page .expense-final{font-size:14px}
.expense-page .btn{font-size:12px}
.expense-page .expense-record-item{font-size:12px}
.expense-page .expense-entry-head{gap:8px}
.expense-page .expense-entry-head h2{margin-bottom:4px}

/* V17 — Match Cart, History and Report typography to compact Expense sizing */
.compact-page{font-size:13px}
.compact-page .page-head h1{font-size:23px !important;line-height:1.25 !important;letter-spacing:.08em}
.compact-page .page-head .subtitle{font-size:11px !important;line-height:1.5 !important}
.compact-page h2{font-size:14px !important;line-height:1.4 !important;letter-spacing:.08em}
.compact-page .muted,
.compact-page .field-label,
.compact-page label{font-size:11px;line-height:1.5}
.compact-page .field,
.compact-page input,
.compact-page select,
.compact-page textarea{font-size:13px !important}
.compact-page .btn{font-size:12px !important}
.compact-page .pill{font-size:10px !important}
.compact-page .total-line,
.compact-page .line,
.compact-page .row,
.compact-page .empty{font-size:12px}
.compact-page .total-line strong,
.compact-page .total-line b{font-size:14px}
.compact-page .report-day-head{font-size:10px}
.compact-page .report-day-row{font-size:10px}
.compact-page .report-controls .report-mode .btn{font-size:12px !important}
.compact-page .report-period-input{font-size:13px !important}
.compact-page .draft-actions .btn{font-size:11px !important}


/* V18 — Global typography reset: match the compact Expense page scale
   Applied across every POS tab, modal, card, list, and navigation item. */
body{
  font-size:13px !important;
}
body .page-head h1{
  font-size:23px !important;
  line-height:1.25 !important;
  letter-spacing:.08em !important;
}
body .page-head .subtitle,
body .subtitle{
  font-size:11px !important;
  line-height:1.5 !important;
}
body .eyebrow{
  font-size:10px !important;
  letter-spacing:.12em !important;
}
body h2,
body .section-title h2,
body .modal-head h2{
  font-size:14px !important;
  line-height:1.4 !important;
  letter-spacing:.07em !important;
}
body h3{
  font-size:13px !important;
  line-height:1.4 !important;
}
body .card,
body .section,
body .list-item,
body .order-line,
body .muted,
body .empty,
body .field-label,
body label{
  font-size:11px;
  line-height:1.5;
}
body .btn,
body button.btn,
body .chip,
body .pill{
  font-size:12px !important;
  line-height:1.35 !important;
}
body .field,
body input,
body select,
body textarea{
  font-size:13px !important;
  line-height:1.4 !important;
}
body .metric .label{
  font-size:10px !important;
}
body .metric .value{
  font-size:19px !important;
  line-height:1.25 !important;
}
body .metric .hint{
  font-size:9px !important;
}
body .metric .ico{
  font-size:18px !important;
}
body .menu-tile .dish{
  font-size:13px !important;
  line-height:1.4 !important;
}
body .menu-tile .price{
  font-size:14px !important;
}
body .menu-tile .tag,
body .nav-item{
  font-size:9px !important;
}
body .nav-item .nav-ico{
  font-size:18px !important;
}
body .order-line,
body .expense-record-item,
body .report-day-row{
  font-size:11px !important;
}
body .total-line{
  font-size:12px !important;
}
body .total-line strong,
body .total-line b{
  font-size:14px !important;
}
body .modal-head h2{
  font-size:16px !important;
}
body .addon-info b{
  font-size:13px !important;
}
body .addon-info .muted{
  font-size:10px !important;
}
body .addon-qty .qty{
  font-size:12px !important;
}
body .expense-total-box>.row{
  font-size:14px !important;
}
body .expense-total-box>.row strong,
body .expense-final strong{
  font-size:15px !important;
}
body .expense-final{
  font-size:14px !important;
}
body .expense-item-fields label,
body .expense-item-top{
  font-size:10px !important;
}
body .expense-item-fields .field{
  font-size:13px !important;
}
body .report-day-head{
  font-size:9px !important;
}
body .report-day-row{
  font-size:10px !important;
}
body .brand-name{
  font-size:19px !important;
}
body .brand-sub,
body .today-pill{
  font-size:10px !important;
}


/* V19 — Modal typography correction.
   The item customizer and Proceed Payment are rendered in a modal layer;
   explicitly override modal-specific and inline font sizes as well. */
.modal,
.modal *{
  letter-spacing:inherit;
}
.modal{
  font-size:13px !important;
}
.modal .modal-head h2,
.modal h2,
.modal h3{
  font-size:14px !important;
  line-height:1.4 !important;
  letter-spacing:.07em !important;
}
.modal .eyebrow,
.modal .field-label,
.modal label,
.modal p.muted,
.modal .muted{
  font-size:11px !important;
  line-height:1.5 !important;
}
.modal .chip,
.modal .btn,
.modal button.btn{
  font-size:12px !important;
  line-height:1.35 !important;
}
.modal .addon-info b,
.modal .addon-card b{
  font-size:13px !important;
  line-height:1.3 !important;
}
.modal .addon-info .muted{
  font-size:10px !important;
}
.modal .qty-row,
.modal .qty-row .qty,
.modal #dishQty{
  font-size:13px !important;
}
.modal #dishTotal,
.modal .value,
.modal .card .value{
  font-size:19px !important;
  line-height:1.25 !important;
}
.modal .card .row b,
.modal .card .row strong{
  font-size:14px !important;
}
.modal .modal-actions .btn{
  font-size:12px !important;
  min-height:44px;
}
.modal .close{
  font-size:19px !important;
}

/* V21: make the three menu-customization section labels clearer */
.modal .customize-section-label{
  color:#765A78 !important;
  font-weight:700 !important;
  font-size:12px !important;
  letter-spacing:.09em !important;
  line-height:1.45 !important;
  text-shadow:0 .2px 0 currentColor;
}

/* V24 — Prevent iPhone Safari auto-zoom when focusing form controls.
   iOS Safari zooms inputs whose computed font-size is below 16px. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
[contenteditable="true"] {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}



/* V26: prevent iOS Safari focus zoom on every editable control.
   iOS zooms inputs when their computed font-size is below 16px. */
input, select, textarea,
.field, .expense-item-fields .field {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}


/* V27 — iPhone PWA input focus: keep the actual rendered text at 16 CSS px.
   Do not scale text-size-adjust below 100%, as that can re-trigger focus zoom. */
html, body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
[contenteditable="true"],
.field,
.expense-page .expense-item-fields .field {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}


/* V28 — Use the user's original pastel watercolor star background throughout the POS.
   Cards remain white for legibility; header and bottom navigation remain translucent. */
body {
  background-color: #FDF8F2 !important;
  background-image: url('/pos-background.jpeg') !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
.app-shell {
  background: rgba(252, 250, 245, 0.20) !important;
}
.topbar {
  background: rgba(248, 252, 249, 0.84) !important;
}
.bottom-nav {
  background: rgba(255, 254, 250, 0.88) !important;
}
@media print {
  body {
    background: #fff !important;
    background-image: none !important;
  }
}

/* V31 History payment summary */
.history-controls .field-label:first-child{margin-top:0}.payment-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.payment-stat-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;box-shadow:var(--shadow);border-top:3px solid var(--payment-accent)}.payment-stat-title{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}.payment-stat-title b{font-size:18px;color:var(--ink)}.payment-stat-details{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;color:var(--muted);font-size:11px}.history-controls select{margin-bottom:2px}


/* V32 — Expense page palette sampled from the user's pastel star watercolor reference.
   Color-only overrides: preserve typography, sizing, spacing, layout and background image. */
.expense-page .page-head h1 { color:#B982A6; }
.expense-page .page-head .subtitle { color:#9B8BA0; }
.expense-page .eyebrow { color:#83C8C6; }
.expense-page .expense-entry { border-color:#D9EEE9 !important; background:rgba(255,252,248,.94) !important; }
.expense-page .expense-entry-head h2 { color:#77C5C4 !important; }
.expense-page .expense-entry-head .muted { color:#9B8BA0 !important; }
.expense-page .expense-add-btn { background:linear-gradient(135deg,#F3C9D9 0%,#DCCFEA 52%,#CDECE7 100%) !important; color:#765A78 !important; box-shadow:0 5px 15px rgba(219,190,216,.22) !important; }
.expense-page .expense-item-card { border-color:#E9DDEB !important; background:rgba(255,255,255,.93) !important; }
.expense-page .expense-item-card:nth-child(5n+1) { border-color:#EBDCEB !important; }
.expense-page .expense-item-card:nth-child(5n+2) { border-color:#D9EEE9 !important; }
.expense-page .expense-item-card:nth-child(5n+3) { border-color:#F4DFE5 !important; }
.expense-page .expense-item-card:nth-child(5n+4) { border-color:#F3E6C9 !important; }
.expense-page .expense-item-top { color:#9ED8D2 !important; }
.expense-page .expense-item-fields label { color:#94869A !important; }
.expense-page .expense-item-total { color:#79BFC3 !important; }
.expense-page .expense-total-box { background:linear-gradient(120deg,#F4E2EF 0%,#E7E0F0 42%,#DDF1ED 100%) !important; color:#75BFC2 !important; }
.expense-page .expense-round-row { color:#9A8DA0 !important; border-top-color:#DCCFE8 !important; }
.expense-page .round-btn { background:linear-gradient(90deg,#F9E8C8 0%,#F7E3E9 52%,#E3F3EF 100%) !important; color:#806A83 !important; }
.expense-page .expense-final { background:linear-gradient(90deg,#FFFCF8 0%,#F8EEF3 50%,#EFF8F5 100%) !important; color:#806A83 !important; }
.expense-page .expense-entry .field, .expense-page .expense-filter-row .field { border-color:#E8DFEA !important; background:rgba(255,255,255,.96) !important; }
.expense-page .expense-entry .field:focus, .expense-page .expense-filter-row .field:focus { border-color:#B9DFE0 !important; box-shadow:0 0 0 3px rgba(221,244,242,.75) !important; }
.expense-page .expense-entry .field-label { color:#9A8DA0 !important; }
.expense-page .expense-entry .btn.soft, .expense-page .expense-history .btn.soft { border-color:#E8DDEB !important; color:#806A83 !important; background:rgba(255,255,255,.94) !important; }
.expense-page .expense-save-btn { background:linear-gradient(110deg,#EFCBDE 0%,#DCCFEA 48%,#CDECE7 100%) !important; color:#70536F !important; box-shadow:0 5px 15px rgba(219,190,216,.20) !important; }
.expense-page .expense-history { border-color:#E9DDEB !important; background:rgba(255,252,248,.93) !important; }
.expense-page .expense-history h2 { color:#B982A6 !important; }
.expense-page .expense-record { border-bottom-color:#EDE2EB !important; }
.expense-page .expense-record-item { color:#94869A !important; }
.expense-page .expense-history .pill { background:#E5F3EE !important; color:#6E9C8B !important; }
.expense-page .expense-history .pill.pink { background:#F8E5EC !important; color:#B27F9B !important; }


/* V33 — History: print all orders for the selected date beside the date label. */
.history-date-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.history-date-heading .field-label{margin:0;flex:1}
.history-print-btn{flex:0 0 auto;white-space:nowrap;padding:8px 13px}