:root{--blue:#145da0;--blue2:#eaf3ff;--ink:#172b3a;--muted:#667887;--line:#dfe7ee;--bg:#f4f7fb;--white:#fff;--green:#13805c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px max(16px,calc((100% - 1050px)/2));display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5}
.brand-mark{width:42px;height:42px;border-radius:13px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:23px}
.topbar small{display:block;color:var(--muted);font-size:12px}
.topbar button{margin-left:auto}
main{max-width:1050px;margin:24px auto;padding:0 16px}
.auth-card,.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px;box-shadow:0 5px 20px #153b5708}
.auth-card{max-width:480px;margin:48px auto}
h1{font-size:clamp(25px,4vw,34px);margin:4px 0 8px}
h2{font-size:19px;margin:0 0 5px}
h3{font-size:16px}
.muted,small{color:var(--muted)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--blue);margin:0 0 6px}
.small{font-size:12px}
.hidden{display:none!important}
label{display:block;font-size:13px;font-weight:650;margin:12px 0;color:#314858}
input,textarea{display:block;width:100%;font:inherit;color:var(--ink);padding:12px;border:1px solid #cfdbe5;border-radius:10px;background:#fff;margin-top:6px;min-width:0}
input:focus,textarea:focus{outline:2px solid #b7d9ff;border-color:var(--blue)}
button{border:0;border-radius:10px;background:var(--blue);color:#fff;font:inherit;font-weight:700;padding:12px 16px;cursor:pointer;min-height:44px}
button.secondary,.quiet{background:var(--blue2);color:var(--blue)}
.quiet{padding:8px 12px}
.auth-actions,.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.welcome-row,.section-head,.total-row,.receipt-meta{display:flex;align-items:center;justify-content:space-between;gap:14px}
.welcome-row{margin-bottom:18px}
.online-pill,.bill-chip{background:#e5f7ef;color:var(--green);padding:7px 11px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.bill-chip{background:var(--blue2);color:var(--blue)}
.tabs{display:flex;gap:8px;margin-bottom:16px;overflow:auto;padding-bottom:3px}
.tab{background:#e8eef5;color:#506577;white-space:nowrap}
.tab.active{background:var(--blue);color:white}
.fields{display:grid;gap:0 14px}
.fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-head{margin-bottom:12px}
.items-head{margin-top:28px}
.table-wrap{overflow-x:auto;width:100%}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:9px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:#5b7080;background:#f7f9fc;font-size:11px}
td input{width:90px;padding:8px;margin:0}
td .item-name{width:130px}
td button{padding:6px 9px;min-height:34px;background:#fff0f0;color:#ad3434}
.total-row{border-top:1px solid var(--line);padding:18px 0;margin-top:12px;font-size:17px}
.total-row strong{font-size:25px;color:var(--blue)}
.receipt{max-width:700px;margin:18px auto}
.receipt h2{text-align:center;margin-top:8px}
.receipt>p{text-align:center;margin:4px}
.receipt .receipt-meta{margin:18px 0}
.receipt .total-row{margin-top:8px}
.signature{text-align:left!important;margin-top:28px!important}
.saved-list{margin-top:14px}
.bill-card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.bill-card p{margin:3px 0}
.bill-card .actions{display:flex;gap:6px;flex-wrap:wrap}
.bill-card button{padding:8px 10px;min-height:38px;font-size:13px}
.message{font-size:13px;color:var(--blue);min-height:18px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
footer{text-align:center;padding:20px;color:var(--muted);font-size:12px}

@media(min-width:800px){
  #newPage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:18px;align-items:start}
  .receipt{position:sticky;top:90px;margin:0}
  .panel{padding:22px}
}

@media(max-width:600px){
  main{margin:16px auto;padding:0 10px}
  .panel{padding:15px;border-radius:14px}
  .fields.two{grid-template-columns:1fr}
  .welcome-row{align-items:flex-start}
  .bill-card{align-items:flex-start;flex-direction:column}
  .auth-card{margin:24px auto;padding:18px}
  .receipt h2{font-size:17px}
}

@media print{
  body{background:white}
  .topbar,footer,.tabs,.no-print,#authView,#newPage form,#savedPage,#settingsPage{display:none!important}
  main{margin:0;padding:0}
  .receipt{box-shadow:none;border:0;margin:0;max-width:none}
  .receipt .table-wrap{overflow:visible}
  .receipt table{font-size:12px}
  .receipt td,.receipt th{white-space:normal}
  #previewPaymentStatus {
  display: inline-block !important;
  visibility: visible !important;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

#previewPaymentStatus.paid {
  color: #166534 !important;
  background: #dcfce7 !important;
}

#previewPaymentStatus.pending {
  color: #854d0e !important;
  background: #fef3c7 !important;
}
  #newPage h1{display:none!important}
}
/* Royal Laundry logo */
.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
}

.receipt-logo {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin: 0 auto 10px;
  background: transparent;
}

@media print {
  .receipt-logo {
    width: 90px;
    height: 90px;
  }
}
.payment-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.payment-status.paid {
  color: #166534;
  background: #dcfce7;
}

.payment-status.pending {
  color: #854d0e;
  background: #fef3c7;
}