:root{
  --black:#07090a;
  --black2:#121518;
  --black3:#1b1f22;
  --green:#7cff00;
  --green-dark:#59c900;
  --green-soft:#efffdf;
  --white:#ffffff;
  --bg:#f2f4f5;
  --panel:#ffffff;
  --silver:#d9dde0;
  --border:#d6dadd;
  --muted:#6b7379;
  --text:#101416;
  --danger:#d63232;
  --warning:#c77700;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius:16px;
}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;min-width:320px;background:linear-gradient(180deg,#e9edef 0,#f7f8f8 280px,#f2f4f5 100%)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app-shell{min-height:100vh}
.topbar{height:84px;background:linear-gradient(100deg,#050606,#171b1e);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 30px;border-bottom:3px solid var(--green);position:sticky;top:0;z-index:20;box-shadow:0 8px 25px rgba(0,0,0,.18)}
.brand-wrap{display:flex;align-items:center;gap:15px;min-width:0}
.logo-box{height:60px;width:96px;background:#fff;border-radius:8px;overflow:hidden;display:grid;place-items:center;border:1px solid #34383b}
.brand-logo{width:100%;height:100%;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy strong{font-size:22px;letter-spacing:.7px}.brand-copy span{font-size:13px;color:#c7ccd0;margin-top:5px;letter-spacing:.7px;text-transform:uppercase}
.topbar-actions,.button-group,.modal-actions,.big-choice-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:0;border-radius:10px;min-height:44px;padding:11px 18px;font-weight:800;letter-spacing:.1px;transition:.15s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn-green{background:var(--green);color:#0a0b0b;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}.btn-green:hover{background:#8dff24}
.btn-dark{background:#161a1d;color:#fff;border:1px solid #30363a}.btn-dark:hover{background:#23282c}
.btn-outline,.btn-outline-green{background:#fff;color:#111;border:1px solid var(--border)}.btn-outline-green{border-color:#8be63c;background:#f8fff2}.btn-outline-green:hover{border-color:var(--green-dark);background:var(--green-soft)}
.danger-outline{color:var(--danger);border-color:#efc1c1}.full{width:100%}
.nav-tabs{height:54px;background:#fff;display:flex;gap:4px;padding:0 30px;border-bottom:1px solid var(--border);align-items:stretch;position:sticky;top:84px;z-index:19}
.nav-tab{border:0;background:transparent;color:#4c555a;font-weight:800;padding:0 18px;position:relative}.nav-tab.active{color:#111}.nav-tab.active::after{content:"";position:absolute;height:4px;background:var(--green);left:12px;right:12px;bottom:0;border-radius:4px 4px 0 0}
.count-pill{background:#eef0f1;color:#4f575b;font-size:11px;border-radius:999px;padding:2px 7px;margin-left:4px}.nav-tab.active .count-pill{background:var(--green);color:#101010}
.main-wrap{max-width:1500px;margin:0 auto;padding:28px 30px 50px}.view{display:none}.view.active{display:block}
.page-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.page-title-row h1{font-size:32px;margin:2px 0 6px;letter-spacing:-.8px}.compact-title{align-items:center}.eyebrow{margin:0;color:#5bb300;font-size:12px;font-weight:900;letter-spacing:1.4px}.subtle{color:var(--muted);margin:0;font-size:14px;line-height:1.45}
.invoice-meta{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;justify-content:flex-end}.invoice-meta>div{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 13px;min-width:125px;display:flex;flex-direction:column;gap:3px;box-shadow:0 3px 12px rgba(0,0,0,.03)}.invoice-meta span{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:800;letter-spacing:.5px}.invoice-meta strong{font-size:15px}.invoice-meta input{border:0;padding:0;background:transparent;font-weight:700;outline:0;color:#111;width:132px}
.status-chip{display:inline-flex!important;width:max-content;padding:4px 9px;border-radius:999px;font-size:11px!important}.status-open{background:#edf0f2;color:#495156}.status-partial-payment{background:#fff2d8;color:#9a5b00}.status-paid{background:#e7ffd1;color:#397e00}.status-void{background:#ffe7e7;color:#b22424}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.info-card,.work-card,.payment-card,.notes-card,.totals-card,.actions-card,.settings-card,.list-card{padding:20px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.section-head h2{font-size:18px;margin:2px 0 0}.work-head{align-items:center}
.empty-info{min-height:91px;border:1px dashed #cfd4d7;background:#fafbfb;border-radius:12px;display:flex;align-items:center;gap:14px;padding:15px}.empty-icon{width:42px;height:42px;border-radius:50%;background:#141719;color:var(--green);display:grid;place-items:center;font-size:20px}.empty-info>div:last-child,.selected-info>div{display:flex;flex-direction:column;gap:4px}.empty-info strong,.selected-info strong{font-size:16px}.empty-info span,.selected-info span{font-size:13px;color:var(--muted)}
.selected-info{min-height:91px;border-left:4px solid var(--green);background:linear-gradient(90deg,#f3ffe8,#fff 35%);border-radius:12px;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.link-btn,.back-link{border:0;background:transparent;color:#468f00;font-weight:900;padding:8px}.link-btn:hover,.back-link:hover{text-decoration:underline}
.work-card{margin-bottom:18px}.items-empty{min-height:180px;background:linear-gradient(145deg,#f7f9f9,#fff);border:1px dashed #cfd4d6;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;color:var(--muted)}.items-empty strong{color:#252b2e;font-size:16px}.tire-mark{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#0e1113;color:var(--green);font-size:28px;margin-bottom:5px}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--border);border-radius:12px}.items-table,.payment-table{border-collapse:collapse;width:100%;min-width:700px}.items-table th,.payment-table th{font-size:11px;text-transform:uppercase;letter-spacing:.45px;color:#667076;background:#f2f4f5;text-align:left;padding:11px 12px;border-bottom:1px solid var(--border)}.items-table td,.payment-table td{padding:12px;border-bottom:1px solid #edf0f1;font-size:14px}.items-table tr:last-child td,.payment-table tr:last-child td{border-bottom:0}.item-main{font-weight:800}.item-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px}.money-cell{font-weight:800;white-space:nowrap}.remove-btn{border:0;background:#fff1f1;color:#bc2727;border-radius:8px;padding:7px 10px;font-weight:800}
.invoice-bottom-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:18px}.left-stack,.right-stack{display:flex;flex-direction:column;gap:18px}.small-empty{padding:22px;border:1px dashed var(--border);background:#fafafa;border-radius:10px;color:var(--muted);text-align:center}.notes-card textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:12px;resize:vertical;min-height:120px;outline:0}.notes-card textarea:focus,input:focus,select:focus,textarea:focus{border-color:#72cb29;box-shadow:0 0 0 3px rgba(124,255,0,.14)}
.summary-row{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid #edf0f1;font-size:14px}.summary-row strong{white-space:nowrap}.grand-total{font-size:19px;padding:14px 0;border-top:2px solid #17191b;margin-top:6px}.balance-due{font-size:21px;color:#111;border-bottom:0}.balance-due strong{color:#50aa00}.deposit-note{background:#f3ffe8;border:1px solid #b9ee8b;border-radius:9px;padding:9px 10px;font-size:12px;font-weight:800;margin-top:10px;color:#3c7600}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.terms-bar{margin-top:18px;background:#111416;color:#e9ecee;border-left:5px solid var(--green);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:4px}.terms-bar strong{color:#fff}.terms-bar span{font-size:12px;color:#cbd0d2;line-height:1.45}
.search-input{width:min(440px,100%);min-height:44px;border:1px solid var(--border);border-radius:10px;padding:10px 13px;background:#fff}.record-list{display:flex;flex-direction:column}.record-item{display:grid;grid-template-columns:160px 1.2fr .9fr 130px auto;gap:18px;align-items:center;padding:16px 4px;border-bottom:1px solid #edf0f1}.record-item:last-child{border-bottom:0}.record-primary{font-weight:900}.record-secondary{color:var(--muted);font-size:12px;margin-top:3px}.record-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}.mini-btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:7px 10px;font-weight:800;font-size:12px}.mini-btn.green{border-color:#9fe765;background:#f4ffe9}.mini-btn.danger{color:#b92626}.large-empty{padding:55px 20px;text-align:center;color:var(--muted)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-card h2{margin:0 0 18px}.settings-card label,.form-grid label,.large-label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:#495156;margin-bottom:12px}.settings-card input,.form-grid input,.large-input,.form-grid select,.custom-wrap input{width:100%;min-height:44px;border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:#fff;color:#111;outline:0;font-size:15px}.two-input{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full-span{grid-column:1/-1}.file-label{cursor:pointer}
/* dialogs */
dialog.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:auto}.modal::backdrop{background:rgba(0,0,0,.66);backdrop-filter:blur(3px)}.modal-card{width:min(600px,calc(100vw - 28px));max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;padding:22px;box-shadow:0 24px 90px rgba(0,0,0,.35);border-top:6px solid var(--green)}.wide-modal .modal-card{width:min(850px,calc(100vw - 28px))}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.modal-head h2{font-size:24px;margin:2px 0}.modal-close{border:0;background:#eff1f2;width:38px;height:38px;border-radius:50%;font-size:25px;line-height:1}.modal-section{border-top:1px solid #edf0f1;padding-top:18px;margin-top:18px}.modal-section h3,.wizard-step h3{margin:0 0 13px;font-size:15px}.modal-help{font-size:12px;color:var(--muted);line-height:1.4}.large-label{font-size:14px}.large-input{font-size:18px;min-height:52px}.found-card{background:#f3ffe8;border:1px solid #bde993;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;margin-bottom:14px}.found-card span{font-size:11px;color:#4d8f15;text-transform:uppercase;font-weight:900;letter-spacing:.6px}.found-card strong{font-size:20px}.found-card small{color:var(--muted)}
.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid .span-2{grid-column:1/-1}.optional{font-weight:500;color:#899196}.choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.choice-btn,.big-choice{min-height:49px;border:1px solid #ced3d6;background:#fff;border-radius:10px;padding:10px 12px;font-weight:900;color:#242a2d}.choice-btn:hover,.big-choice:hover{border-color:#6ac920;background:#f5ffed}.choice-btn.selected,.big-choice.selected{background:#101314;color:var(--green);border-color:#101314;box-shadow:inset 0 -3px 0 var(--green)}.big-choice-row .big-choice{flex:1;min-width:180px;min-height:66px;font-size:16px}.compact-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.service-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.year-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:340px;overflow:auto;padding-right:4px}.colors-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.wizard-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:20px}.wizard-progress span{background:#eef0f1;border-radius:999px;padding:7px;text-align:center;font-size:11px;font-weight:900;color:#818a8f}.wizard-progress span.active,.wizard-progress span.done{background:#101314;color:var(--green)}.wizard-title{display:flex;align-items:center;gap:12px;margin-bottom:12px}.wizard-title h3{margin:0}.custom-wrap{display:flex;gap:9px;margin-top:12px}.custom-wrap input{flex:1}.payment-balance-box{background:#111416;color:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}.payment-balance-box span{color:#cbd0d2}.payment-balance-box strong{color:var(--green);font-size:24px}.message-preview{white-space:pre-wrap;background:#f5f7f7;border:1px solid var(--border);border-radius:10px;padding:14px;font-size:13px;line-height:1.45;margin-bottom:12px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#101314;color:#fff;border-left:4px solid var(--green);padding:12px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:100;font-weight:800;box-shadow:0 12px 35px rgba(0,0,0,.25)}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Print */
.print-sheet{display:none}
@media print{
  @page{size:letter;margin:.38in}
  body{background:#fff!important}.app-shell,.toast,dialog{display:none!important}.print-sheet{display:block!important;color:#111;font-family:Arial,sans-serif;font-size:10.5pt}
  .p-header{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:4px solid #7cff00;padding-bottom:10px;margin-bottom:12px}.p-logo{width:155px;height:105px;object-fit:contain}.p-shop{text-align:right;line-height:1.45}.p-shop h1{margin:0;font-size:20pt}.p-title{text-align:center;font-size:22pt;font-weight:900;letter-spacing:1px;margin:8px 0 12px}.p-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.p-box{border:1px solid #c8c8c8;border-radius:8px;padding:10px;min-height:90px}.p-box h3{margin:0 0 5px;font-size:10pt;text-transform:uppercase;background:#111;color:#7cff00;padding:5px 7px}.p-line{line-height:1.5}.p-table{width:100%;border-collapse:collapse;margin:8px 0 12px}.p-table th{background:#111;color:#7cff00;font-size:9pt;text-transform:uppercase;padding:7px;border:1px solid #111;text-align:left}.p-table td{padding:7px;border:1px solid #c8c8c8}.p-num{text-align:right}.p-payment-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:8px}.p-summary{border:1px solid #bbb;border-radius:8px;padding:10px}.p-sum-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #ddd}.p-sum-row.total{font-size:13pt;font-weight:900;border-top:2px solid #111}.p-sum-row.balance{font-size:14pt;font-weight:900;color:#438d00;border-bottom:0}.p-status{margin-top:8px;font-weight:900;text-align:right}.p-notes{margin-top:10px;border:1px solid #ccc;border-radius:7px;padding:8px;min-height:50px}.p-terms{margin-top:12px;border:2px solid #111;border-left:6px solid #7cff00;border-radius:6px;padding:9px;font-size:8.4pt;line-height:1.4}.p-terms strong{display:block;font-size:9.4pt;margin-bottom:4px}.p-footer{text-align:center;font-weight:900;margin-top:10px;font-size:11pt}
}
@media(max-width:1000px){.info-grid,.invoice-bottom-grid,.settings-grid{grid-template-columns:1fr}.record-item{grid-template-columns:130px 1fr 110px auto}.record-item>div:nth-child(3){display:none}.full-span{grid-column:auto}}
@media(max-width:760px){.topbar{height:auto;min-height:78px;padding:8px 14px;gap:10px}.logo-box{width:74px;height:54px}.brand-copy strong{font-size:16px}.brand-copy span{font-size:10px}.topbar-actions .btn-dark{display:none}.topbar-actions .btn{padding:10px 12px}.nav-tabs{top:78px;padding:0 8px;overflow-x:auto;height:50px}.nav-tab{padding:0 12px;white-space:nowrap}.main-wrap{padding:20px 14px 38px}.page-title-row{flex-direction:column}.invoice-meta{justify-content:flex-start;width:100%}.invoice-meta>div{flex:1;min-width:100px}.info-grid{gap:12px}.card{border-radius:13px}.info-card,.work-card,.payment-card,.notes-card,.totals-card,.actions-card,.settings-card,.list-card{padding:15px}.section-head{flex-direction:column;align-items:stretch}.work-head{align-items:stretch}.button-group>.btn{flex:1}.action-grid{grid-template-columns:1fr}.choice-grid,.service-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.year-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.wizard-progress span{font-size:9px;padding:6px 3px}.record-item{grid-template-columns:1fr auto;gap:8px}.record-item>div:nth-child(3),.record-item>div:nth-child(4){display:none}.record-actions{grid-column:1/-1;justify-content:flex-start}.form-grid.two,.two-input{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.compact-title .search-input{width:100%}.selected-info{align-items:flex-start;flex-direction:column}.big-choice-row .big-choice{min-width:120px}.modal-card{padding:18px 15px}.compact-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 2026-09-11 workflow update */
.modal-close-text{min-height:40px;padding:8px 14px;white-space:nowrap}
.modal-section.no-top{border-top:0;margin-top:0;padding-top:0}
.modal-footer-actions{margin-top:18px;padding-top:16px;border-top:1px solid #edf0f1}
.tire-size-entry{margin-top:14px}
.size-mode-row .big-choice{min-width:0}
.tire-price-preview{margin:8px 0 16px;background:#111416;color:#fff;border-radius:12px;padding:14px 16px;border-left:5px solid var(--green)}
.tire-price-preview>div{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tire-price-preview span{font-size:13px;color:#d9dddf;font-weight:800}
.tire-price-preview strong{color:var(--green);font-size:22px;white-space:nowrap}
.tire-price-preview small{display:block;color:#aeb5b9;margin:4px 0 12px}
.tire-price-preview .preview-total{border-top:1px solid #34393d;padding-top:10px}
.tire-price-preview .preview-total strong{font-size:18px;color:#fff}
.tire-back-btn{margin-top:9px}

/* Stack the entry form sooner on tablets/narrow browser windows. */
@media(max-width:1200px){
  .info-grid,.invoice-bottom-grid,.settings-grid{grid-template-columns:minmax(0,1fr)!important}
  .main-wrap,.view,.info-grid,.work-card,.invoice-bottom-grid,.left-stack,.right-stack{min-width:0;width:100%}
}

/* Phone layout. The coarse-pointer clause also catches Android browsers that report a wide CSS viewport. */
@media(max-width:820px), (pointer:coarse) and (max-width:1200px){
  html,body,.app-shell{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0}
  .topbar{width:100%;height:auto;min-height:76px;padding:8px 10px;gap:8px}
  .brand-wrap{flex:1 1 auto;min-width:0;gap:9px}
  .logo-box{flex:0 0 58px;width:58px;height:58px;border-radius:7px}
  .brand-copy{min-width:0}
  .brand-copy strong{font-size:15px;white-space:nowrap}
  .brand-copy span{font-size:8.5px;line-height:1.2;letter-spacing:.45px;white-space:normal}
  .topbar-actions{flex:0 0 auto;gap:6px}
  .topbar-actions .btn-dark{display:none}
  .topbar-actions .btn-green{min-height:48px;padding:8px 12px;font-size:14px;max-width:92px;line-height:1.05;white-space:normal}
  .nav-tabs{top:77px;width:100%;max-width:100%;height:49px;padding:0 6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tab{flex:0 0 auto;padding:0 11px;font-size:14px;white-space:nowrap}
  .main-wrap{width:100%;max-width:none;margin:0;padding:14px 10px 34px;overflow:hidden}
  .view,.view.active,#view-invoice{width:100%;max-width:100%;min-width:0}
  .page-title-row{display:none}
  .info-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%;gap:12px;margin-bottom:12px}
  .card,.info-card,.work-card,.payment-card,.notes-card,.totals-card,.actions-card,.settings-card,.list-card{width:100%;max-width:100%;min-width:0;border-radius:13px;padding:14px}
  .work-card{margin-bottom:12px}
  .invoice-bottom-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%;gap:12px}
  .left-stack,.right-stack{width:100%;min-width:0;gap:12px}
  .section-head{gap:10px;margin-bottom:13px}
  .section-head h2{font-size:18px}
  .work-head{align-items:stretch}
  .button-group{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:9px}
  .button-group>.btn{width:100%;padding:10px 8px;line-height:1.1;white-space:normal}
  .selected-info{width:100%;min-width:0;align-items:flex-start;flex-direction:column}
  .selected-info>div{min-width:0;width:100%}
  .selected-info strong,.selected-info span{overflow-wrap:anywhere}
  .empty-info{width:100%;min-width:0}
  .action-grid{grid-template-columns:1fr}
  .summary-row{font-size:14px;min-width:0}
  .summary-row span{min-width:0}
  .summary-row strong{flex:0 0 auto}
  .notes-card textarea{min-height:110px}
  .terms-bar{margin-top:12px}

  /* Invoice items become stacked cards rather than a clipped desktop table. */
  .table-wrap{width:100%;max-width:100%;overflow:visible;border:0;border-radius:0}
  .items-table,.payment-table{display:block;width:100%;min-width:0;border-collapse:separate}
  .items-table thead,.payment-table thead{display:none}
  .items-table tbody,.payment-table tbody{display:grid;gap:9px;width:100%}
  .items-table tr,.payment-table tr{display:grid;width:100%;min-width:0;background:#fff;border:1px solid var(--border);border-radius:11px;overflow:hidden}
  .items-table tr{grid-template-columns:1fr 1fr}
  .items-table td,.payment-table td{display:block;border:0!important;padding:9px 10px;font-size:13px;min-width:0;overflow-wrap:anywhere}
  .items-table td::before,.payment-table td::before{display:block;margin-bottom:3px;color:#7b8388;font-size:9px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
  .items-table td:nth-child(1){grid-column:1/2;background:#f3f5f5}.items-table td:nth-child(1)::before{content:"Type"}
  .items-table td:nth-child(2){grid-column:1/-1;grid-row:1/2;padding-left:78px;pointer-events:auto}.items-table td:nth-child(2)::before{content:"Description"}
  .items-table td:nth-child(3)::before{content:"Qty"}.items-table td:nth-child(4)::before{content:"Price Each"}.items-table td:nth-child(5)::before{content:"Line Total"}
  .items-table td:nth-child(6){display:flex;align-items:end;justify-content:flex-end}
  .items-table .item-main{display:block;white-space:normal;overflow-wrap:anywhere}
  .items-table .item-sub{white-space:normal;line-height:1.35}
  .items-table .remove-btn{width:100%;min-height:38px}
  .payment-table tr{grid-template-columns:1fr 1fr}
  .payment-table td:nth-child(1)::before{content:"Date"}.payment-table td:nth-child(2)::before{content:"Type"}.payment-table td:nth-child(3)::before{content:"Method"}.payment-table td:nth-child(4)::before{content:"Amount"}
  .payment-table td:nth-child(5){grid-column:1/-1}.payment-table td:nth-child(5) .remove-btn{width:100%;min-height:38px}
  .money-cell{white-space:normal}

  /* Dialogs use the full usable phone width and keep buttons finger-friendly. */
  dialog.modal{width:100%;max-width:100%;margin:auto;padding:8px}
  .modal-card,.wide-modal .modal-card{width:100%;max-width:100%;max-height:calc(100vh - 18px);padding:16px 13px;border-radius:15px}
  .modal-head{align-items:center;gap:10px;margin-bottom:15px}
  .modal-head h2{font-size:21px}
  .modal-close-text{min-width:72px}
  .choice-grid,.service-choices,.compact-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .year-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .colors-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .choice-btn,.big-choice{min-height:52px;padding:9px 7px}
  .big-choice-row{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .big-choice-row .big-choice{width:100%;min-width:0;min-height:62px}
  .form-grid.two,.two-input{grid-template-columns:minmax(0,1fr)}
  .form-grid .span-2{grid-column:auto}
  .custom-wrap{flex-direction:column;align-items:stretch}
  .custom-wrap .btn{width:100%}
  .tire-price-preview strong{font-size:20px}
}

@media(max-width:390px){
  .brand-copy strong{font-size:14px}.brand-copy span{font-size:8px}
  .topbar-actions .btn-green{max-width:82px;padding:8px 9px;font-size:13px}
  .button-group{grid-template-columns:1fr}
  .year-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px), (pointer:coarse) and (max-width:1200px){
  .items-table td:nth-child(1){grid-column:1/-1;grid-row:auto;background:#f3f5f5}
  .items-table td:nth-child(2){grid-column:1/-1;grid-row:auto;padding-left:10px}
  .items-table td:nth-child(5){grid-column:1/2}
  .items-table td:nth-child(6){grid-column:2/3}
}

/* v3.2 settings administration */
.number-preview-box{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#111416;color:#fff;border-radius:12px;padding:14px 16px;margin:4px 0 14px}.number-preview-box span{color:#cbd0d2;font-size:12px;font-weight:800}.number-preview-box strong{color:var(--green);font-size:20px;text-align:right}.brand-settings-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.brand-setting-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.brand-setting-row input{margin:0}.brand-setting-actions{display:flex;gap:5px}.brand-setting-actions button{min-width:38px;height:38px;border:1px solid var(--border);background:#fff;border-radius:8px;font-weight:900}.brand-setting-actions .delete-brand{color:#b92626}.settings-add-row{display:grid;grid-template-columns:1fr auto;gap:9px;margin:12px 0}.settings-add-row input{width:100%;min-height:44px;border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:#fff;font-size:15px}.settings-invoice-list{display:flex;flex-direction:column}.settings-invoice-row{display:grid;grid-template-columns:160px 1fr 140px auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #edf0f1}.settings-invoice-row:last-child{border-bottom:0}.settings-invoice-row .invoice-number-admin{font-weight:900}.settings-invoice-row .invoice-admin-meta{font-size:12px;color:var(--muted);margin-top:3px}.compact-empty{padding:22px 10px}.pending-number{color:#6c7478;font-style:italic;font-size:14px}
@media(max-width:760px){.settings-invoice-row{grid-template-columns:1fr auto;gap:7px}.settings-invoice-row>div:nth-child(2),.settings-invoice-row>div:nth-child(3){grid-column:1/-1}.settings-invoice-row .mini-btn{grid-column:2;grid-row:1}.brand-setting-row{grid-template-columns:minmax(0,1fr)}.brand-setting-actions{justify-content:flex-start}.number-preview-box{align-items:flex-start;flex-direction:column}.number-preview-box strong{text-align:left}.settings-add-row{grid-template-columns:1fr}.settings-add-row .btn{width:100%}}