:root{
  --ink:#1a1d21; --muted:#5d6873; --line:#d7dde3; --band:#eef1f4;
  --accent:#0a5f55; --accent-soft:#e4efed; --warn:#b42318; --warn-soft:#fdeceb;
  --ok:#0a7d4d; --paper:#fff; --field:#fbfcfd; --bg:#e9edf1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45;}
input,textarea,button,select{font:inherit;}

/* ---------- top app bar ---------- */
.appbar{position:sticky;top:0;z-index:60;background:#11161c;color:#fff;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  box-shadow:0 2px 10px rgba(0,0,0,.18);}
.appbar .logo{font-family:"Spectral",serif;font-weight:600;font-size:17px;letter-spacing:.02em;}
.appbar .logo small{color:var(--accent-soft);opacity:.7;font-size:11px;font-family:"IBM Plex Sans";display:block;margin-top:-2px;}
.appbar .spacer{flex:1;}
.tabs{display:flex;gap:4px;}
.tab{background:transparent;border:none;color:#9aa6b2;font-weight:600;font-size:13px;
  padding:8px 12px;border-radius:8px;cursor:pointer;}
.tab.active{background:#222a32;color:#fff;}

.wrap{max-width:8.5in;margin:0 auto;padding:16px 14px 60px;}
.btn{font-weight:600;font-size:14px;border:none;border-radius:9px;padding:11px 16px;cursor:pointer;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:active{background:#08504a;}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:active{background:#f1f4f6;}
.btn-danger{background:transparent;color:var(--warn);border:1px solid #f0c8c4;}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.bar .spacer{flex:1;}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#11161c;color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:500;
  opacity:0;pointer-events:none;transition:.25s;z-index:80;box-shadow:0 6px 22px rgba(0,0,0,.3);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- the invoice sheet ---------- */
.sheet{background:var(--paper);border-radius:10px;box-shadow:0 6px 26px rgba(20,30,40,.12);
  padding:26px 24px;display:flex;flex-direction:column;}

input.f,textarea.f{color:var(--ink);background:var(--field);border:1px solid transparent;
  border-radius:6px;padding:7px 9px;width:100%;}
input.f:hover,textarea.f:hover{border-color:var(--line);}
input.f:focus,textarea.f:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);}
textarea.f{resize:vertical;line-height:1.4;}
input.f.num{text-align:right;}
label.k{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin:0 2px 4px;}

.head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.head .biz{flex:1;min-width:240px;}
.head .biz .bizname{font-family:"Spectral",serif;font-size:22px;font-weight:600;}
.head .biz .bizmeta{color:var(--muted);font-size:13px;white-space:pre-line;margin-top:3px;}
.head .meta{min-width:230px;flex:1;}
.head .invword{font-family:"Spectral",serif;font-size:34px;font-weight:600;letter-spacing:.04em;
  color:#9aa6b2;text-align:right;line-height:1;margin-bottom:10px;}
.metagrid{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;}
.metagrid .gk{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);text-align:right;}

.section{margin-top:22px;}
.section h3{margin:0 0 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  background:var(--band);padding:6px 10px;border-left:3px solid var(--accent);}

/* typeahead */
.ta{position:relative;}
.ta-list{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:30;background:#fff;
  border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 28px rgba(20,30,40,.16);
  overflow:hidden;max-height:260px;overflow-y:auto;display:none;}
.ta-list.open{display:block;}
.ta-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid #f0f3f5;}
.ta-item:last-child{border-bottom:none;}
.ta-item:hover,.ta-item.active{background:var(--accent-soft);}
.ta-item .t1{font-weight:600;font-size:14px;}
.ta-item .t2{font-size:12px;color:var(--muted);}
.ta-item .price{float:right;color:var(--accent);font-weight:600;font-size:13px;}

/* line items */
table.items{width:100%;border-collapse:collapse;margin-top:6px;}
table.items thead th{background:var(--band);font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);text-align:left;padding:7px 8px;border-bottom:1.5px solid var(--line);}
table.items th.r,table.items td.r{text-align:right;}
table.items td{padding:4px;border-bottom:1px solid #eef1f4;vertical-align:top;}
.amt-cell{text-align:right;font-variant-numeric:tabular-nums;padding-top:11px !important;white-space:nowrap;}
.rm{border:none;background:none;color:#c2cad2;cursor:pointer;font-size:20px;line-height:1;padding:6px 4px 0;}
.rm:active{color:var(--warn);}
.add-btn{margin-top:8px;background:none;border:1px dashed var(--line);color:var(--muted);
  border-radius:8px;padding:9px 13px;cursor:pointer;font-size:13px;}
.add-btn:active{border-color:var(--accent);color:var(--accent);}

.footrow{display:flex;justify-content:space-between;gap:22px;margin-top:16px;flex-wrap:wrap;}
.terms{flex:1;min-width:220px;}
.terms .tnote{font-size:11px;color:var(--muted);font-style:italic;margin-top:3px;}
.totals{min-width:250px;flex:1;}
.totals table{width:100%;border-collapse:collapse;}
.totals td{padding:6px 4px;font-variant-numeric:tabular-nums;}
.totals td.k{color:var(--muted);}
.totals td.v{text-align:right;}
.totals tr.total td{border-top:2px solid var(--ink);font-family:"Spectral",serif;font-size:19px;
  font-weight:700;padding-top:9px;}
.totals tr.total td.k{color:var(--ink);}
.taxrate{width:62px !important;display:inline-block;text-align:right;padding:3px 6px !important;}

.thanks{text-align:center;font-family:"Spectral",serif;font-style:italic;font-size:16px;
  color:var(--muted);margin:30px 0 14px;}
.contact-foot{border-top:1px solid var(--line);padding-top:12px;text-align:center;font-size:12px;color:var(--muted);}
.contact-foot b{color:var(--ink);}

/* ---------- history & settings cards ---------- */
.card{background:#fff;border-radius:10px;box-shadow:0 3px 14px rgba(20,30,40,.08);
  padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;}
.card .grow{flex:1;min-width:0;}
.card .h-no{font-weight:600;}
.card .h-sub{font-size:12.5px;color:var(--muted);}
.card .h-amt{font-family:"Spectral",serif;font-weight:700;font-size:17px;white-space:nowrap;}
.muted{color:var(--muted);}
.empty{text-align:center;color:var(--muted);padding:50px 20px;}
.btn-sm{padding:7px 12px;font-size:13px;}
.paid-badge{display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--ok);background:#e7f4ee;border:1px solid #bfe3d0;border-radius:999px;padding:5px 10px;}

.fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fieldgrid .full{grid-column:1 / -1;}

/* ---------- mobile ---------- */
@media (max-width:620px){
  .sheet{padding:18px 14px;border-radius:8px;}
  .head{flex-direction:column;}
  .head .biz,.head .meta{min-width:0;width:100%;flex:none;}
  .head .invword{font-size:28px;text-align:left;margin-top:14px;}
  .metagrid{grid-template-columns:96px 1fr;}
  .fieldgrid{grid-template-columns:1fr;}
  table.items thead{display:none;}
  table.items,table.items tbody,table.items tr,table.items td{display:block;width:100%;}
  table.items tr{border:1px solid var(--line);border-radius:9px;padding:8px;margin-bottom:10px;position:relative;}
  table.items td{border:none;padding:4px 0;}
  table.items td.qty,table.items td.price{display:inline-block;width:48%;}
  table.items td.qty::before{content:"Qty";display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
  table.items td.price::before{content:"Unit price";display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
  .amt-cell{text-align:left;padding-top:6px !important;font-weight:600;}
  .amt-cell::before{content:"Amount: ";color:var(--muted);font-weight:400;}
  table.items td.rm-cell{position:absolute;top:4px;right:6px;width:34px;height:34px;padding:0;}
  table.items td.rm-cell .rm{padding:4px;font-size:22px;}
  table.items td.desc{padding-right:40px;}
}

/* ---------- login ---------- */
.login-overlay{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top));}
.login-card{background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(20,30,40,.18);
  padding:30px 26px;width:100%;max-width:360px;display:flex;flex-direction:column;}
.login-logo{font-family:"Spectral",serif;font-weight:600;font-size:26px;text-align:center;}
.login-logo small{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:12px;color:var(--accent);
  font-weight:600;letter-spacing:.04em;margin-top:2px;}
.login-msg{text-align:center;color:var(--muted);font-size:13.5px;margin:8px 0 20px;}
.login-msg.err{color:var(--warn);font-weight:600;}
.login-in{margin-bottom:12px;padding:12px 13px;font-size:16px;}
.login-btn{margin-top:6px;padding:13px;font-size:15px;}

/* ---------- print ---------- */
.print-show{display:none;}
@media print{
  @page{size:letter;margin:0;}
  html,body{background:#fff;}
  .appbar,.bar,.add-btn,.rm,.rm-cell,.toast,#view-history,#view-settings{display:none !important;}
  .wrap{max-width:none;margin:0;padding:0;}
  .sheet{box-shadow:none;border-radius:0;padding:0.55in;min-height:10.95in;}
  input.f,textarea.f{border-color:transparent !important;background:transparent !important;box-shadow:none !important;padding:2px;}
  input.f::placeholder,textarea.f::placeholder{color:transparent !important;}
  textarea.f{resize:none !important;}
  table.items thead{display:table-header-group !important;}
  table.items tr{border:none !important;}
  table.items td{display:table-cell !important;width:auto !important;border-bottom:1px solid #eef1f4 !important;}
  .section h3,table.items thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}