:root { --blue:#0872ce; --blue-dark:#075899; --blue-soft:#eaf4ff; --ink:#17212b; --muted:#667684; --line:#d9e0e6; --paper:#fff; --ground:#edf1f4; --danger:#a0352b; --success:#12633d; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--ground); }
body { margin:0; background:var(--ground); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.58; }
h1,h2,p { margin-top:0; }
.app-shell { width:min(100%,900px); min-height:100vh; margin:auto; padding:18px 18px 118px; }
.topbar,.section-heading,.section-heading>div,.top-actions,.summary-bar,.summary-actions,.dialog-head,.dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar { margin-bottom:16px; }
.eyebrow { margin:0 0 3px; color:var(--blue-dark); font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin-bottom:0; font-size:clamp(26px,4vw,36px); letter-spacing:-.035em; }
h2 { margin-bottom:0; font-size:19px; letter-spacing:-.02em; }
.lead { color:var(--muted); line-height:1.5; }
.mode-badge,.offline-pill { border:1px solid #9fc8eb; border-radius:999px; background:var(--blue-soft); color:var(--blue-dark); padding:7px 10px; font-size:10px; font-weight:850; letter-spacing:.06em; }
.mode-badge[data-mode="live"] { border-color:#88c4a7; background:#e8f7ef; color:var(--success); }
.quiet-button,.text-button,.icon-button { border:0; background:transparent; color:var(--blue-dark); font-weight:750; }
.quiet-button { border:1px solid #bed0dd; border-radius:9px; background:white; padding:8px 11px; }
.invoice-card { margin-bottom:14px; border:1px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:0 5px 18px rgb(31 48 65 / 6%); padding:18px; }
.section-heading { margin-bottom:16px; }
.section-heading p { margin:2px 0 0; color:var(--muted); font-size:13px; }
.step { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border-radius:9px; background:var(--blue); color:white; font-weight:850; }
label>span,.mini-label,.review-meta span { display:block; margin-bottom:6px; color:#50606c; font-size:12px; font-weight:750; letter-spacing:.025em; }
input,select,textarea { width:100%; border:1px solid #cdd7df; border-radius:9px; background:white; color:var(--ink); outline:none; padding:11px 12px; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgb(8 114 206 / 12%); }
#customer-search { min-height:52px; border-width:2px; border-color:var(--blue); font-size:17px; }
#customer-search.selected { border-color:#238254; background:#f4fbf7; }
.customer-results { display:grid; gap:5px; margin-top:7px; }
.customer-result { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #cdd8df; border-radius:9px; background:#f8fafb; padding:11px 12px; text-align:left; }
.customer-result span,.empty-result,.quiet { color:var(--muted); font-size:12px; }
.empty-result { margin:5px 0; }
.invoice-meta { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:10px; margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.line-list { display:grid; gap:10px; }
.line-item { display:grid; grid-template-columns:28px auto minmax(0,1fr) 132px; align-items:end; gap:12px; border:1px solid #cfd8df; border-radius:12px; background:#f9fbfc; padding:13px; }
.line-number { display:grid; width:28px; height:28px; place-items:center; align-self:center; border-radius:8px; background:#e8eef3; color:#4e6271; font-size:12px; font-weight:800; }
.quantity { display:grid; grid-template-columns:38px 36px 38px; align-items:center; }
.quantity button { height:42px; border:1px solid #c8d2da; background:white; color:var(--blue-dark); font-size:21px; }
.quantity button:first-child { border-radius:9px 0 0 9px; }.quantity button:last-child { border-radius:0 9px 9px 0; }
.quantity strong { display:grid; height:42px; place-items:center; border-block:1px solid #c8d2da; background:white; }
.money-input { display:flex; align-items:center; border:1px solid #cdd7df; border-radius:9px; background:white; }.money-input span { padding-left:10px; color:var(--muted); }.money-input input { border:0; box-shadow:none; padding-left:5px; }
.discount-field { grid-column:4; }.remove-line { grid-column:2/4; grid-row:2; justify-self:end; align-self:end; border:0; background:transparent; color:#8a3d35; padding:0 0 12px; font-size:12px; font-weight:700; }
.more-options { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }.more-options summary { color:var(--blue-dark); cursor:pointer; font-size:13px; font-weight:750; }.optional-fields { display:grid; gap:10px; margin-top:12px; }.optional-fields textarea { resize:vertical; }
.mini-label { margin:14px 0 6px; text-transform:uppercase; }
.quick-items { display:flex; gap:8px; overflow:auto; }.quick-items button { white-space:nowrap; border:1px solid #cad6df; border-radius:999px; background:#f7f9fa; color:#334655; padding:8px 11px; font-size:13px; font-weight:650; }
.voice-card { border-color:#b9d9f3; }.voice-card textarea { min-height:118px; resize:vertical; font-size:16px; line-height:1.45; }.parse-button { width:100%; margin-top:10px; border:1px solid var(--blue); border-radius:10px; background:var(--blue-soft); color:var(--blue-dark); padding:12px; font-weight:800; }.privacy-note,.privacy-line { margin:8px 0 0; color:var(--muted); font-size:12px; }
.primary,.secondary,.send-button { min-height:46px; border-radius:10px; padding:11px 16px; font-weight:800; }.primary { border:1px solid var(--blue); background:var(--blue); color:white; }.secondary { border:1px solid #bdcbd5; background:white; color:#344956; }.send-button { border:1px solid #166943; background:#177a4d; color:white; }
.summary-bar { position:fixed; z-index:5; left:50%; bottom:0; width:min(900px,100%); transform:translateX(-50%); border-top:1px solid #cdd8e0; background:rgb(255 255 255 / 96%); box-shadow:0 -8px 24px rgb(24 38 51 / 10%); padding:13px max(18px,env(safe-area-inset-right)) calc(13px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); backdrop-filter:blur(12px); }.summary-bar>div:first-child { display:flex; flex-direction:column; }.summary-bar span { color:var(--muted); font-size:12px; }.summary-bar strong { font-size:22px; }
.notice { margin:0 0 12px; border:1px solid #a7d0ed; border-radius:10px; background:var(--blue-soft); color:#164f79; padding:10px 12px; font-size:13px; font-weight:650; }.notice[data-type="error"] { border-color:#e2ada8; background:#fff0ee; color:var(--danger); }.notice[data-type="warning"] { border-color:#ecd395; background:#fff8e8; color:#654e1c; }.notice[data-type="success"] { border-color:#9fcdb6; background:#effaf4; color:var(--success); }
.login-shell,.success-shell { display:grid; min-height:100vh; place-items:center; padding:20px; }.login-card,.success-card { width:min(100%,430px); border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 18px 48px rgb(26 42 57 / 12%); padding:28px; }.login-card form { display:grid; gap:14px; }.form-error { color:var(--danger); font-size:13px; line-height:1.4; }.success-card { text-align:center; }.success-mark { display:grid; width:64px; height:64px; margin:0 auto 18px; place-items:center; border-radius:50%; background:#e8f7ef; color:var(--success); font-size:34px; font-weight:900; }.success-card .primary { margin-top:10px; }
dialog { width:min(calc(100% - 24px),720px); max-height:calc(100vh - 24px); overflow:auto; border:0; border-radius:16px; box-shadow:0 25px 80px rgb(17 28 38 / 28%); padding:20px; }dialog::backdrop { background:rgb(15 27 38 / 56%); backdrop-filter:blur(2px); }.icon-button { color:#455966; font-size:26px; }.review-meta { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:10px; border-block:1px solid var(--line); margin:16px 0 5px; padding:13px 0; }.review-meta strong { display:block; font-size:13px; }.review-lines { padding:4px 0; }.review-line { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; border-bottom:1px solid #e3e8ec; padding:13px 0; }.review-line p { margin:0; }.review-line>span { color:var(--muted); }.totals { width:min(100%,330px); margin:12px 0 18px auto; }.totals>div { display:flex; justify-content:space-between; padding:5px 0; }.totals dd { margin:0; font-weight:750; }.grand-total { margin-top:6px; border-top:2px solid var(--ink); padding-top:10px !important; font-size:19px; }.working { color:var(--blue-dark); font-weight:700; }.dialog-actions { justify-content:flex-end; }
.customer-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }.customer-form .wide { grid-column:1/-1; }
@media (max-width:640px) { .app-shell { padding:12px 10px 112px; }.mode-badge { display:none; }.invoice-card { border-radius:12px; padding:15px 13px; }.invoice-meta { grid-template-columns:1fr 1fr; }.invoice-meta label:last-child { grid-column:1/-1; }.line-item { grid-template-columns:auto 1fr 112px; }.line-number { grid-column:1; }.quantity { grid-column:2/-1; justify-self:start; }.line-item label:first-of-type { grid-column:1/3; }.line-item label:nth-of-type(2) { grid-column:3; }.discount-field { grid-column:3; }.remove-line { grid-column:1/3; grid-row:3; }.review-meta { grid-template-columns:1fr 1fr; }.dialog-actions { display:grid; grid-template-columns:1fr; }.dialog-actions button { width:100%; }.summary-actions .secondary { display:none; } }
@media (max-width:390px) { .section-heading { align-items:flex-start; }.line-item { grid-template-columns:auto 1fr; }.quantity { grid-column:2; }.line-item label:first-of-type,.line-item label:nth-of-type(2),.discount-field { grid-column:1/-1; }.remove-line { grid-column:1/-1; grid-row:auto; padding:0; }.customer-form { grid-template-columns:1fr; }.customer-form .wide { grid-column:1; }.offline-pill { display:none; } }