:root{--bg:#f5f7fb;--surface:#fff;--surface-2:#f8fafc;--text:#172033;--muted:#718096;--line:#e2e8f0;--primary:#2457d6;--primary-dark:#1945b4;--success:#178a4b;--warning:#a66700;--danger:#c23b3b;--shadow:0 14px 40px rgba(23,32,51,.07);--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
nav{position:sticky;top:0;z-index:1000;min-height:72px;background:rgba(255,255,255,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.95);padding:0 max(18px,4vw);display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 5px 24px rgba(23,32,51,.055)}
.logo{display:inline-flex;align-items:center;gap:8px;font-size:21px;font-weight:950;letter-spacing:-.5px;color:var(--text)!important;white-space:nowrap;text-decoration:none!important}.logo:hover{text-decoration:none!important}.logo span{font-size:10px;letter-spacing:.7px;background:var(--text);color:#fff;padding:4px 7px;border-radius:6px}
.navlinks{display:flex;gap:4px;align-items:center;justify-content:flex-end}.navlinks a{color:#536177;font-weight:750;padding:10px 11px;border-radius:10px;white-space:nowrap;transition:background .16s,color .16s}.navlinks a:hover,.navlinks a.active{background:#eef2ff;color:var(--primary);text-decoration:none}.navlinks a.btn{color:#fff!important}
.menu-toggle{display:none;position:relative;appearance:none;-webkit-appearance:none;border:1px solid #d7dfeb;background:#fff;border-radius:12px;width:46px;height:44px;align-items:center;justify-content:center;padding:0;color:var(--text);box-shadow:0 4px 14px rgba(23,32,51,.08);flex:0 0 auto;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.menu-toggle:hover{border-color:#b9c7dc;background:#f8faff}.menu-toggle:active{transform:scale(.96)}.menu-toggle:focus-visible{outline:3px solid rgba(36,87,214,.2);outline-offset:2px}.menu-icon{width:22px;height:18px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.menu-icon i{display:block;width:22px;height:2.5px;background:currentColor;border-radius:999px;transition:transform .2s ease,opacity .2s ease,width .2s ease}.menu-toggle.is-open .menu-icon i:nth-child(1){transform:translateY(7.75px) rotate(45deg)}.menu-toggle.is-open .menu-icon i:nth-child(2){opacity:0}.menu-toggle.is-open .menu-icon i:nth-child(3){transform:translateY(-7.75px) rotate(-45deg)}
.mobile-nav-backdrop{display:none}
.container{width:min(1180px,100%);margin:38px auto;padding:0 20px}.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.hero h1{font-size:clamp(28px,4vw,38px);line-height:1.12;letter-spacing:-1px;margin:5px 0 8px}.hero p{margin:0}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:900;color:#7a869b}.muted{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;background:var(--primary);color:#fff!important;border:1px solid var(--primary);border-radius:10px;padding:11px 17px;font-weight:850;cursor:pointer;transition:.18s ease;box-shadow:0 5px 14px rgba(36,87,214,.16)}.btn:hover{background:var(--primary-dark);border-color:var(--primary-dark);text-decoration:none;transform:translateY(-1px)}.btn.small{min-height:38px;padding:8px 12px;font-size:13px}.btn.secondary{background:#eef2ff;color:var(--primary)!important;border-color:#dbe3ff;box-shadow:none}.btn.ghost{background:#fff;color:var(--text)!important;border-color:var(--line);box-shadow:none}.full{width:100%;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:19px;box-shadow:0 8px 25px rgba(23,32,51,.045)}.stat small{display:block;color:var(--muted);font-weight:700}.stat strong{display:block;font-size:25px;line-height:1.2;margin-top:7px;word-break:break-word}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}label{display:block;font-size:13px;font-weight:850;margin:14px 0;color:#334155}input,select,textarea{width:100%;margin-top:7px;padding:12px 13px;border:1px solid #d5dce6;border-radius:10px;background:#fff;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:#7c9bea;box-shadow:0 0 0 3px rgba(36,87,214,.11)}input[readonly]{background:#f8fafc;color:#64748b}textarea{min-height:100px;resize:vertical}
.alert,.success{padding:13px 15px;border-radius:11px;margin-bottom:16px}.alert{background:#fff5e8;border:1px solid #ffd99a;color:#7a4d00}.success{background:#eaf8ef;border:1px solid #bce5ca;color:#16663a}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at top,#eef3ff 0,#f5f7fb 45%,#f5f7fb 100%)}.auth{width:min(460px,100%);padding:30px}.auth .logo{margin-bottom:4px}.auth h1{font-size:30px;letter-spacing:-.8px;margin:10px 0}.auth form{margin-top:18px}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}.table-wrap table{margin:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:13px 11px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:top}th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#7a869b;white-space:nowrap}tbody tr:hover{background:#fbfcfe}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:#eef2f6;font-size:12px;font-weight:850;white-space:nowrap}.badge.active,.badge.paid{background:#e9f8ef;color:#176a3d}.badge.pending{background:#fff5d9;color:#8a5b00}.badge.rejected,.badge.expired,.badge.suspended{background:#fff0ef;color:#a93232}.badge.cancelled{background:#f1f3f5;color:#64748b}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px max(18px,4vw);margin:0 auto;max-width:1220px}.invoice{max-width:1000px;margin:auto}.invoice-top{display:flex;justify-content:space-between;gap:25px}.invoice-meta{text-align:right}.billto{margin:28px 0}.billto small{font-weight:900;color:#7a869b}.totals{max-width:360px;margin:25px 0 0 auto;text-align:right}.totals p,.totals h2,.totals h3{display:flex;justify-content:space-between;gap:20px}.note{background:var(--surface-2);padding:13px;border-radius:9px;margin-top:12px;font-size:13px}.price-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.price-card{border:1px solid #dfe5ee;border-radius:15px;padding:23px;background:#fff}.price-card.featured{border:2px solid var(--primary);box-shadow:0 14px 35px rgba(36,87,214,.1)}.price{font-size:32px;font-weight:900;margin:8px 0}.kpi{font-size:13px;color:#718096}.customer{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #edf0f4;padding:14px 0}.customer small{display:block;margin-top:3px}.item-head,.item-row{display:grid;grid-template-columns:1fr 2fr 1fr 1fr 1.2fr;gap:9px}.item-head{font-size:11px;text-transform:uppercase;color:#7a869b;font-weight:900;margin:12px 0 7px}.item-row{margin-bottom:9px}.item-row .remove-item{display:none}.invoice-live-total{display:flex;justify-content:flex-end;margin:15px 0;font-size:15px}.invoice-live-total strong{font-size:22px;margin-left:10px}.empty{text-align:center;padding:30px;color:var(--muted)}.page-actions{display:flex;gap:10px;flex-wrap:wrap}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.section-title h2{margin:0}
.notice{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border:1px solid var(--line);background:#f8fafc;border-radius:11px}.divider{height:1px;background:#edf0f4;border:0;margin:25px 0}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.navlinks{gap:0}.navlinks a{padding:8px 7px;font-size:13px}}
@media(max-width:760px){nav{min-height:68px;height:68px;padding:8px 16px}.menu-toggle{display:inline-flex}.navlinks{position:absolute;top:calc(100% + 10px);right:12px;left:12px;z-index:1002;display:none;flex-direction:column;align-items:stretch;gap:3px;padding:10px;background:rgba(255,255,255,.99);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 55px rgba(23,32,51,.2)}.navlinks.open{display:flex}.navlinks a{padding:13px 14px;font-size:14px}.navlinks a.btn{margin-top:4px}.mobile-nav-backdrop{position:fixed;inset:68px 0 0;background:rgba(15,23,42,.32);z-index:999}.mobile-nav-backdrop.open{display:block}.container{margin:25px auto;padding:0 15px}.hero{align-items:flex-start;flex-direction:column;gap:14px}.hero .btn{width:100%}.grid2,.price-cards{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:19px;border-radius:15px}.toolbar{padding:12px 15px;flex-wrap:wrap}.invoice-top{flex-direction:column}.invoice-meta{text-align:left}.totals{max-width:none}.page-actions .btn{flex:1 1 160px}.item-head{display:none}.item-row{grid-template-columns:1fr 2fr 1fr 1fr 1.2fr;min-width:650px}.item-row-wrap{overflow-x:auto;padding-bottom:5px}.table-wrap{margin:0 -2px;width:calc(100% + 4px)}}
@media(max-width:480px){body{font-size:14px}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:15px}.stat strong{font-size:21px}.auth{padding:24px 19px}.auth h1{font-size:27px}.btn{width:100%}.page-actions{display:grid;grid-template-columns:1fr}.price{font-size:28px}.customer{align-items:flex-start;flex-direction:column;gap:6px}.invoice{padding:16px}.invoice h1{font-size:25px}.logo{font-size:19px}}

/* Invoice detail: compact, readable and mobile-safe */
.invoice-toolbar{max-width:1180px;margin:0 auto;padding-top:16px;padding-bottom:8px}.invoice-toolbar .page-actions{align-items:center}.invoice-toolbar .back-link{font-weight:850;white-space:nowrap;min-height:48px}.invoice-items{width:100%;overflow:visible}.invoice-items table{min-width:0}.invoice-items th,.invoice-items td{white-space:normal}.invoice-items td:nth-child(3),.invoice-items td:nth-child(4){white-space:nowrap}.invoice-items td:nth-child(5),.invoice-items td:nth-child(6){white-space:nowrap;text-align:right}.invoice .invoice-top h1{margin-top:12px;margin-bottom:8px}.invoice .invoice-top p{margin-top:0}.invoice .billto{margin:24px 0 22px}.invoice .invoice-meta h2{margin:7px 0 10px}.invoice .totals{margin-top:20px}

@media(max-width:760px){
  .invoice-toolbar{padding:10px 15px 6px;align-items:stretch;display:block}.invoice-toolbar .back-link{display:flex;width:100%;min-height:50px;margin-bottom:8px;font-size:14px}.invoice-toolbar .page-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}.invoice-toolbar .page-actions .btn,.invoice-toolbar .page-actions form,.invoice-toolbar .page-actions form .btn{width:100%;min-width:0;min-height:50px}.invoice-toolbar .page-actions form{display:flex;margin:0}.invoice-toolbar .page-actions .btn{padding:10px 9px;line-height:1.25;text-align:center;white-space:normal}.invoice-toolbar .page-actions .btn:last-child{grid-column:1/-1}.invoice-toolbar .page-actions form .btn{height:100%}.invoice{padding:18px 16px}.invoice .invoice-top{gap:12px}.invoice .invoice-top h1{font-size:25px;margin:8px 0 5px}.invoice .invoice-meta h2{font-size:22px;margin:5px 0 8px}.invoice .billto{margin:20px 0 14px}.invoice-items{margin:0}.invoice-items table{display:block;width:100%;min-width:0;border:0}.invoice-items thead{display:none}.invoice-items tbody,.invoice-items tr,.invoice-items td{display:block;width:100%}.invoice-items tr{padding:12px 0;border-bottom:1px solid #edf0f4}.invoice-items td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;text-align:right!important;white-space:normal!important}.invoice-items td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.55px;color:#7a869b;font-weight:900;text-align:left;flex:0 0 auto}.invoice-items td:nth-child(2){font-weight:750}.invoice-items td:nth-child(6){font-weight:850}.invoice .totals{margin-top:18px}.invoice .note{margin-top:10px}.invoice>p:last-child{margin-top:24px!important}
}
@media(max-width:480px){.invoice-toolbar{display:block}.invoice-toolbar .page-actions{grid-template-columns:1fr 1fr}.invoice-toolbar .page-actions .btn{width:100%;min-height:50px}.invoice{border-radius:14px}.invoice .logo{font-size:18px}.invoice .invoice-top p{font-size:13px}.invoice .invoice-meta p{font-size:13px}.invoice .billto h3{font-size:18px;margin:6px 0}.invoice-items td{font-size:13px}.invoice .totals p{font-size:13px}.invoice .totals h2{font-size:21px}}

@media print{nav,.toolbar,.page-actions{display:none!important}body{background:#fff}.container{margin:0;padding:0}.invoice{border:0;box-shadow:none}}

/* BILLI PRO auth refinement v13 */
.auth-page{overflow-x:hidden}
.auth{overflow:hidden}
.auth .muted{font-size:16px;line-height:1.6;margin:10px 0 18px}
.auth .alert,.auth .success{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.auth label{font-size:14px}
.auth input{min-height:50px;font-size:16px}
.auth .btn{min-height:50px}
.auth p:last-child{margin-bottom:0}
@media(max-width:480px){
  .auth-page{padding:16px;place-items:center}
  .auth{width:100%;padding:22px 18px;border-radius:18px}
  .auth h1{font-size:28px;line-height:1.15;margin:12px 0 8px}
  .auth .muted{font-size:15px}
  .auth .btn{min-height:52px}
}


/* BILLI PRO v20 — mobile-first workspace polish */
html,body{max-width:100%;overflow-x:hidden}.container{min-width:0}.hero>div{min-width:0}.hero h1,.hero p{overflow-wrap:anywhere}.card{min-width:0}.quick-links{display:grid;gap:10px}.quick-links a{padding:11px 0;border-bottom:1px solid #edf0f4;font-weight:750}.quick-links a:last-child{border-bottom:0}.break-anywhere{overflow-wrap:anywhere;word-break:break-word}
.responsive-table{width:100%;overflow:hidden;padding:0}.responsive-table table{min-width:0;width:100%;table-layout:fixed}.responsive-table th,.responsive-table td{overflow-wrap:anywhere;word-break:break-word}.responsive-table td form{margin:0}.responsive-table .btn{white-space:normal;text-align:center}
@media(max-width:760px){
  .container{margin:22px auto;padding:0 14px}.hero{margin-bottom:18px}.hero h1{font-size:clamp(27px,8vw,36px)}.hero .btn{width:100%}.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:18px}.page-actions{width:100%}.page-actions .btn{min-width:0}
  .responsive-table{padding:8px;background:transparent;box-shadow:none;border:0;overflow:visible}.responsive-table table,.responsive-table tbody{display:block;width:100%}.responsive-table thead{display:none}.responsive-table tr{display:block;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 15px;margin:0 0 12px;box-shadow:0 8px 24px rgba(23,32,51,.05)}.responsive-table td{display:grid;grid-template-columns:minmax(92px,38%) minmax(0,1fr);gap:10px;width:100%;padding:9px 0;border-bottom:1px solid #edf0f4;text-align:right;vertical-align:middle}.responsive-table td:last-child{border-bottom:0;padding-bottom:2px}.responsive-table td::before{content:attr(data-label);font-size:10px;line-height:1.3;text-transform:uppercase;letter-spacing:.7px;font-weight:900;color:#7a869b;text-align:left}.responsive-table td:empty{display:none}.responsive-table td .badge{justify-self:end}.responsive-table td .btn{justify-self:end;max-width:100%;width:auto}.responsive-table td form{display:flex;justify-content:flex-end}.responsive-table td form .btn{width:auto}.responsive-table .empty{background:#fff;border:1px solid var(--line);border-radius:15px;margin:0;padding:24px 16px}.responsive-table+*{min-width:0}
  .item-row-wrap{overflow:visible}.item-head{display:none}.item-row{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0;margin-bottom:12px;border-bottom:1px solid #edf0f4}.item-row>*{min-width:0}.item-row .remove-item{display:inline-flex;grid-column:2;justify-self:end;width:auto}.item-row input,.item-row select{min-height:46px;margin-top:0}.invoice-live-total{justify-content:space-between}.invoice-live-total strong{margin-left:0}
}
@media(max-width:480px){
  .container{padding:0 12px}.card{padding:16px}.dashboard-stats{gap:9px}.stat{padding:14px}.stat strong{font-size:20px}.responsive-table tr{padding:10px 13px}.responsive-table td{grid-template-columns:42% minmax(0,58%);font-size:13px}.responsive-table td::before{font-size:9px}.responsive-table td .btn{min-height:40px;padding:8px 11px}.page-actions{display:grid;grid-template-columns:1fr}.btn{width:100%}.item-row{grid-template-columns:1fr}.item-row .remove-item{grid-column:1}.hero{gap:12px}.hero .page-actions{display:grid}.toolbar{padding-left:12px;padding-right:12px}
}
@media(max-width:760px){
  .responsive-table table>tr:first-child:has(th){display:none}
  .responsive-table table>tbody>tr:first-child:has(th){display:none}
}


/* BILLI PRO V21 — clarity, marketability and growth polish */
.field-value{font-weight:800;color:var(--text);overflow-wrap:anywhere}.field-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.75px;color:#7a869b;font-weight:900;margin-bottom:4px}.record-id{font-size:11px;font-weight:850;color:#7a869b;background:#f4f6fa;border:1px solid var(--line);padding:5px 8px;border-radius:999px;white-space:nowrap}.page-note{margin-bottom:18px}.page-note strong{color:var(--text)}.form-section{padding:2px 0 22px;margin-bottom:22px;border-bottom:1px solid #edf0f4}.form-section:last-of-type{margin-bottom:18px}.form-section-title{font-size:16px;font-weight:900;color:var(--text);margin-bottom:3px}.form-section-copy{font-size:13px;color:var(--muted);margin-bottom:10px}.section-subtitle{margin:-7px 0 16px;font-size:13px}.stat-help{display:block;font-size:11px;color:#8a95a7;margin-top:4px}.customer-card{border:1px solid var(--line);border-radius:15px;padding:16px;margin-bottom:12px;background:#fff;box-shadow:0 7px 22px rgba(23,32,51,.04)}.customer-card:last-child{margin-bottom:0}.customer-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:13px;border-bottom:1px solid #edf0f4}.customer-card-head strong{display:block;font-size:17px;line-height:1.35;overflow-wrap:anywhere}.customer-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding-top:14px}.customer-fields>div{min-width:0}.customer-fields span:last-child{display:block;overflow-wrap:anywhere;color:#334155}.customer-fields .wide{grid-column:1/-1}.hero-proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.hero-proof span{background:#fff;border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#536177}.landing-enhanced{min-height:auto;padding:65px 0 45px;background:radial-gradient(circle at 15% 10%,#eef3ff 0,#f5f7fb 45%,#f5f7fb 100%)}.preview-enhanced{padding:20px}.preview-status{font-size:11px;font-weight:850;color:#536177;background:#f3f6fb;padding:6px 9px;border-radius:999px}.preview-label{font-size:10px;font-weight:900;letter-spacing:.7px;color:#7a869b}.preview-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-mini-grid>div{border:1px solid #edf0f4;border-radius:12px;padding:13px}.preview-mini-grid small{display:block;color:#7a869b;font-weight:750}.preview-mini-grid strong{font-size:22px}.marketing-section{padding:70px 0}.workflow-section{background:#fff;border-top:1px solid #edf0f4;border-bottom:1px solid #edf0f4}.section-heading{max-width:720px;margin-bottom:30px}.section-heading h2{font-size:clamp(28px,4vw,42px);letter-spacing:-1.2px;line-height:1.12;margin:6px 0 9px}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.feature-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:0 9px 28px rgba(23,32,51,.045)}.feature-icon{font-size:11px;font-weight:950;color:var(--primary);letter-spacing:1px}.feature-card h3{margin:12px 0 7px;font-size:18px}.feature-card p{margin:0;color:var(--muted);font-size:14px}.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.workflow-step{display:flex;gap:13px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}.workflow-step>span{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;background:var(--text);color:#fff;border-radius:50%;font-weight:900}.workflow-step h3{margin:0 0 5px;font-size:17px}.workflow-step p{margin:0;font-size:13px}.cta-section{padding:10px 0 70px}.cta-card{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:30px;border-radius:22px;background:var(--text);color:#fff;box-shadow:0 18px 45px rgba(23,32,51,.15)}.cta-card .eyebrow{color:#b9c6dd}.cta-card h2{font-size:clamp(25px,4vw,38px);line-height:1.12;letter-spacing:-1px;margin:7px 0}.cta-card p{margin:0;color:#c8d0dd}.cta-card .btn{background:#fff;color:var(--text)!important;border-color:#fff;box-shadow:none}.site-footer{background:#fff;border-top:1px solid var(--line)}.site-footer .container{margin:0 auto;padding-top:24px;padding-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:20px}.site-footer .muted{margin:7px 0 0;font-size:13px}.footer-links{display:flex;gap:15px;font-weight:750;font-size:13px}.footer-links a{color:#536177}.responsive-table td .field-value{justify-self:end;text-align:right}
@media(max-width:1000px){.feature-grid{grid-template-columns:1fr 1fr}.workflow-grid{grid-template-columns:1fr}.customer-fields{grid-template-columns:1fr}.customer-fields .wide{grid-column:auto}.cta-card{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.landing-enhanced{padding:35px 0 28px}.landing-enhanced .container{padding:0 14px}.hero-proof{gap:6px}.hero-proof span{font-size:11px}.feature-grid{grid-template-columns:1fr}.marketing-section{padding:50px 0}.marketing-section .container{padding:0 14px}.section-heading{margin-bottom:22px}.feature-card{padding:19px}.workflow-step{padding:17px}.cta-section{padding:0 0 50px}.cta-card{padding:23px 19px;border-radius:17px}.site-footer .container{padding:22px 14px;align-items:flex-start;flex-direction:column}.footer-links{width:100%;justify-content:space-between}.customer-card-head{flex-direction:column}.customer-fields{gap:12px}.responsive-table td .field-value{text-align:right}.form-section{padding-bottom:18px;margin-bottom:18px}}
@media(max-width:480px){.landing-enhanced h1{font-size:35px}.preview{border-radius:18px}.feature-card{border-radius:15px}.hero-proof span{width:100%;text-align:center}.cta-card .btn{width:100%}.customer-card{padding:14px}.customer-card-head strong{font-size:16px}}

/* BILLI PRO V22 — paid plans + manual payment workflow */
.plan-list{margin:18px 0 0;padding-left:19px;color:#536177}.plan-list li{margin:7px 0}.payment-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.method-card{margin:0!important;display:flex;align-items:flex-start;gap:10px;padding:15px;border:1px solid var(--line);border-radius:13px;background:#fff;cursor:pointer}.method-card input{width:auto;margin:3px 0 0;box-shadow:none}.method-card span{display:block}.method-card b{display:block;color:var(--text);font-size:14px}.method-card small{display:block;color:var(--muted);font-weight:500;margin-top:3px}.payment-box{margin:14px 0;padding:16px;border:1px solid #dbe3ff;background:#f5f7ff;border-radius:13px}.payment-box-title{font-weight:900;font-size:15px}.upi-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:11px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}.upi-line strong{overflow-wrap:anywhere}.small-copy{font-size:12px}.plan-active{border-color:#cfe8d8;background:linear-gradient(180deg,#fff,#fbfffc)}.billing-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.billing-summary>div{padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff}.billing-summary span{display:block;color:var(--muted);font-size:12px;font-weight:750}.billing-summary strong{display:block;margin-top:5px;font-size:20px}.pending-card{margin-top:18px;border-color:#f2dfaa;background:#fffdf5}.admin-actions{display:grid;gap:7px}.danger-btn{background:#fff0ef!important;color:#a93232!important;border-color:#ffd2cf!important;box-shadow:none!important}
@media(max-width:760px){.payment-method-grid,.billing-summary{grid-template-columns:1fr}.upi-line{align-items:stretch;flex-direction:column}.upi-line .btn{width:100%}.admin-actions .btn{width:100%}}

/* BILLI PRO V23 — admin account-level subscription controls */
.account-billing-list{display:grid;gap:12px}.account-billing-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}.account-billing-card h3{margin:9px 0 4px;font-size:19px;overflow-wrap:anywhere}.account-billing-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}.account-billing-status small{color:var(--muted);font-size:12px}.account-payment-form{grid-column:1/-1;display:grid;grid-template-columns:160px 190px minmax(180px,1fr) auto;gap:9px;padding-top:14px;border-top:1px solid #edf0f4}.input{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font:inherit;outline:none}.input:focus{border-color:#9fb4ef;box-shadow:0 0 0 3px rgba(36,87,214,.1)}.small-input{min-height:40px;padding:8px 10px;font-size:12px}.admin-record-form{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.admin-record-form .input{font-size:12px;min-height:40px}.admin-record-form input{min-width:0}.admin-record-form .btn{grid-column:1/-1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.account-billing-card{grid-template-columns:1fr;gap:12px}.account-billing-status{align-items:flex-start;text-align:left}.account-payment-form{grid-template-columns:1fr}.account-payment-form .btn{width:100%}.admin-record-form{grid-template-columns:1fr}.admin-record-form .btn{grid-column:1}}

/* BILLI PRO V24 — robust mobile admin billing controls */
.account-payment-form,.admin-record-form{min-width:0;width:100%;box-sizing:border-box}
.account-payment-form>*,.admin-record-form>*{min-width:0;max-width:100%}
.account-payment-form select,.account-payment-form input,.admin-record-form select,.admin-record-form input{width:100%;min-width:0;box-sizing:border-box}
.account-payment-form .btn,.admin-record-form .btn{min-width:0;max-width:100%;overflow-wrap:anywhere}
.account-payment-form .form-help{font-size:12px;color:var(--muted);margin-top:-2px}
@media(max-width:760px){
  .account-billing-card{padding:16px}
  .account-billing-card>div:first-child{min-width:0}
  .account-billing-status{width:100%;min-width:0}
  .account-payment-form{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%!important;padding-top:14px}
  .account-payment-form .input,.account-payment-form select,.account-payment-form input{display:block;width:100%!important;min-width:0!important;max-width:none!important}
  .account-payment-form .btn{display:flex;width:100%!important;min-width:0!important}
  .admin-record-form{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;width:100%!important}
  .admin-record-form .input,.admin-record-form select,.admin-record-form input,.admin-record-form .btn{width:100%!important;min-width:0!important;max-width:none!important}
}
@media(max-width:480px){
  .account-billing-card{border-radius:15px;padding:14px}
  .account-billing-card h3{font-size:18px}
  .account-payment-form{gap:9px!important}
  .account-payment-form select,.account-payment-form input{min-height:46px;padding:11px 12px}
  .account-payment-form .btn{min-height:46px}
}

/* BILLI PRO V25 — New Invoice clarity-first form */
.invoice-form-section{padding:2px 0 4px}.invoice-section-heading{margin-bottom:18px}.invoice-section-heading h2,.invoice-form-section>h2{margin:2px 0 4px;font-size:22px;letter-spacing:-.3px}.section-kicker{font-size:10px;letter-spacing:1.25px;font-weight:950;color:#7a869b;margin-bottom:4px}.invoice-section-copy{margin:0 0 16px;font-size:13px}.invoice-details-grid{gap:20px}.invoice-field{min-width:0}.invoice-field label{display:flex;align-items:center;gap:7px;margin:0 0 7px;font-size:14px;color:#263248;font-weight:900}.invoice-field .optional{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#7a869b;background:#f3f5f8;border:1px solid #e3e7ed;padding:3px 6px;border-radius:999px}.invoice-field input,.invoice-field select,.invoice-field textarea{margin:0;min-height:48px;border-radius:12px}.invoice-field small{display:block;margin-top:6px;color:#7a869b;font-size:11px;font-weight:550;line-height:1.4}.invoice-items-heading{align-items:flex-end}.invoice-items-heading>div{min-width:0}.invoice-items-heading h2{margin:2px 0 4px}.invoice-items-heading .section-subtitle{margin:0;max-width:650px}.add-item-btn{flex:0 0 auto;width:auto}.item-row-wrap{overflow-x:auto}.item-head,.item-row{grid-template-columns:1fr 2fr 1fr 1fr 1.25fr 76px;align-items:start}.item-head{margin-bottom:8px}.item-row{padding:10px 0}.item-field{min-width:0}.item-field label{display:none}.item-field input,.item-field select{margin:0;min-height:46px}.item-field small{display:none}.remove-item{align-self:start;min-height:46px;padding:8px 10px;white-space:normal}.invoice-live-total{padding:16px 0 4px;margin:10px 0 0;border-top:1px solid #edf0f4;align-items:center}.invoice-live-total span{font-weight:800;color:#536177}.invoice-live-total strong{font-size:26px}.invoice-notes-grid{align-items:start}.invoice-notes-grid textarea{min-height:115px}.invoice-submit-box{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:8px;padding:18px;border:1px solid #dbe3ff;background:#f5f7ff;border-radius:14px}.invoice-submit-box strong,.invoice-submit-box span{display:block}.invoice-submit-box strong{font-size:15px}.invoice-submit-box span{margin-top:3px;color:#718096;font-size:12px}.invoice-submit-box .btn{width:auto;flex:0 0 auto}
@media(max-width:760px){.invoice-form-section{padding-bottom:2px}.invoice-section-heading{margin-bottom:16px}.invoice-section-heading h2,.invoice-form-section>h2{font-size:20px}.invoice-details-grid{gap:16px}.invoice-field label{font-size:14px}.invoice-field input,.invoice-field select{min-height:49px}.invoice-items-heading{display:flex;align-items:flex-start;flex-direction:column;gap:12px}.add-item-btn{width:100%}.item-row-wrap{overflow:visible}.item-head{display:none}.item-row{display:grid;grid-template-columns:1fr;min-width:0;gap:11px;padding:15px 0 17px;margin-bottom:8px;border:0;border-bottom:1px solid #e8edf3}.item-field{display:grid;grid-template-columns:minmax(105px,.55fr) minmax(0,1fr);gap:10px;align-items:start}.item-field label{display:flex;align-items:center;margin:0;padding-top:12px;font-size:12px;color:#536177;font-weight:900}.item-field input,.item-field select{min-height:46px}.item-field small{display:block;grid-column:2;margin-top:-5px;font-size:10px}.remove-item{justify-self:end;width:auto;min-height:42px}.invoice-live-total{margin-top:4px;padding-top:15px}.invoice-live-total strong{font-size:24px}.invoice-notes-grid{gap:14px}.invoice-submit-box{display:block;padding:16px}.invoice-submit-box .btn{width:100%;margin-top:13px}.section-subtitle{font-size:12px;line-height:1.55}}
@media(max-width:480px){.invoice-field small{font-size:10px}.item-field{grid-template-columns:100px minmax(0,1fr)}.item-field label{font-size:11px}.invoice-submit-box{border-radius:13px}.invoice-live-total{font-size:14px}}

/* V25 — cleaner customer contact presentation on finished invoice */
.invoice .business-contact,.invoice .customer-contact{margin:0;color:#536177;line-height:1.65}.invoice .contact-line{display:block;overflow-wrap:anywhere}.invoice .customer-contact{margin-top:6px}.invoice .billto h3{margin-bottom:4px}
@media(min-width:761px){.item-row .remove-item{display:flex;align-items:center;justify-content:center;width:76px;min-height:46px;padding:8px 7px}}

/* BILLI PRO V26 — invoice lifecycle, edit/delete, returns & refunds */
.invoice-view-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.invoice-view-actions form{margin:0}.invoice-view-actions .btn{white-space:nowrap}.invoice-list-actions{display:flex;gap:7px;flex-wrap:wrap}.invoice-adjustment-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid #edf0f4}.invoice-adjustment-summary>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fafbfc}.invoice-adjustment-summary span{display:block;color:var(--muted);font-size:11px;font-weight:800}.invoice-adjustment-summary b{display:block;margin-top:4px;font-size:16px}.adjustment-form{margin-bottom:18px}.adjustment-form textarea{min-height:100px}.invoice-footer-note{text-align:center;color:#8792a5;margin-top:35px}.danger-btn{background:#fff0ef!important;color:#a93232!important;border-color:#ffd2cf!important;box-shadow:none!important}
@media(max-width:760px){.invoice-view-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}.invoice-view-actions .btn,.invoice-view-actions form,.invoice-view-actions form .btn{width:100%}.invoice-view-actions .btn:last-child{grid-column:1/-1}.invoice-list-actions{display:grid;grid-template-columns:1fr 1fr}.invoice-list-actions .btn{width:100%;text-align:center}.invoice-adjustment-summary{grid-template-columns:1fr}.toolbar.invoice-toolbar{align-items:flex-start;gap:12px}.toolbar.invoice-toolbar .back-link{margin-bottom:0}}
@media(max-width:480px){.invoice-view-actions{grid-template-columns:1fr}.invoice-view-actions .btn:last-child{grid-column:auto}.invoice-view-actions form{grid-column:auto}.invoice-list-actions{grid-template-columns:1fr}.invoice-adjustment-summary>div{padding:11px 12px}}

/* BILLI PRO V27 — simple invoice-style creation/editor */
.invoice-simple-form{padding:0;overflow:hidden}
.invoice-simple-section{padding:28px 30px;border-bottom:1px solid #edf0f4}
.invoice-simple-section:last-of-type{border-bottom:0}
.invoice-simple-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.invoice-simple-heading h2{margin:2px 0 5px;font-size:23px;letter-spacing:-.35px}
.invoice-simple-heading p{margin:0;max-width:720px;font-size:13px;line-height:1.55}
.invoice-price-section{background:#fbfcff}
.invoice-price-controls{max-width:850px;gap:18px}
.invoice-calculation{margin-top:20px;border:1px solid #dfe5ef;border-radius:15px;background:#fff;overflow:hidden}
.invoice-calculation>div{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 16px;border-bottom:1px solid #edf0f4}
.invoice-calculation>div:last-child{border-bottom:0}
.invoice-calculation span{font-size:14px;color:#536177;font-weight:750}
.invoice-calculation strong{font-size:15px;color:#202b3f;text-align:right}
.invoice-calculation .negative{color:#a54848}
.invoice-calculation em{font-style:normal;color:#7a869b;font-weight:700}
.invoice-calculation .calc-total{padding:17px 16px;background:#f4f7ff}
.invoice-calculation .calc-total span{color:#202b3f;font-size:16px;font-weight:900}
.invoice-calculation .calc-total strong{font-size:25px;color:#2457d6}
.calculation-note{margin-top:11px;padding:12px 14px;border:1px solid #e0e7f7;border-radius:11px;background:#f7f9fe;color:#68758a;font-size:12px;line-height:1.55}
.calculation-note strong{color:#334158}
.invoice-submit-box{border-radius:0;margin-top:0;border:0;border-top:1px solid #e1e7f2;padding:22px 30px;background:#f5f7ff}
@media(max-width:760px){
 .invoice-simple-section{padding:22px 18px}
 .invoice-simple-heading{display:block;margin-bottom:17px}
 .invoice-simple-heading .add-item-btn{width:100%;margin-top:13px}
 .invoice-simple-heading h2{font-size:21px}
 .invoice-calculation>div{padding:13px 14px}
 .invoice-calculation .calc-total strong{font-size:22px}
 .invoice-submit-box{padding:18px}
}
@media(max-width:480px){
 .invoice-simple-section{padding:20px 15px}
 .invoice-calculation span{font-size:13px}
 .invoice-calculation strong{font-size:14px}
 .calculation-note{font-size:11px}
}

/* BILLI PRO V28 — private customer-facing Trash, without internal storage wording */
.trash-actions{display:flex;gap:7px;flex-wrap:wrap}.trash-actions form{margin:0}.trash-actions .btn{white-space:nowrap}.trash-card{overflow:hidden}
@media(max-width:760px){.trash-actions{display:grid;grid-template-columns:1fr}.trash-actions .btn{width:100%}}

/* BILLI PRO V32 — focused billing clarity; preserve the V30/V28 visual system */
.readonly-choice{min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f8f9fb;display:flex;flex-direction:column;justify-content:center}.readonly-choice strong{font-size:15px}.readonly-choice small{margin-top:3px}.form-help-box{margin:16px 0;padding:14px 16px;border:1px solid #dfe6f4;border-radius:12px;background:#f7f9fd;color:var(--muted);line-height:1.55}.form-help-box strong{color:var(--text)}.return-simple-form .invoice-field small{line-height:1.45}.return-simple-form textarea{min-height:105px}.return-simple-form [hidden]{display:none!important}@media(max-width:760px){.return-simple-form .grid2{grid-template-columns:1fr}.form-help-box{font-size:13px}.return-simple-form .btn{width:100%}}

.history-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.history-actions form{margin:0}.history-actions .btn{white-space:nowrap}@media(max-width:760px){.history-actions{display:grid;grid-template-columns:1fr;width:100%}.history-actions .btn,.history-actions form,.history-actions form .btn{width:100%}}
.customer-card-actions{margin-top:12px}.customer-card-actions .btn{min-width:90px}

/* V36 growth foundation: customer-facing invoice sharing and subtle BILLI promotion. */
.public-invoice-toolbar{max-width:1040px;margin:18px auto 0;padding:0 20px}.public-invoice-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.public-invoice-actions .btn{white-space:nowrap}.public-invoice-promo{display:grid;gap:4px;margin-top:24px;padding:16px 18px;border:1px solid #dfe6f4;border-radius:14px;background:#f7f9fd}.public-invoice-promo strong{font-size:14px}.public-invoice-promo span{color:var(--muted);font-size:12px;line-height:1.5}.public-invoice-promo a{color:#2457d6;font-weight:850;text-decoration:none;margin-top:3px}.invoice-owner-promo{margin-top:22px}.public-invoice-card{max-width:100%;}.public-invoice-container{padding-top:10px}
@media(max-width:760px){.public-invoice-toolbar{padding:0 14px}.public-invoice-actions{display:grid;grid-template-columns:1fr 1fr}.public-invoice-actions .btn{width:100%;text-align:center}.public-invoice-actions .btn:first-child{grid-column:1/-1}.invoice-view-actions .btn{white-space:normal}.invoice-view-actions .secondary{grid-column:1/-1}.public-invoice-promo{padding:14px}.public-invoice-container{padding-top:4px}}
@media print{.public-invoice-toolbar,.invoice-owner-promo{display:none!important}.public-invoice-container{padding:0!important}.public-invoice-card{box-shadow:none!important;border:0!important}}


/* BILLI PRO V37 — first-class invoice sharing, with clean mobile arrangement. */
.invoice-owner-promo{display:flex;align-items:center;justify-content:space-between;gap:18px}
.invoice-owner-promo .share-copy{display:grid;gap:4px;min-width:0}
.invoice-owner-promo .share-copy strong{font-size:15px;line-height:1.35}
.invoice-owner-promo .share-copy span{color:var(--muted);font-size:12px;line-height:1.5}
.invoice-share-actions{display:flex;gap:8px;flex:0 0 auto}
.invoice-share-actions .btn{min-width:150px}
@media(max-width:760px){
 .invoice-owner-promo{display:block}
 .invoice-owner-promo .share-copy{margin-bottom:13px}
 .invoice-share-actions{display:grid;grid-template-columns:1fr 1fr}
 .invoice-share-actions .btn{width:100%;min-width:0;min-height:48px}
}
@media(max-width:480px){
 .invoice-share-actions{grid-template-columns:1fr}
}


/* BILLI PRO V38 — professional invoice branding and clearer invoice hierarchy. */
.invoice-brand-row{display:flex;align-items:center;gap:10px;min-height:34px}.invoice-business-logo{width:48px;height:48px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px}.invoice-brand-row .logo{font-size:18px}.invoice-status{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:900;line-height:1.2;background:#eef2f6;color:#536177}.invoice-status.status-paid{background:#e9f8ef;color:#176a3d}.invoice-status.status-partially-paid,.invoice-status.status-partial{background:#fff5d9;color:#8a5b00}.invoice-status.status-unpaid,.invoice-status.status-overdue{background:#fff0ef;color:#a93232}.invoice-status.status-cancelled{background:#f1f3f5;color:#64748b}.invoice .invoice-meta p{line-height:1.8}.invoice .totals h2{padding-top:14px;margin-top:10px;border-top:2px solid var(--text)}.invoice .invoice-adjustment-summary b{word-break:break-word}.logo-upload-row{display:flex;align-items:center;gap:18px}.logo-preview{width:76px;height:76px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}.logo-preview img{width:100%;height:100%;object-fit:contain;padding:7px}.logo-upload-row label{flex:1}.invoice-business-logo + .logo{font-size:18px}
@media(max-width:760px){.invoice-brand-row{gap:9px}.invoice-business-logo{width:44px;height:44px}.logo-upload-row{align-items:flex-start;flex-direction:column;gap:8px}.logo-preview{width:72px;height:72px}.logo-upload-row label{width:100%}.invoice .invoice-meta p{line-height:1.7}.invoice .totals h2{padding-top:12px}}
@media(max-width:480px){.invoice-business-logo{width:40px;height:40px}.invoice-brand-row .logo{font-size:17px}.invoice-status{font-size:10px;padding:3px 7px}}
@media print{.invoice-business-logo{print-color-adjust:exact;-webkit-print-color-adjust:exact}.invoice-status{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* V38.1 logo management */
.logo-actions{flex:1;display:grid;gap:10px;min-width:0}.remove-logo-option{width:100%;box-sizing:border-box;display:flex!important;align-items:center;gap:11px!important;margin:0!important;padding:12px 14px!important;border:1px solid #d8dee8;border-radius:11px;background:#fff;color:#334155!important;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s,transform .16s;font-size:13px!important;font-weight:800!important}.remove-logo-option:hover{border-color:#c7ced9;background:#fafbfc}.remove-logo-option input{position:absolute;width:1px!important;height:1px!important;opacity:0!important;margin:-1px!important;padding:0!important;pointer-events:none}.remove-logo-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border:1px solid #cfd6e0;border-radius:8px;background:#fff;color:#7a869b;font-size:21px;font-weight:500;line-height:1}.remove-logo-text{display:flex;flex-direction:column;gap:1px;min-width:0}.remove-logo-text strong{font-size:13px;color:#263248}.remove-logo-text small{font-size:11px;color:#7a869b;font-weight:600;line-height:1.35}.remove-logo-option:has(input:checked){border-color:#e6b7b3;background:#fff7f6;box-shadow:0 0 0 3px rgba(169,50,50,.08)}.remove-logo-option:has(input:checked) .remove-logo-icon{border-color:#a93232;background:#a93232;color:#fff;font-size:20px}.remove-logo-option:has(input:checked) .remove-logo-text strong{color:#a93232}.remove-logo-option:focus-within{box-shadow:0 0 0 3px rgba(36,87,214,.11)}.logo-actions label:first-child input{margin-top:6px}
@media(max-width:760px){.logo-actions{width:100%}.remove-logo-option{padding:12px 13px!important}}

/* BILLI PRO V39 — dashboard work hub */
.dashboard-page{padding-bottom:40px}
.dashboard-focus{margin:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #dfe6f4;border-radius:15px;background:#f7f9fd}
.dashboard-focus>div{display:flex;align-items:baseline;gap:9px;min-width:0}.dashboard-focus strong{font-size:25px;color:#2457d6}.dashboard-focus span{font-size:13px;color:var(--muted);font-weight:700}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}.section-head h2{margin:0 0 4px}.section-head p{margin:0;font-size:12px}.text-link{color:#2457d6;text-decoration:none;font-size:12px;font-weight:850;white-space:nowrap;padding-top:5px}
.dashboard-main-grid{align-items:start}.dashboard-list-card{min-width:0}.dashboard-list{border-top:1px solid #edf0f4}.dashboard-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid #edf0f4;text-decoration:none;color:inherit}.dashboard-row:last-child{border-bottom:0}.dashboard-row-main{display:grid;gap:4px;min-width:0}.dashboard-row-main strong{font-size:14px}.dashboard-row-main span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-row-side{display:grid;justify-items:end;gap:5px;flex:0 0 auto}.dashboard-row-side>strong{font-size:14px}.dashboard-row-side .invoice-status{font-size:10px}.payment-row{cursor:default}.quick-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick-action-grid .btn{width:100%;text-align:center}.plan-summary{display:grid;gap:7px}.plan-summary strong{font-size:20px}.plan-summary span{font-size:12px;color:var(--muted);line-height:1.5}.plan-summary .btn{margin-top:7px;width:max-content}.empty-state{padding:20px 4px 6px}.empty-state strong{font-size:15px}.empty-state p{font-size:12px;color:var(--muted);line-height:1.5;margin:5px 0 13px}
@media(max-width:760px){.dashboard-focus{display:block;padding:15px}.dashboard-focus .btn{width:100%;margin-top:12px;text-align:center}.section-head{align-items:center}.dashboard-row{align-items:flex-start}.dashboard-row-side{padding-top:1px}.quick-action-grid{grid-template-columns:1fr}.plan-summary .btn{width:100%;text-align:center}}
@media(max-width:480px){.dashboard-focus strong{font-size:22px}.dashboard-row{gap:9px}.dashboard-row-main span{max-width:190px}.dashboard-row-side>strong{font-size:13px}}

/* V39.2 — one-click logo removal, aligned with other actions */
.remove-logo-form{margin:0!important;width:100%}
.remove-logo-button{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:11px;margin:0;padding:12px 14px;border:1px solid #d8dee8;border-radius:11px;background:#fff;color:#334155;text-align:left;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s,transform .16s;font:inherit}
.remove-logo-button:hover{border-color:#c7ced9;background:#fafbfc}
.remove-logo-button:active{transform:translateY(1px)}
.remove-logo-button .remove-logo-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border:1px solid #cfd6e0;border-radius:8px;background:#fff;color:#7a869b;font-size:21px;font-weight:500;line-height:1}
.remove-logo-button .remove-logo-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.remove-logo-button .remove-logo-text strong{font-size:13px;color:#263248}
.remove-logo-button .remove-logo-text small{font-size:11px;color:#7a869b;font-weight:600;line-height:1.35}
.remove-logo-button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(36,87,214,.12);border-color:#2457d6}
@media(max-width:760px){.remove-logo-button{padding:12px 13px}}

/* BILLI PRO V40 — payment reminder action */
.reminder-btn{border-color:#dfe6f4;background:#fff;color:#2457d6!important}
.reminder-btn:hover{border-color:#c7d4ee;background:#f7f9fd}
@media(max-width:760px){.invoice-share-actions .reminder-btn{grid-column:1/-1}}

/* V41 reports */
.report-filter{margin-bottom:20px}.report-filter h2{margin:0 0 4px}.report-filter .muted{margin:0}.report-filter-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:17px}.report-filter-grid label{margin:0}.report-filter-grid .btn{min-width:145px}.reports-stats{margin-bottom:18px}.report-net{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:center;margin-bottom:20px}.report-net>div{padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}.report-net span{display:block;color:var(--muted);font-size:12px;font-weight:800}.report-net strong{display:block;margin-top:5px;font-size:21px}.report-net small{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}.report-net .btn{white-space:nowrap}.report-status-list{display:grid;gap:10px}.report-status-list>div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #edf0f4}.report-status-list>div:last-child{border-bottom:0}.report-status-list strong{font-size:17px}.report-customer-list{display:grid;gap:0}.report-customer-list>div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf0f4}.report-customer-list>div:last-child{border-bottom:0}.report-customer-list div div{display:grid;gap:3px;min-width:0}.report-customer-list span{font-size:11px;color:var(--muted)}.report-customer-list>div>strong{white-space:nowrap}.report-notes{display:grid;gap:10px}.report-notes p{margin:0;padding:10px 12px;background:var(--surface-2);border-radius:10px;color:#536177;font-size:12px;line-height:1.5}.report-notes strong{color:var(--text)}
@media(max-width:760px){.report-filter-grid{grid-template-columns:1fr 1fr}.report-filter-grid .btn{grid-column:1/-1;width:100%}.report-net{grid-template-columns:1fr}.report-net .btn{width:100%;text-align:center}.reports-grid{grid-template-columns:1fr}}
@media(max-width:480px){.report-filter-grid{grid-template-columns:1fr}.report-filter-grid .btn{grid-column:auto}.report-net strong{font-size:20px}}

.report-quick-ranges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}.report-quick-ranges>span{font-size:12px;color:var(--muted);font-weight:800;margin-right:2px}.report-quick-ranges .btn{width:auto;min-width:0}
@media(max-width:760px){.report-quick-ranges{display:grid;grid-template-columns:1fr 1fr}.report-quick-ranges>span{grid-column:1/-1}.report-quick-ranges .btn{width:100%;text-align:center}}
@media(max-width:480px){.report-quick-ranges{grid-template-columns:1fr}.report-quick-ranges>span{grid-column:auto}}

/* V43: simple business-data export page */
.export-grid{align-items:stretch}.export-card{display:flex;flex-direction:column}.export-card p{flex:1}.export-icon{width:42px;height:42px;border:1px solid #dbe3f0;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:20px;margin-bottom:12px}.export-card .btn{margin-top:14px;text-align:center}.export-intro,.export-note{margin-bottom:16px}.export-note{margin-top:16px}.export-note p{margin-bottom:0}.export-card h2{margin-top:0}
@media (max-width:700px){.export-grid{grid-template-columns:1fr}.export-card .btn{width:100%;box-sizing:border-box}.export-intro,.export-note{padding:18px}}

/* BILLI PRO V44 — simple first-use onboarding. */
.getting-started-card{margin-bottom:20px}.getting-started-list{display:grid;gap:9px}.getting-started-step{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:#fff;color:inherit;text-decoration:none;transition:border-color .15s,background .15s}.getting-started-step:hover{border-color:#cbd6eb;background:#fbfcff}.getting-started-step .step-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid #dfe6f4;background:#f7f9fd;color:#2457d6;font-weight:900;font-size:14px}.getting-started-step.done .step-mark,.getting-started-step.ready .step-mark{background:#eef8f1;border-color:#cfe8d5;color:#25733b}.getting-started-step strong{display:block;font-size:14px}.getting-started-step small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.45}.getting-started-step .step-arrow{justify-self:end;color:#2457d6;font-weight:900;font-size:18px}.getting-started-step.done strong{color:#3b4758}.getting-started-step.done small{color:#687384}@media(max-width:760px){.getting-started-step{grid-template-columns:38px minmax(0,1fr) 20px;padding:12px}.getting-started-step .step-mark{width:32px;height:32px}.getting-started-step small{font-size:11px}}
/* V45 export usability */
.export-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}.export-actions .btn{width:100%;text-align:center}.export-card .export-actions .btn{margin-top:0}
@media(max-width:700px){.export-actions{gap:8px}}

/* BILLI PRO V48 — simple public pricing and customer-to-BILLI growth */
.pricing-section{background:#fff;border-top:1px solid #edf0f4;border-bottom:1px solid #edf0f4}
.public-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px}
.public-price-card{border:1px solid var(--line);border-radius:18px;padding:24px;background:#fff;box-shadow:0 9px 28px rgba(23,32,51,.045);display:flex;flex-direction:column}
.public-price-card.featured{border:2px solid var(--primary);box-shadow:0 16px 40px rgba(36,87,214,.11)}
.public-price-card h3{font-size:34px;letter-spacing:-1px;margin:8px 0 4px}.public-price-card h3 span{font-size:14px;color:var(--muted);letter-spacing:0}
.public-price-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:8px 0 14px}.public-price-card ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;flex:1}.public-price-card li{font-size:13px;color:#334155}.public-price-card li:before{content:'✓';font-weight:900;color:var(--primary);margin-right:8px}.public-price-card .btn{width:100%;text-align:center;box-sizing:border-box}
.save-pill{display:inline-block;align-self:flex-start;margin:4px 0 3px;padding:6px 9px;border-radius:999px;background:#eef8f1;border:1px solid #cfe8d5;color:#25733b;font-size:11px;font-weight:900}
.pricing-note{margin:16px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:760px){.public-price-grid{grid-template-columns:1fr}.public-price-card{padding:20px}.pricing-section{padding-top:50px;padding-bottom:50px}}


/* V50 simple subscription conversion polish */
.simple-plan-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.simple-plan-step{background:#fff;border:1px solid #e1e7ef;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.simple-plan-step b{font-size:14px}.simple-plan-step span{font-size:12px;color:#718096;line-height:1.45}
.payment-trust-note{margin:12px 0 0;padding-top:10px;border-top:1px solid #edf0f4}
@media(max-width:720px){.simple-plan-steps{grid-template-columns:1fr}}


/* =========================================================
   BILLI PRO V54 — Invoice actions / responsive professional layout
   Full-width, fluid action system. No artificial empty columns.
   ========================================================= */
.invoice-toolbar{
  width:min(1180px,calc(100% - 32px));
  max-width:1180px;
  margin:16px auto 12px;
  padding:0;
  display:block;
}
.invoice-toolbar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  min-width:0;
}
.invoice-toolbar .back-link{
  min-height:42px;
  padding:9px 15px;
  border-radius:11px;
  font-weight:850;
  white-space:nowrap;
}
.invoice-toolbar-context{
  display:grid;
  justify-items:end;
  gap:1px;
  min-width:0;
  text-align:right;
}
.invoice-toolbar-context span{
  color:#8490a3;
  font-size:9px;
  font-weight:950;
  letter-spacing:1.35px;
}
.invoice-toolbar-context strong{
  color:#344054;
  font-size:12px;
  font-weight:850;
}
.invoice-action-groups{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1.28fr) minmax(0,.92fr) minmax(82px,.38fr);
  gap:8px;
  align-items:stretch;
}
.invoice-action-group{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  align-items:stretch;
  padding:5px;
  background:#fff;
  border:1px solid #e1e6ef;
  border-radius:13px;
  box-shadow:0 5px 18px rgba(23,32,51,.035);
}
.invoice-action-group .btn,
.invoice-action-group form,
.invoice-action-group form .btn{
  width:100%;
  min-width:0;
  margin:0;
}
.invoice-action-group .btn{
  min-height:40px;
  padding:9px 10px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  text-align:center;
}
.invoice-manage-group .btn:last-child{grid-column:1/-1}
.invoice-share-group .btn{min-width:0}
.invoice-output-group .btn{min-width:0}
.invoice-danger-group{grid-template-columns:1fr}
.invoice-danger-group form{display:block}
.invoice-danger-group .btn{min-height:40px}
.invoice-share-group .secondary:first-child{font-weight:900}
.invoice-action-group .btn:focus-visible{outline:3px solid rgba(36,87,214,.16);outline-offset:1px}

/* Medium/tablet: use the complete available width in two balanced rows. */
@media(max-width:1050px){
  .invoice-action-groups{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .invoice-manage-group,
  .invoice-share-group,
  .invoice-output-group,
  .invoice-danger-group{
    width:100%;
  }
}

/* Phone: no fixed-width/intrinsic grid tracks. Every action occupies the
   available screen width, while related actions stay visually grouped. */
@media(max-width:760px){
  .invoice-toolbar{
    width:calc(100% - 24px);
    max-width:none;
    margin:10px auto 10px;
  }
  .invoice-toolbar-head{
    display:block;
    margin-bottom:9px;
  }
  .invoice-toolbar .back-link{
    width:100%;
    justify-content:flex-start;
    min-height:46px;
    padding:10px 14px;
  }
  .invoice-toolbar-context{display:none}
  .invoice-action-groups{
    width:100%;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
  }
  .invoice-action-group{
    width:100%;
    min-width:0;
    padding:5px;
    gap:6px;
    border-radius:13px;
  }
  .invoice-action-group .btn,
  .invoice-action-group form,
  .invoice-action-group form .btn{
    width:100%;
    min-width:0;
  }
  .invoice-action-group .btn{
    min-height:46px;
    padding:9px 7px;
    font-size:12px;
    white-space:normal;
  }
  .invoice-manage-group{grid-column:1/-1}
  .invoice-manage-group .btn:last-child{grid-column:1/-1}
  .invoice-share-group{grid-column:1/-1}
  .invoice-share-group .btn{grid-column:1/-1}
  .invoice-output-group{grid-column:1/-1}
  .invoice-danger-group{grid-column:1/-1}
  .invoice-danger-group .btn{min-height:46px}
}

@media(max-width:480px){
  .invoice-toolbar{width:calc(100% - 20px)}
  .invoice-action-groups{gap:7px}
  .invoice-action-group{padding:4px;gap:5px}
  .invoice-action-group .btn{min-height:48px;font-size:12px}
}

@media(min-width:761px){
  .invoice-toolbar + .container{margin-top:20px}
}

@media print{
  .invoice-toolbar{display:none!important}
}

/* =========================================================
   BILLI PRO V60 — Invoice action & invoice-list visual QA
   Balanced controls, readable typography and consistent touch targets
   across desktop, tablet and mobile.
   ========================================================= */
.invoice-action-groups{
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.40fr) minmax(0,1.00fr) minmax(150px,.65fr);
  gap:10px;
}
.invoice-action-group{
  padding:6px;
  gap:7px;
  border-radius:14px;
}
.invoice-action-group .btn,
.invoice-action-group form,
.invoice-action-group form .btn{
  min-height:46px;
}
.invoice-action-group .btn{
  padding:10px 12px;
  font-size:13px;
  line-height:1.25;
  letter-spacing:-.05px;
}
.invoice-action-group .btn:hover{transform:none}
.invoice-action-group .btn:focus-visible{outline-width:3px;outline-offset:2px}
.invoice-danger-group .btn{min-height:46px}

/* Invoice history: action buttons share the available width equally. */
.invoice-list-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(92px,1fr));
  gap:8px;
  width:min(100%,210px);
}
.invoice-list-actions .btn{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:9px 12px;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  text-align:center;
}

@media(max-width:1050px){
  .invoice-action-groups{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
  .invoice-action-group .btn{font-size:13px}
}

@media(max-width:760px){
  .invoice-toolbar{width:calc(100% - 24px);margin:10px auto 12px}
  .invoice-action-groups{grid-template-columns:1fr;gap:8px}
  .invoice-action-group{padding:6px;gap:7px;border-radius:14px}
  .invoice-action-group .btn,
  .invoice-action-group form,
  .invoice-action-group form .btn{min-height:48px}
  .invoice-action-group .btn{
    padding:10px 9px;
    font-size:14px;
    font-weight:850;
  }
  .invoice-manage-group,
  .invoice-share-group,
  .invoice-output-group,
  .invoice-danger-group{grid-column:auto}
  .invoice-share-group .btn{grid-column:auto}
  .invoice-manage-group .btn:last-child{grid-column:1/-1}
  .invoice-danger-group .btn{min-height:48px}

  /* Two equal actions for Share/Copy and Download/Print. */
  .invoice-share-group,
  .invoice-output-group{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .invoice-share-group .btn,
  .invoice-output-group .btn{grid-column:auto}

  .invoice-list-actions{
    width:100%;
    max-width:260px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .invoice-list-actions .btn{
    min-height:44px;
    font-size:13px;
  }
  .responsive-table td{
    grid-template-columns:minmax(100px,40%) minmax(0,1fr);
    gap:12px;
    padding:10px 0;
    font-size:14px;
  }
  .responsive-table td::before{font-size:10px;letter-spacing:.75px}
  .responsive-table td .badge{font-size:12px}
}

@media(max-width:480px){
  .invoice-toolbar{width:calc(100% - 20px)}
  .invoice-action-groups{gap:8px}
  .invoice-action-group{padding:5px;gap:6px}
  .invoice-action-group .btn{min-height:50px;font-size:13.5px;padding:10px 7px}
  .invoice-list-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:250px;
    gap:7px;
  }
  .invoice-list-actions .btn{min-height:44px;padding:9px 10px;font-size:13px}
}

/* V62 — Customer history and relationship UI */
.customer-profile-card{margin-bottom:18px}.customer-profile-main{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding-bottom:15px;border-bottom:1px solid #edf0f4}.customer-profile-main strong{display:block;font-size:24px;line-height:1.25;overflow-wrap:anywhere}.customer-profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px;padding-top:15px}.customer-profile-fields>div{min-width:0}.customer-profile-fields span:last-child{display:block;color:#334155;overflow-wrap:anywhere}.customer-profile-fields .wide{grid-column:1/-1}.customer-history-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.customer-history-stats .stat{min-width:0}.customer-history-stats .stat span{display:block;color:var(--muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.45px}.customer-history-stats .stat small{display:block;color:#8a95a7;font-size:10px;margin-top:4px}.customer-card-actions{align-items:stretch}.customer-card-actions .btn{min-width:0}
@media(max-width:1050px){.customer-history-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.customer-profile-main{flex-direction:column}.customer-profile-main strong{font-size:21px}.customer-profile-fields{grid-template-columns:1fr;gap:12px}.customer-profile-fields .wide{grid-column:auto}.customer-history-stats{grid-template-columns:1fr 1fr}.customer-card-actions{grid-template-columns:1fr 1fr!important}.customer-card-actions .btn,.customer-card-actions form,.customer-card-actions form .btn{width:100%}}
@media(max-width:480px){.customer-history-stats{gap:9px}.customer-history-stats .stat{padding:13px}.customer-history-stats .stat strong{font-size:18px}.customer-card-actions{grid-template-columns:1fr!important}.customer-profile-card{padding:15px}}

/* BILLI PRO V62 — redesigned invoice detail UI. The invoice page uses a dedicated responsive system so desktop and mobile share the same visual hierarchy. */
.invoice-page-v62{max-width:1240px;padding-top:4px}
.invoice-toolbar-v62{max-width:1240px;padding:14px 20px 10px;display:block}
.invoice-toolbar-v62 .invoice-toolbar-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}
.invoice-toolbar-v62 .invoice-toolbar-context{display:grid;text-align:right;line-height:1.15}.invoice-toolbar-v62 .invoice-toolbar-context span{font-size:10px;letter-spacing:1px;color:#64748b;font-weight:900}.invoice-toolbar-v62 .invoice-toolbar-context strong{font-size:13px;margin-top:3px}
.invoice-action-groups-v62{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.invoice-action-groups-v62 .invoice-action-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.invoice-action-groups-v62 .invoice-manage-group .v62-return{grid-column:1/-1}
.invoice-action-groups-v62 .invoice-danger-group{grid-column:1/-1}
.invoice-action-groups-v62 .invoice-danger-group form{display:flex;width:100%;margin:0}.invoice-action-groups-v62 .invoice-danger-group .btn{width:100%}
.v62-action{min-width:0;min-height:58px!important;padding:10px 14px!important;border-radius:11px!important;display:flex!important;align-items:center;justify-content:center;gap:10px;text-align:left!important;line-height:1.15!important;white-space:normal!important}
.v62-action>b,.v62-action span:not(.v62-icon){min-width:0}.v62-action b{display:block;font-size:14px;font-weight:900}.v62-action small{display:block;font-size:11px;font-weight:600;color:#64748b;margin-top:3px}.v62-action .v62-icon{font-size:24px;line-height:1;color:var(--primary);flex:0 0 auto}.v62-action.secondary .v62-icon{color:var(--primary)}.v62-action .v62-wa{color:#13a55b}.v62-primary{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;box-shadow:0 7px 18px rgba(36,87,214,.18)!important}.v62-primary small,.v62-primary .v62-icon{color:#fff}.invoice-action-groups-v62 .v62-return{border-color:#9bdcc0;background:#f1fff7!important}.invoice-action-groups-v62 .v62-return .v62-icon{color:#12a65b}.invoice-action-groups-v62 .danger-btn{background:#fff2f2!important;color:#c92d2d!important;border-color:#ffbcbc!important}.invoice-action-groups-v62 .danger-btn .v62-icon,.invoice-action-groups-v62 .danger-btn small{color:#c92d2d}
.invoice-card-v62{max-width:none;padding:22px 24px 18px;border-radius:18px;box-shadow:0 12px 34px rgba(23,32,51,.065)}
.invoice-top-v62{gap:30px}.invoice-business-v62 h1{margin:9px 0 4px}.invoice-business-v62 .business-contact{margin:0;color:#536177}.invoice-top-v62 .invoice-meta{min-width:260px}.invoice-top-v62 .invoice-meta h2{font-size:22px}
.v62-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 16px}.v62-party{padding:14px 16px;border:1px solid #e3e9f2;border-radius:13px;background:linear-gradient(180deg,#f8faff,#f4f7fc);color:#46566e;font-size:13px;line-height:1.55}.v62-party h3{margin:3px 0 4px;color:var(--text);font-size:15px}.v62-party-title{font-weight:900;font-size:12px;color:#60708a;letter-spacing:.5px}.v62-party-title span{font-size:18px;margin-right:5px;color:var(--primary)}.v62-ship .v62-party-title span{color:#315fcf}
.invoice-items-v62 table{min-width:0}.invoice-items-v62 th,.invoice-items-v62 td{padding:10px 9px}.invoice-items-v62 th{font-size:10px}.invoice-items-v62 td{font-size:13px}.invoice-items-v62 td:nth-child(1){width:28px}.invoice-items-v62 td:nth-child(6),.invoice-items-v62 td:nth-child(7){text-align:right;white-space:nowrap}.totals-v62{margin-top:13px}.totals-v62 h2{font-size:21px;padding-top:12px;margin-top:8px}.v62-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px}.v62-summary>div{border-radius:11px;padding:10px 13px;border:1px solid #dfe6f0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.v62-summary span{font-size:12px;font-weight:850;display:flex;align-items:center;gap:7px}.v62-summary span:first-letter{font-size:19px}.v62-summary small{font-size:11px;font-weight:800}.v62-summary b{font-size:17px;white-space:nowrap}.v62-summary-payment{background:#ecfff6;border-color:#bfead5!important;color:#176a3d}.v62-summary-refund{background:#eff5ff;border-color:#c9dcff!important;color:#2457d6}.v62-summary-balance{background:#fff8e2;border-color:#f1dc91!important;color:#946200}.v62-return-note{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 13px;border:1px solid #e4e8ef;border-radius:10px;background:#fafbfc}.v62-notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.v62-note{margin-top:10px}.v62-owner-promo{margin-top:14px}.invoice-footer-note{text-align:center;color:#8a94a5;font-size:12px}
@media(max-width:900px){.invoice-action-groups-v62{grid-template-columns:1fr 1fr}.invoice-action-groups-v62 .invoice-danger-group{grid-column:1/-1}.invoice-card-v62{padding:20px}.invoice-top-v62 .invoice-meta{min-width:220px}}
@media(max-width:760px){
 .invoice-page-v62{padding-top:0}.invoice-toolbar-v62{padding:10px 14px 7px}.invoice-toolbar-v62 .invoice-toolbar-head{display:block;margin-bottom:8px}.invoice-toolbar-v62 .invoice-toolbar-context{display:none}.invoice-toolbar-v62 .back-link{margin-bottom:0;min-height:48px;font-size:14px}
 .invoice-action-groups-v62{grid-template-columns:1fr 1fr;gap:7px}.invoice-action-groups-v62 .invoice-action-group{gap:7px}.invoice-action-groups-v62 .invoice-manage-group,.invoice-action-groups-v62 .invoice-share-group,.invoice-action-groups-v62 .invoice-output-group{grid-column:1/-1}.invoice-action-groups-v62 .invoice-danger-group{grid-column:1/-1}
 .v62-action{min-height:52px!important;padding:8px 9px!important;gap:7px;text-align:center!important}.v62-action .v62-icon{font-size:19px}.v62-action b{font-size:12px}.v62-action small{display:none}
 .invoice-card-v62{padding:17px 15px;border-radius:16px}.invoice-top-v62{display:flex;flex-direction:column;gap:13px}.invoice-top-v62 .invoice-meta{min-width:0;text-align:left}.invoice-top-v62 .invoice-meta h2{font-size:21px;margin:5px 0}.invoice-business-v62 h1{font-size:25px}.invoice-business-v62 .business-contact{font-size:13px}
 .v62-parties{grid-template-columns:1fr;gap:8px}.v62-party{padding:12px 13px}.v62-ship{display:block}
 .invoice-items-v62 table{display:block}.invoice-items-v62 thead{display:none}.invoice-items-v62 tbody,.invoice-items-v62 tr,.invoice-items-v62 td{display:block;width:100%}.invoice-items-v62 tr{padding:10px 0}.invoice-items-v62 td{display:flex!important;justify-content:space-between;gap:12px;text-align:right!important;padding:3px 0;font-size:13px}.invoice-items-v62 td::before{content:attr(data-label);font-size:10px;color:#7a869b;font-weight:900;text-transform:uppercase;letter-spacing:.45px;text-align:left}.invoice-items-v62 td:nth-child(1){width:100%}.invoice-items-v62 td:nth-child(6),.invoice-items-v62 td:nth-child(7){white-space:normal}.totals-v62{max-width:none}.totals-v62 p{font-size:13px}.totals-v62 h2{font-size:21px}.v62-summary{grid-template-columns:1fr 1fr!important}.v62-summary>div:last-child{grid-column:1/-1}.v62-summary b{font-size:15px}.v62-notes-grid{grid-template-columns:1fr}.invoice-owner-promo{display:block}.invoice-owner-promo .share-copy{margin-bottom:10px}
}
@media(max-width:420px){.invoice-action-groups-v62{grid-template-columns:1fr 1fr}.v62-action{min-height:50px!important}.v62-action b{font-size:11px}.invoice-card-v62{padding:15px 13px}.invoice-business-v62 h1{font-size:23px}.invoice .invoice-meta p{font-size:12px}.v62-summary>div{padding:9px}.v62-summary small{font-size:10px}.v62-summary b{font-size:14px}}

/* =========================================================
   BILLI PRO V63 — production invoice workspace UI
   Designed to match the approved desktop/mobile reference:
   desktop sidebar + topbar, mobile blue app bar, balanced action grid.
   ========================================================= */
.v63-invoice-body{background:#f5f7fb}
.v63-app-shell{min-height:100vh;display:flex}
.v63-sidebar{width:214px;flex:0 0 214px;background:#071a31;color:#fff;min-height:100vh;position:sticky;top:0;height:100vh;padding:20px 14px 16px;display:flex;flex-direction:column;box-shadow:8px 0 30px rgba(7,26,49,.08)}
.v63-brand{display:flex;align-items:center;gap:9px;color:#fff!important;text-decoration:none!important;font-size:29px;line-height:1;font-weight:950;letter-spacing:-1.2px;padding:3px 10px 24px}.v63-brand span{font-size:11px;letter-spacing:.8px;border:1px solid rgba(255,255,255,.8);padding:5px 7px;border-radius:6px}
.v63-side-nav{display:grid;gap:4px}.v63-side-nav a{display:flex;align-items:center;gap:12px;color:#dce6f4;text-decoration:none;padding:12px 12px;border-radius:11px;font-weight:750;font-size:14px}.v63-side-nav a:hover{background:rgba(255,255,255,.07);text-decoration:none}.v63-side-nav a.active{background:#1760e8;color:#fff;box-shadow:0 8px 20px rgba(23,96,232,.25)}.v63-side-nav a span{width:22px;text-align:center;font-size:20px;line-height:1}
.v63-sidebar-footer{margin-top:auto;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 13px;color:#fff;background:rgba(255,255,255,.025)}.v63-sidebar-footer b{display:block;font-size:14px}.v63-sidebar-footer span{display:block;color:#aebed2;font-size:11px;line-height:1.45;margin-top:3px}
.v63-main{min-width:0;flex:1}.v63-topbar{height:62px;background:#fff;border-bottom:1px solid #e4e9f1;display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:50}.v63-menu-btn{border:0;background:transparent;font-size:23px;color:#172033;padding:8px}.v63-search{width:min(430px,48vw);height:38px;border:1px solid #dfe5ee;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 12px;color:#536177;font-size:18px}.v63-search span{font-size:12px;color:#7b8799}.v63-account{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px}.v63-bell{font-size:20px}.v63-avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#71819a;color:#fff;font-weight:900;font-size:12px}.v63-mobile-topbar{display:none}
.v63-content{width:min(1180px,100%);margin:0 auto;padding:18px 22px 42px}.v63-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.v63-back{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 14px;border:1px solid #dfe5ee;border-radius:10px;background:#fff;color:#172033;text-decoration:none;font-weight:850;box-shadow:0 4px 12px rgba(23,32,51,.04)}.v63-page-head>div{text-align:right;display:grid;gap:2px}.v63-page-head>div span{font-size:9px;letter-spacing:1.1px;color:#718096;font-weight:950}.v63-page-head>div b{font-size:12px;color:#263248}
.v63-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}.v63-action{min-width:0;min-height:68px;border:1px solid #d9e2ef;border-radius:11px;background:#fff;color:#172033!important;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 13px;text-align:left;box-shadow:0 5px 16px rgba(23,32,51,.035);font:inherit;cursor:pointer}.v63-action:hover{text-decoration:none;border-color:#aebfe2;box-shadow:0 8px 20px rgba(23,32,51,.06)}.v63-action-icon{flex:0 0 auto;font-size:25px;line-height:1;color:#1458d7;font-weight:800}.v63-action b{display:block;font-size:14px;line-height:1.15;font-weight:900}.v63-action small{display:block;font-size:11px;line-height:1.3;color:#718096;margin-top:3px}.v63-return-action{grid-column:3;grid-row:1}.v63-share{grid-row:2}.v63-actions>.v63-action:nth-child(4){grid-column:1}.v63-actions>.v63-action:nth-child(5){grid-column:2}.v63-actions>.v63-action:nth-child(6){grid-column:1;grid-row:3}.v63-actions>.v63-action:nth-child(7){grid-column:2;grid-row:3}.v63-delete{grid-column:3;grid-row:3;display:flex}.v63-delete .v63-action{width:100%}.v63-primary{background:#155be6!important;border-color:#155be6!important;color:#fff!important;box-shadow:0 8px 20px rgba(21,91,230,.2)}.v63-primary .v63-action-icon,.v63-primary small{color:#fff}.v63-return-action{background:#f0fff7;border-color:#a5dfc4}.v63-return-action .v63-action-icon{color:#10a660}.v63-wa{color:#0ca65a}.v63-danger{background:#fff2f2!important;border-color:#ffbaba;color:#c52f2f!important}.v63-danger .v63-action-icon,.v63-danger small{color:#c52f2f}
.v63-invoice-card{max-width:none;margin:0;background:#fff;border:1px solid #e1e7ef;border-radius:18px;padding:24px 26px 18px;box-shadow:0 15px 38px rgba(23,32,51,.07)}.v63-invoice-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.v63-brandline{display:flex;align-items:center;gap:8px}.v63-brandline img{width:38px;height:38px;object-fit:contain;border-radius:8px}.v63-brandline .logo{font-size:21px}.v63-business h1{font-size:29px;letter-spacing:-.8px;margin:9px 0 3px}.v63-business p{margin:0;color:#536177;font-size:13px}.v63-invoice-meta{text-align:right;min-width:265px}.v63-invoice-meta>span{font-size:10px;letter-spacing:1.4px;color:#7b8799;font-weight:950}.v63-invoice-meta h2{font-size:22px;margin:4px 0 5px;letter-spacing:-.4px}.v63-invoice-meta p{font-size:12px;line-height:1.65;margin:0}.v63-invoice-meta .invoice-status{margin-left:4px}
.v63-parties{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 15px}.v63-party{background:linear-gradient(180deg,#f8faff,#f3f7fd);border:1px solid #e0e7f1;border-radius:13px;padding:13px 15px;color:#52627a;font-size:12px;line-height:1.55;min-width:0}.v63-party-heading{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.7px;font-weight:950;color:#60708a}.v63-party-heading span{font-size:18px;color:#2457d6}.v63-party-heading i{display:none;margin-left:auto;font-style:normal}.v63-party h3{font-size:15px;color:#172033;margin:3px 0 3px}.v63-party p{margin:0;overflow-wrap:anywhere}.v63-items table{min-width:0}.v63-items th,.v63-items td{padding:9px 8px}.v63-items th{font-size:10px}.v63-items td{font-size:12px}.v63-items td:nth-child(1){width:28px}.v63-items td:nth-child(6),.v63-items td:nth-child(7){text-align:right;white-space:nowrap}.v63-totals{max-width:350px;margin:10px 0 0 auto}.v63-totals p{font-size:12px;margin:7px 0}.v63-totals h2{font-size:19px;margin:7px 0 0;padding-top:10px;border-top:2px solid #172033}.v63-finance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.v63-finance>div{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #dce5ee;border-radius:11px;padding:10px 12px;min-width:0}.v63-finance span{font-size:10px;font-weight:850}.v63-finance b{font-size:16px;white-space:nowrap}.v63-finance .paid{background:#edfff6;border-color:#bfe9d4;color:#176a3d}.v63-finance .refund{background:#eef5ff;border-color:#c9dcff;color:#2457d6}.v63-finance .due{background:#fff8e4;border-color:#f0dc9a;color:#946200}.v63-notes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.v63-notes>div{background:#f8fafc;border:1px solid #edf0f4;border-radius:10px;padding:10px 12px;margin-top:10px;font-size:11px}.v63-notes b,.v63-notes span{display:block}.v63-notes span{color:#536177;margin-top:2px}.v63-share-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:11px 13px;margin-top:12px}.v63-share-card>div:first-child{display:grid;gap:2px}.v63-share-card strong,.v63-share-card b{font-size:12px}.v63-share-card span{font-size:10px;color:#718096}.v63-share-card>div:last-child{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.v63-share-card .btn{min-height:36px;padding:7px 11px;font-size:11px}.invoice-footer-note{text-align:center;color:#8b96a7;font-size:10px;margin:15px 0 0}
@media(max-width:1000px){.v63-sidebar{width:190px;flex-basis:190px}.v63-content{padding-left:16px;padding-right:16px}.v63-action b{font-size:13px}.v63-action small{font-size:10px}.v63-invoice-card{padding:20px}}
@media(max-width:760px){
 .v63-app-shell{display:block}.v63-sidebar,.v63-desktop-topbar{display:none}.v63-mobile-topbar{height:68px;background:#2457d6;color:#fff;display:flex;align-items:center;padding:0 16px;gap:13px;box-shadow:0 5px 20px rgba(36,87,214,.18);position:sticky;top:0;z-index:60}.v63-mobile-menu{border:0;background:transparent;color:#fff;font-size:24px;padding:4px}.v63-mobile-brand{color:#fff!important;text-decoration:none!important;font-size:25px;font-weight:950;letter-spacing:-.8px}.v63-mobile-brand span{font-size:10px;border:1px solid #fff;border-radius:5px;padding:4px 6px;margin-left:4px}.v63-mobile-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:20px}.v63-content{width:100%;padding:15px 14px 30px}.v63-page-head{margin-bottom:10px}.v63-page-head>div{display:none}.v63-back{min-height:46px;font-size:14px;padding:9px 13px}.v63-actions{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.v63-action{min-height:62px;padding:9px 10px;gap:8px;text-align:center;justify-content:center}.v63-action-icon{font-size:21px}.v63-action b{font-size:13px}.v63-action small{display:none}.v63-return-action{grid-column:1/-1;grid-row:2}.v63-actions>.v63-action:nth-child(1){grid-column:1;grid-row:1}.v63-actions>.v63-action:nth-child(2){grid-column:2;grid-row:1}.v63-actions>.v63-action:nth-child(4){grid-column:1;grid-row:3}.v63-actions>.v63-action:nth-child(5){grid-column:2;grid-row:3}.v63-actions>.v63-action:nth-child(6){grid-column:1;grid-row:4}.v63-actions>.v63-action:nth-child(7){grid-column:2;grid-row:4}.v63-delete{grid-column:1/-1;grid-row:5}.v63-delete .v63-action{min-height:58px}.v63-invoice-card{padding:20px 16px 15px;border-radius:17px}.v63-invoice-top{display:block}.v63-business h1{font-size:25px}.v63-business p{font-size:13px}.v63-invoice-meta{text-align:left;min-width:0;margin-top:15px;padding-top:13px;border-top:1px solid #edf0f4}.v63-invoice-meta h2{font-size:21px}.v63-parties{grid-template-columns:1fr;gap:8px;margin-top:16px}.v63-party{padding:12px 13px}.v63-party-heading i{display:block}.v63-items table{display:block}.v63-items thead{display:none}.v63-items tbody,.v63-items tr,.v63-items td{display:block;width:100%}.v63-items tr{padding:9px 0;border-bottom:1px solid #edf0f4}.v63-items td{display:flex!important;justify-content:space-between;gap:12px;padding:3px 0;text-align:right!important;font-size:12px}.v63-items td::before{content:attr(data-label);text-align:left;font-size:9px;font-weight:950;letter-spacing:.5px;color:#7b8799}.v63-items td:nth-child(1){width:100%}.v63-items td:nth-child(6),.v63-items td:nth-child(7){white-space:normal}.v63-totals{max-width:none;margin-top:10px}.v63-totals p{font-size:12px}.v63-totals h2{font-size:20px}.v63-finance{grid-template-columns:1fr 1fr;gap:8px}.v63-finance>div{padding:10px}.v63-finance .due{grid-column:1/-1}.v63-finance span{font-size:9px}.v63-finance b{font-size:15px}.v63-notes{grid-template-columns:1fr}.v63-share-card{display:block}.v63-share-card>div:first-child{margin-bottom:9px}.v63-share-card>div:last-child{display:grid;grid-template-columns:1fr 1fr}.v63-share-card .btn{width:100%;min-height:40px}.invoice-footer-note{font-size:10px}
}
@media(max-width:420px){.v63-content{padding-left:10px;padding-right:10px}.v63-action{min-height:58px;padding:8px 6px}.v63-action b{font-size:12px}.v63-action-icon{font-size:19px}.v63-invoice-card{padding:17px 13px 14px}.v63-business h1{font-size:23px}.v63-invoice-meta h2{font-size:20px}.v63-finance b{font-size:14px}.v63-finance>div{padding:9px}
}
/* =========================================================
   V64 — BILLI PRO COMPLETE UI SYSTEM
   Applies the V63 visual language across the complete workspace.
   ========================================================= */
:root{--v64-navy:#071a31;--v64-blue:#2457d6;--v64-blue2:#155be6;--v64-soft:#eef4ff;--v64-green:#0b9a58;--v64-red:#c72f2f;--v64-ink:#101b31;--v64-muted:#68778e;--v64-line:#dce4ef;--v64-card:#ffffff}

/* Global controls: predictable sizing and touch targets */
button,.btn,a.btn,input[type=submit],input[type=button]{-webkit-tap-highlight-color:transparent}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(36,87,214,.20);outline-offset:2px}
button[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none!important}
.btn{min-height:46px;border-radius:12px;font-size:14px;letter-spacing:-.1px}
.btn.secondary{background:#edf3ff;border-color:#d5e1fb}
.btn.ghost{background:#fff;border-color:#d8e0eb}
.danger-btn{background:#fff1f1!important;color:#bd3030!important;border-color:#ffc5c5!important;box-shadow:none!important}

/* Standard application pages */
body.billi-app{background:linear-gradient(180deg,#f4f7fc 0,#f7f9fc 100%);min-height:100vh}
body.billi-app>nav{position:fixed;left:0;top:0;bottom:0;width:226px;min-height:100vh;height:100vh;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:22px 14px 16px;background:linear-gradient(180deg,#071a31 0,#0a213c 100%);border:0;border-radius:0;box-shadow:10px 0 35px rgba(7,26,49,.10);z-index:1000}
body.billi-app>nav .logo{color:#fff!important;font-size:28px;padding:5px 10px 25px;justify-content:flex-start}
body.billi-app>nav .logo span{background:transparent;border:1px solid rgba(255,255,255,.9);font-size:11px;padding:5px 7px;border-radius:6px}
body.billi-app>nav .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;justify-content:flex-start}
body.billi-app>nav .navlinks a{display:flex;align-items:center;gap:11px;color:#dce6f4;padding:12px 13px;border-radius:11px;font-size:14px;font-weight:800}
body.billi-app>nav .navlinks a::before{width:22px;display:inline-grid;place-items:center;font-size:17px;line-height:1;opacity:.96}
body.billi-app>nav .navlinks a:nth-child(1)::before{content:"⌂"}
body.billi-app>nav .navlinks a:nth-child(2)::before{content:"♙"}
body.billi-app>nav .navlinks a:nth-child(3)::before{content:"▤"}
body.billi-app>nav .navlinks a:nth-child(4)::before{content:"▥"}
body.billi-app>nav .navlinks a:nth-child(5)::before{content:"◇"}
body.billi-app>nav .navlinks a:nth-child(6)::before{content:"⚙"}
body.billi-app>nav .navlinks a:nth-child(7)::before{content:"⌫"}
body.billi-app>nav .navlinks a:nth-child(8)::before{content:"↪"}
body.billi-app>nav .navlinks a:hover,body.billi-app>nav .navlinks a.active{background:#1760e8;color:#fff;text-decoration:none;box-shadow:0 7px 18px rgba(23,96,232,.20)}
body.billi-app>nav .menu-toggle{display:none}
body.billi-app>nav::after{content:"BILLI PRO\A Simple Billing\A Stronger Business";white-space:pre;display:block;margin-top:auto;border:1px solid rgba(255,255,255,.11);border-radius:12px;padding:13px;color:#fff;background:rgba(255,255,255,.025);font-size:12px;font-weight:800;line-height:1.5}
body.billi-app>.container{width:min(1180px,calc(100% - 226px));margin:0 0 0 226px;padding:34px 30px 48px;max-width:none}
body.billi-app>.container>.hero{padding:0 0 4px;margin-bottom:22px}
body.billi-app .hero h1{font-size:clamp(30px,3vw,40px);font-weight:950;color:var(--v64-ink)}
body.billi-app .hero p{max-width:760px;color:#68778e}
body.billi-app .card{border-color:#dfe6f0;border-radius:18px;box-shadow:0 12px 32px rgba(23,32,51,.055);padding:24px}
body.billi-app .section-head,body.billi-app .section-title{align-items:flex-start}
body.billi-app .section-head h2,body.billi-app .section-title h2{font-size:20px;letter-spacing:-.4px}
body.billi-app .stats .stat{border-radius:16px;padding:20px;background:#fff}
body.billi-app .stats .stat strong{font-size:27px}
body.billi-app table{border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid #e3e9f1;border-radius:14px}
body.billi-app th{background:#f7f9fc;border-bottom:1px solid #e2e8f0;padding:13px 12px}
body.billi-app td{padding:14px 12px;background:#fff}
body.billi-app tbody tr:last-child td{border-bottom:0}
body.billi-app tbody tr:hover td{background:#fbfdff}
body.billi-app .page-actions{align-items:stretch}
body.billi-app .page-actions .btn{min-width:130px}
body.billi-app .customer-card,body.billi-app .customer-profile-card,body.billi-app .dashboard-focus,body.billi-app .plan-summary{border:1px solid #e1e8f1;border-radius:16px;background:#fff;box-shadow:0 9px 25px rgba(23,32,51,.045)}
body.billi-app input,body.billi-app select,body.billi-app textarea{border-radius:12px;min-height:46px;border-color:#d6dfeb}
body.billi-app label{font-size:13px;color:#31415a}
body.billi-app .history-actions .btn,body.billi-app .invoice-list-actions .btn{min-width:90px}
body.billi-app .responsive-table{overflow-x:auto}

/* Forms / invoice editor */
body.billi-app .item-row{background:#f8faff;border:1px solid #e0e7f1;border-radius:14px;padding:14px;margin-bottom:10px}
body.billi-app .item-row .item-field label{margin-top:0}
body.billi-app .item-row .remove-item{align-self:end;display:inline-flex}
body.billi-app .invoice-live-total{background:#f5f8ff;border:1px solid #dfe7f6;border-radius:12px;padding:12px 14px}
body.billi-app .form-section{border-radius:16px}
body.billi-app .method-card{border:1px solid #dce4ef!important;border-radius:14px!important;background:#fff!important;transition:.18s ease}
body.billi-app .method-card:hover{border-color:#9fb7ed!important;box-shadow:0 7px 18px rgba(36,87,214,.08)}

/* V63 invoice shell refinements */
.v63-app-shell{background:#f5f7fb}
.v63-sidebar{box-shadow:10px 0 32px rgba(7,26,49,.10)}
.v63-side-nav a{min-height:46px}
.v63-action{min-height:78px;border-radius:14px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.v63-action:hover{transform:translateY(-1px)}
.v63-action:active{transform:translateY(0) scale(.99)}
.v63-action-icon{font-size:26px}
.v63-action b{font-size:15px}
.v63-action small{font-size:11px}
.v63-return-action{background:#effff7!important}
.v63-danger{background:#fff3f3!important}
.v63-invoice-card{box-shadow:0 16px 42px rgba(23,32,51,.075)}
.v63-party{min-height:112px}
.v63-finance>div{min-height:64px}
.v63-share-card .btn{min-height:42px}

/* Desktop invoice action grid: balanced, readable, no orphan space */
@media(min-width:761px){
 .v63-actions{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
 .v63-actions>.v63-action:nth-child(1){grid-column:1 / span 2;grid-row:1}
 .v63-actions>.v63-action:nth-child(2){grid-column:3 / span 2;grid-row:1}
 .v63-actions>.v63-action:nth-child(3){grid-column:5 / span 2;grid-row:1}
 .v63-actions>.v63-action:nth-child(4){grid-column:1 / span 3;grid-row:2}
 .v63-actions>.v63-action:nth-child(5){grid-column:4 / span 3;grid-row:2}
 .v63-actions>.v63-action:nth-child(6){grid-column:1 / span 2;grid-row:3}
 .v63-actions>.v63-action:nth-child(7){grid-column:3 / span 2;grid-row:3}
 .v63-actions>.v63-delete{grid-column:5 / span 2;grid-row:3}
}

/* V64 mobile: standard pages become app-like */
@media(max-width:760px){
 body.billi-app{padding-top:68px}
 body.billi-app>nav{left:0;right:0;bottom:auto;width:100%;height:68px;min-height:68px;padding:0 15px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background:#2457d6;border:0;box-shadow:0 6px 24px rgba(36,87,214,.20)}
 body.billi-app>nav .logo{font-size:25px;padding:0;color:#fff!important}
 body.billi-app>nav .logo span{font-size:10px}
 body.billi-app>nav .menu-toggle{display:inline-flex;order:2;background:transparent;border:0;color:#fff;box-shadow:none;width:44px;height:44px}
 body.billi-app>nav .menu-icon i{background:#fff}
 body.billi-app>nav .navlinks{position:fixed;top:68px;left:0;right:auto;bottom:0;width:min(310px,88vw);height:calc(100vh - 68px);display:flex;transform:translateX(-105%);transition:transform .22s ease;z-index:1003;padding:14px;background:#071a31;border:0;border-radius:0;box-shadow:18px 0 40px rgba(7,26,49,.28);overflow-y:auto}
 body.billi-app>nav .navlinks.open{transform:translateX(0)}
 body.billi-app>nav .navlinks a{font-size:14px;min-height:48px;padding:13px 14px}
 body.billi-app>nav::after{display:none}
 body.billi-app>nav .mobile-nav-backdrop{display:block;position:fixed;inset:68px 0 0;background:rgba(6,18,35,.45);z-index:1002;opacity:0;visibility:hidden;transition:.2s}
 body.billi-app>nav .mobile-nav-backdrop.open{opacity:1;visibility:visible}
 body.billi-app>.container{width:100%;margin:0;padding:22px 14px 38px}
 body.billi-app>.container>.hero{gap:14px;margin-bottom:18px}
 body.billi-app .hero h1{font-size:29px}
 body.billi-app .card{padding:18px;border-radius:16px}
 body.billi-app .page-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}
 body.billi-app .page-actions .btn{width:100%;min-width:0}
 body.billi-app .stats{gap:9px}
 body.billi-app .stats .stat{padding:15px}
 body.billi-app .stats .stat strong{font-size:21px}
 body.billi-app .grid2{gap:12px}
 body.billi-app .quick-action-grid{grid-template-columns:1fr 1fr!important}
 body.billi-app .history-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 body.billi-app .history-actions .btn,body.billi-app .invoice-list-actions .btn{width:100%;min-width:0}
 body.billi-app .customer-card-actions form{min-width:0}
 body.billi-app .customer-card-actions form .btn{width:100%}
 body.billi-app .responsive-table table{min-width:0;border:0;border-radius:0}
 body.billi-app .responsive-table thead{display:none}
 body.billi-app .responsive-table tbody,body.billi-app .responsive-table tr,body.billi-app .responsive-table td{display:block;width:100%}
 body.billi-app .responsive-table tr{background:#fff;border:1px solid #e1e7ef;border-radius:15px;padding:11px 14px;margin-bottom:10px;box-shadow:0 7px 20px rgba(23,32,51,.04)}
 body.billi-app .responsive-table td{border:0!important;padding:7px 0;display:flex;justify-content:space-between;gap:14px;text-align:right;overflow-wrap:anywhere}
 body.billi-app .responsive-table td::before{content:attr(data-label);font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#7a869b;text-align:left;flex:0 0 42%}
 body.billi-app .responsive-table td[data-label="Actions"]{display:block;text-align:left;padding-top:10px;margin-top:4px;border-top:1px solid #edf0f4!important}
 body.billi-app .responsive-table td[data-label="Actions"]::before{display:block;margin-bottom:8px}
 body.billi-app .item-row{padding:12px}
 body.billi-app .item-row .remove-item{width:100%;margin-top:5px}
 body.billi-app .item-head{display:none}
}
@media(max-width:480px){
 body.billi-app .page-actions{grid-template-columns:1fr}
 body.billi-app .quick-action-grid{grid-template-columns:1fr!important}
 body.billi-app .container{padding-left:11px;padding-right:11px}
 .v63-actions{gap:9px}
 .v63-action{min-height:68px;border-radius:15px}
 .v63-action b{font-size:13px}
 .v63-action-icon{font-size:21px}
 .v63-invoice-card{padding:18px 14px 15px}
}

/* V63 mobile navigation drawer */
.v63-app-shell.v63-menu-open::after{content:"";position:fixed;inset:68px 0 0;background:rgba(6,18,35,.45);z-index:55}
@media(max-width:760px){
 .v63-sidebar{position:fixed;left:0;top:68px;bottom:0;height:auto;transform:translateX(-105%);transition:transform .22s ease;z-index:70;width:min(300px,88vw);box-shadow:18px 0 40px rgba(7,26,49,.28)}
 .v63-app-shell.v63-menu-open .v63-sidebar{transform:translateX(0)}
 .v63-mobile-menu{width:42px;height:42px;cursor:pointer}
}

/* =========================================================
   V65 — INTERACTION + ICON POLISH
   ========================================================= */
.v63-action-icon svg,.v63-bell svg,.v65-bell-btn svg{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v63-action-icon svg{width:25px;height:25px}
.v63-action{user-select:none;-webkit-user-select:none}
.v63-sidebar a,.v63-mobile-brand,.v63-search-link,.v63-party-link,.v65-finance-link{text-decoration:none!important}
.v63-party-link{color:inherit}.v63-party-link:hover{text-decoration:underline!important;text-decoration-thickness:2px;text-underline-offset:3px}
.v65-finance-link{display:flex;flex-direction:column;justify-content:center;color:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.v65-finance-link:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,32,51,.08)}
.v63-account-wrap{position:relative;margin-left:auto}.v63-account{margin:0;cursor:pointer;border:0;background:transparent;color:#172033;display:flex;align-items:center;gap:10px;font:inherit;padding:4px 6px;border-radius:12px}.v63-account:hover{background:#f4f7fb}.v65-chevron{font-size:18px;line-height:1}.v65-account-menu{position:absolute;right:0;top:calc(100% + 8px);width:220px;background:#fff;border:1px solid #dce4ef;border-radius:14px;padding:7px;box-shadow:0 18px 45px rgba(23,32,51,.16);z-index:120}.v65-account-menu a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:9px;color:#172033;font-size:13px;font-weight:800}.v65-account-menu a:hover{background:#f2f6ff;color:#2457d6}.v65-search-link{width:min(430px,48vw);height:38px;border:1px solid #dfe5ee;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 12px;color:#536177;background:#fff;font-size:12px}.v65-search-link:hover{border-color:#aebfe2;box-shadow:0 4px 12px rgba(23,32,51,.05)}.v65-search-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v65-bell-btn,.v65-mobile-avatar-btn{border:0;background:transparent;color:inherit;padding:4px;cursor:pointer;border-radius:10px}.v65-bell-btn{display:grid;place-items:center}.v65-bell-btn svg{width:24px;height:24px}.v65-bell-btn:hover,.v65-mobile-avatar-btn:hover{background:rgba(255,255,255,.10)}
.v65-hamburger{width:28px;height:23px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.v65-hamburger i{height:3px;width:28px;border-radius:99px;background:currentColor;transition:transform .2s,opacity .2s}.v63-app-shell.v63-menu-open .v65-hamburger i:nth-child(1){transform:translateY(10px) rotate(45deg)}.v63-app-shell.v63-menu-open .v65-hamburger i:nth-child(2){opacity:0}.v63-app-shell.v63-menu-open .v65-hamburger i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
.v65-mobile-account-menu{position:absolute;right:0;top:50px;width:220px;background:#fff;color:#172033;border:1px solid #dce4ef;border-radius:14px;padding:7px;box-shadow:0 18px 45px rgba(23,32,51,.18);z-index:100}.v65-mobile-account-menu a{display:block;color:#172033;text-decoration:none;padding:11px 12px;border-radius:9px;font-size:13px;font-weight:800}.v65-mobile-account-menu a:hover{background:#f2f6ff;color:#2457d6}.v63-mobile-right{position:relative}
@media(max-width:760px){.v63-mobile-right{gap:7px}.v63-mobile-menu{display:grid;place-items:center}.v63-mobile-menu:focus-visible,.v65-bell-btn:focus-visible,.v65-mobile-avatar-btn:focus-visible{outline:3px solid rgba(255,255,255,.35);outline-offset:2px}.v65-mobile-avatar-btn .v63-avatar{width:38px;height:38px}.v65-search-link{display:none}.v65-finance-link{min-width:0}.v63-party-link{display:inline-block}.v63-sidebar{overflow-y:auto;-webkit-overflow-scrolling:touch}}

/* V66 — print only the invoice, never the application chrome/actions */
@media print{
  @page{size:A4;margin:10mm}
  html,body{background:#fff!important}
  body.v63-invoice-body{padding:0!important;margin:0!important}
  body.v63-invoice-body .v63-sidebar,
  body.v63-invoice-body .v63-desktop-topbar,
  body.v63-invoice-body .v63-mobile-topbar,
  body.v63-invoice-body .v63-page-head,
  body.v63-invoice-body .v63-actions,
  body.v63-invoice-body .v63-share-card,
  body.v63-invoice-body .alert{display:none!important}
  body.v63-invoice-body .v63-app-shell{display:block!important;background:#fff!important;min-height:0!important}
  body.v63-invoice-body .v63-main{display:block!important;width:100%!important;margin:0!important;padding:0!important}
  body.v63-invoice-body .v63-content{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  body.v63-invoice-body .v63-invoice-card{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  body.v63-invoice-body .v63-invoice-top{display:flex!important;flex-direction:row!important}
  body.v63-invoice-body .v63-parties{display:grid!important;grid-template-columns:1fr 1fr!important}
  body.v63-invoice-body .v63-items table{display:table!important;width:100%!important}
  body.v63-invoice-body .v63-items thead{display:table-header-group!important}
  body.v63-invoice-body .v63-items tbody{display:table-row-group!important}
  body.v63-invoice-body .v63-items tr{display:table-row!important}
  body.v63-invoice-body .v63-items th,body.v63-invoice-body .v63-items td{display:table-cell!important}
  body.v63-invoice-body .v63-items td::before{display:none!important;content:none!important}
  body.v63-invoice-body .v63-totals{max-width:48%!important;margin-left:auto!important}
  body.v63-invoice-body .v63-finance{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
  body.v63-invoice-body .v63-finance .due{grid-column:auto!important}
  body.v63-invoice-body .v63-notes{display:grid!important;grid-template-columns:1fr 1fr!important}
  body.v63-invoice-body a{color:inherit!important;text-decoration:none!important}
}


/* BILLI PRO V67 — global responsive fit, alignment and touch/click reliability. */
html{overflow-x:hidden}body.billi-app{overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
button,a,input,select,textarea{touch-action:manipulation}
a.btn,button.btn,.v63-action{max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.btn{box-sizing:border-box}
.card,.section,.price-card,.stat,.dashboard-list-card,.plan-active,.pending-card,.payment-box,.form-section{min-width:0;max-width:100%}
.card{overflow:hidden}
input,select,textarea{max-width:100%;box-sizing:border-box}
.quick-action-grid .btn{width:100%;min-width:0}
.plan-summary{width:100%;min-width:0}
.plan-summary strong,.plan-summary span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.plan-summary .btn{width:100%;max-width:100%;min-width:0;justify-content:center;white-space:normal;line-height:1.3;margin-top:8px}
.hero .btn{min-width:0;white-space:normal}
.dashboard-focus{min-width:0}.dashboard-focus>div{min-width:0}.dashboard-focus .btn{min-width:0;white-space:normal}
.section-head{min-width:0}.section-head>div{min-width:0}.section-head h2,.section-head p{overflow-wrap:anywhere}
.text-link{max-width:45%;white-space:normal;text-align:right;overflow-wrap:anywhere}
.dashboard-row{min-width:0}.dashboard-row-main,.dashboard-row-side{min-width:0}.dashboard-row-main span{max-width:100%}
.v63-content,.v63-main,.v63-page-head,.v63-actions,.v63-invoice-card{min-width:0;max-width:100%}
.v63-page-head>div{min-width:0}.v63-page-head>div b,.v63-page-head>div span{overflow-wrap:anywhere}
.v63-action{min-width:0}.v63-action>span:last-child{min-width:0}.v63-action b,.v63-action small{overflow-wrap:anywhere;word-break:break-word}
.v63-delete{min-width:0}.v63-delete .v63-action{width:100%}
.v63-party{min-width:0;overflow:hidden}.v63-party h3,.v63-party p,.v65-party-link{overflow-wrap:anywhere;word-break:break-word}
.v63-items{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.v63-items table{width:100%;min-width:0}
.v63-finance{min-width:0}.v63-finance>div,.v65-finance-link{min-width:0;overflow-wrap:anywhere}
.v63-notes{min-width:0}.v63-notes>div{min-width:0;overflow-wrap:anywhere}
.v63-share-card{min-width:0}.v63-share-card>div{min-width:0}.v63-share-card .btn{max-width:100%;white-space:normal}
.v65-mobile-account-menu,.v65-account-menu{max-width:calc(100vw - 24px)}

@media(max-width:760px){
  body.billi-app>nav{width:100%;min-width:0}
  body.billi-app>nav .logo{min-width:0;overflow-wrap:anywhere}
  body.billi-app>nav .navlinks a{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .container{width:100%;max-width:1180px}
  .hero{min-width:0}.hero>div{width:100%;min-width:0}
  .dashboard-focus{align-items:stretch;flex-direction:column}.dashboard-focus .btn{width:100%}
  .quick-action-grid{grid-template-columns:1fr;gap:10px}
  .quick-action-grid .btn{min-height:52px}
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head{align-items:flex-start}
  .text-link{max-width:50%}
  .plan-summary .btn{min-height:52px;padding:13px 15px}
  .v63-page-head{gap:12px}
  .v63-page-head>div{display:none}
  .v63-actions{width:100%}
  .v63-action{width:100%;min-height:56px}
  .v63-action small{font-size:10px}
  .v63-party{width:100%}
  .v63-finance{grid-template-columns:1fr 1fr}
  .v63-finance .due{grid-column:1/-1}
  .v63-notes{grid-template-columns:1fr}
  .v63-share-card{align-items:stretch;flex-direction:column}
  .v63-share-card>div:last-child{justify-content:stretch}
  .v63-share-card .btn{flex:1 1 0;width:100%}
}
@media(max-width:480px){
  .container{padding-left:14px;padding-right:14px}
  .card{padding:16px}
  .hero h1{font-size:26px}
  .dashboard-stats{grid-template-columns:1fr 1fr;gap:8px}
  .dashboard-stats .stat{padding:14px 12px}
  .dashboard-stats .stat strong{font-size:21px}
  .dashboard-focus{padding:14px}
  .plan-summary strong{font-size:19px}
  .v63-finance{grid-template-columns:1fr}
  .v63-finance .due{grid-column:auto}
}


/* V67 dashboard action icon system */
.b67-btn-icon{width:22px;height:22px;display:inline-grid;place-items:center;flex:0 0 22px}.b67-btn-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.quick-action-grid .btn{display:flex;align-items:center;justify-content:center;gap:9px}

/* V68 — professional WhatsApp brand icon: speech-tail circle + handset, used consistently on invoice sharing actions. */
.b68-whatsapp-svg{width:1.28em;height:1.28em;display:block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.b68-whatsapp-svg .b68-whatsapp-phone{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.v63-wa{color:#0ca65a!important}
.v63-wa .b68-whatsapp-svg{color:#0ca65a}
.b68-wa-inline{display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
.b68-wa-inline .b68-whatsapp-svg{width:1.15em;height:1.15em}
@media(max-width:760px){.v63-action-icon .b68-whatsapp-svg{width:1.15em;height:1.15em}.b68-wa-inline{gap:6px}}


/* =========================================================
   BILLI PRO V69 — global precision pass
   Fixes content overflow, awkward inner cards, menu hierarchy,
   professional icons and touch/click affordances across the app.
   ========================================================= */
.btn,.v63-action,button,a{ -webkit-tap-highlight-color:transparent }
.btn:focus-visible,.v63-action:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid rgba(36,87,214,.22);outline-offset:2px}
.card,.price-card,.stat,.plan-summary,.customer-card,.dashboard-focus,.payment-box,.pending-card{overflow:hidden}
.plan-summary{padding:18px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(210px,auto);align-items:center;gap:16px}
.plan-summary strong{display:block;font-size:22px;line-height:1.2;overflow-wrap:anywhere}
.plan-summary span{display:block;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.plan-summary .btn{width:100%!important;margin:0!important;min-height:48px;padding:12px 16px;white-space:normal;text-align:center;line-height:1.25}
.quick-action-grid .btn{min-height:52px;padding:12px 15px;white-space:normal;line-height:1.25}
.b67-btn-icon{flex:0 0 22px}

/* Account menu — clean app-style hierarchy */
.v69-account-menu,.v69-mobile-account-menu{background:#fff;border:1px solid #dbe3ee;border-radius:18px;padding:8px;box-shadow:0 22px 55px rgba(23,32,51,.20);color:#172033;z-index:1200}
.v69-account-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(310px,calc(100vw - 30px))}
.v69-mobile-account-menu{position:absolute;right:0;top:54px;width:min(310px,calc(100vw - 24px))}
.v69-account-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;margin-bottom:5px;border-bottom:1px solid #edf0f4;min-width:0}
.v69-avatar-large{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#2457d6;color:#fff;font-size:14px;font-weight:950}
.v69-account-head>div{min-width:0}
.v69-account-head strong{display:block;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.v69-account-head small{display:block;margin-top:2px;color:#718096;font-size:11px}
.v69-account-menu a,.v69-mobile-account-menu a{display:flex;align-items:center;gap:11px;padding:12px 11px;border-radius:11px;color:#172033;text-decoration:none!important;font-size:13px;font-weight:850;line-height:1.25}
.v69-account-menu a:hover,.v69-mobile-account-menu a:hover{background:#f1f5ff;color:#2457d6}
.v69-menu-icon{width:21px;height:21px;display:grid;place-items:center;flex:0 0 21px;color:#536177}
.v69-menu-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v69-account-menu a:hover .v69-menu-icon,.v69-mobile-account-menu a:hover .v69-menu-icon{color:#2457d6}
.v69-account-menu .v69-logout,.v69-mobile-account-menu .v69-logout{margin-top:4px;border-top:1px solid #edf0f4;border-radius:0 0 10px 10px;padding-top:13px;color:#b52e35}
.v69-account-menu .v69-logout:hover,.v69-mobile-account-menu .v69-logout:hover{background:#fff3f3;color:#b52e35}

/* Real WhatsApp-style icon: green circular mark with white handset. */
.b69-whatsapp{width:1.45em;height:1.45em;display:block;flex:0 0 auto}
.b69-whatsapp circle{fill:#25D366}
.b69-whatsapp path{fill:none;stroke:#fff;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.v63-wa .b69-whatsapp{filter:none}
.b69-wa-inline .b69-whatsapp{width:1.2em;height:1.2em}

/* Notification feedback */
.v69-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;z-index:5000;background:#172033;color:#fff;padding:10px 15px;border-radius:999px;font-size:12px;font-weight:800;box-shadow:0 12px 30px rgba(23,32,51,.22);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.v69-toast.show{opacity:1;transform:translate(-50%,0)}

/* Invoice controls: never allow long labels to distort a grid cell. */
.v63-actions{align-items:stretch}
.v63-action,.v63-delete .v63-action{min-width:0;width:100%;overflow:hidden}
.v63-action>span:last-child{min-width:0;max-width:100%}
.v63-action b,.v63-action small{max-width:100%;overflow-wrap:anywhere}
.v63-action-icon{flex:0 0 auto;display:grid;place-items:center}

@media(max-width:760px){
 .plan-summary{grid-template-columns:1fr!important;gap:12px;padding:16px!important}
 .plan-summary strong{font-size:21px}
 .plan-summary span{font-size:13px}
 .plan-summary .btn{min-height:52px!important}
 .v69-mobile-account-menu{top:52px}
 .v63-mobile-right{min-width:0}
 .v63-mobile-brand{white-space:nowrap}
 .v65-mobile-avatar-btn{min-width:44px;min-height:44px;display:grid;place-items:center}
 .v65-bell-btn{min-width:44px;min-height:44px}
 .v69-toast{bottom:18px}
}
@media(max-width:480px){
 .plan-summary{padding:15px!important}
 .plan-summary strong{font-size:20px}
 .quick-action-grid .btn{min-height:54px}
 .v63-action{padding-left:11px!important;padding-right:11px!important}
 .v63-action b{font-size:13px!important;line-height:1.2}
 .v63-action-icon svg{width:24px;height:24px}
 .v63-mobile-brand{font-size:24px}
 .v69-mobile-account-menu{right:-4px;width:min(300px,calc(100vw - 20px))}
}

/* =========================================================
   BILLI PRO V70 — reference-driven global workspace system
   Applied to all authenticated standard pages. Invoice shell
   continues to use its dedicated V63/V69 layout.
   ========================================================= */
.b70-nav-icon{width:21px;height:21px;display:inline-grid;place-items:center;flex:0 0 21px;color:currentColor}
.b70-nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.b70-topbar{height:64px;position:sticky;top:0;z-index:900;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #e5eaf1;display:flex;align-items:center;gap:14px;padding:0 24px;box-shadow:0 3px 16px rgba(23,32,51,.035)}
.b70-topbar-search{display:flex;align-items:center;gap:9px;width:min(430px,48vw);height:40px;padding:0 13px;border:1px solid #dce3ec;border-radius:11px;background:#fff;color:#718096;text-decoration:none!important;font-size:13px;font-weight:650}
.b70-topbar-search svg,.b70-topbar-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.b70-topbar-search:hover{border-color:#b9c8e3;background:#fbfcff;color:#2457d6}
.b70-topbar-spacer{flex:1}
.b70-topbar-icon{position:relative;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:#172033;cursor:pointer}
.b70-topbar-icon:hover{background:#f1f5ff;color:#2457d6}
.b70-avatar-button{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:12px;padding:5px 7px 5px 5px;color:#172033;cursor:pointer}
.b70-avatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#64748b;color:#fff;font-size:12px;font-weight:950}
.b70-avatar-name{font-size:13px;font-weight:850;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b70-chevron{font-size:16px;color:#718096;line-height:1}
.b70-account-menu{position:absolute;right:18px;top:57px;width:min(315px,calc(100vw - 28px));background:#fff;border:1px solid #dce4ee;border-radius:16px;padding:8px;box-shadow:0 22px 55px rgba(23,32,51,.18);z-index:1500}
.b70-account-head{display:flex;align-items:center;gap:11px;padding:10px;border-bottom:1px solid #edf0f4;margin-bottom:5px}
.b70-account-head strong{display:block;font-size:14px;overflow-wrap:anywhere}.b70-account-head small{display:block;color:#718096;font-size:11px;margin-top:2px}
.b70-account-menu a,.b70-account-menu button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;text-decoration:none!important;color:#172033;padding:11px 10px;border-radius:10px;font-size:13px;font-weight:800;text-align:left;cursor:pointer}
.b70-account-menu a:hover,.b70-account-menu button:hover{background:#f1f5ff;color:#2457d6}
.b70-account-menu .danger{color:#b52e35;border-top:1px solid #edf0f4;border-radius:0;margin-top:4px;padding-top:13px}
.b70-account-menu .danger:hover{background:#fff3f3;color:#b52e35}
.b70-account-menu svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 19px}
.b70-sidebar-footer{margin-top:auto;border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:14px 12px;background:rgba(255,255,255,.025);color:#fff}
.b70-sidebar-footer strong{display:block;font-size:14px}.b70-sidebar-footer span{display:block;color:#aebed2;font-size:11px;line-height:1.45;margin-top:3px}
.b70-mobile-tools{display:none}

@media(min-width:761px){
  body.billi-app>nav{position:fixed;left:0;top:0;bottom:0;width:214px;height:100vh;min-height:100vh;z-index:1200;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:22px 12px 16px;background:#071a31;border:0;border-radius:0;box-shadow:8px 0 30px rgba(7,26,49,.10);backdrop-filter:none}
  body.billi-app>nav .logo{color:#fff!important;font-size:24px;padding:0 9px 22px}
  body.billi-app>nav .logo span{background:transparent;border:1px solid rgba(255,255,255,.9);padding:4px 7px}
  body.billi-app>nav .menu-toggle{display:none}
  body.billi-app>nav .navlinks{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;width:100%}
  body.billi-app>nav .navlinks a{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;color:#d5dfec;font-size:13px;font-weight:750;border-radius:10px;white-space:normal}
  body.billi-app>nav .navlinks a:hover{background:rgba(36,87,214,.26);color:#fff}
  body.billi-app>nav .navlinks a.active{background:#1764ea;color:#fff;box-shadow:0 7px 18px rgba(23,100,234,.24)}
  body.billi-app>nav .navlinks a.active .b70-nav-icon{color:#fff}
  body.billi-app>nav .navlinks a:last-child{margin-top:6px}
  body.billi-app>main.container{margin-left:214px;margin-right:0;width:calc(100% - 214px);max-width:none;padding-left:26px;padding-right:26px;margin-top:0}
  body.billi-app .b70-topbar{margin-left:214px}
  body.billi-app .hero{max-width:1180px;margin:30px auto 24px}
  body.billi-app .card,body.billi-app .stat{box-shadow:0 10px 28px rgba(23,32,51,.055)}
}

@media(max-width:760px){
  body.billi-app>nav{background:#2457d6;color:#fff;border-bottom:0;box-shadow:0 6px 22px rgba(36,87,214,.18);padding:8px 16px}
  body.billi-app>nav .logo{order:2;color:#fff!important;font-size:25px;margin-right:auto}
  body.billi-app>nav .logo span{background:transparent;border:1px solid #fff;color:#fff}
  body.billi-app>nav .menu-toggle{order:1;border:0;background:transparent;color:#fff;box-shadow:none;width:52px;height:52px}
  body.billi-app>nav .menu-toggle:hover{background:rgba(255,255,255,.10);border-color:transparent}
  body.billi-app>nav .mobile-nav-backdrop{inset:68px 0 0}
  body.billi-app>nav .navlinks{right:auto;left:12px;top:76px;width:min(310px,calc(100vw - 24px));padding:9px;background:#fff;border:1px solid #dbe3ee;border-radius:16px;box-shadow:0 22px 55px rgba(23,32,51,.20)}
  body.billi-app>nav .navlinks a{display:flex;align-items:center;gap:11px;padding:12px 13px;color:#172033;font-size:14px}
  body.billi-app>nav .navlinks a:hover,body.billi-app>nav .navlinks a.active{background:#eef3ff;color:#2457d6}
  body.billi-app>nav .navlinks a.active .b70-nav-icon{color:#2457d6}
  body.billi-app>main.container{margin-top:0;padding-top:25px}
  .b70-topbar{display:none}
  .b70-mobile-tools{order:3;display:flex;align-items:center;gap:4px}
  .b70-mobile-tools button{width:42px;height:42px;border:0;background:transparent;color:#fff;border-radius:11px;display:grid;place-items:center;cursor:pointer}
  .b70-mobile-tools button:hover{background:rgba(255,255,255,.10)}
  .b70-mobile-tools svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .b70-mobile-tools .b70-avatar{width:39px;height:39px;background:#64748b;font-size:12px}
}

/* Global content fitting: every card and button must contain its content. */
body.billi-app .card,body.billi-app .stat,body.billi-app .price-card,body.billi-app .plan-summary,body.billi-app .payment-box,body.billi-app .pending-card{min-width:0;overflow:hidden}
body.billi-app .card *{min-width:0;max-width:100%}
body.billi-app h1,body.billi-app h2,body.billi-app h3,body.billi-app p,body.billi-app strong,body.billi-app span,body.billi-app label{overflow-wrap:anywhere;word-break:break-word}
body.billi-app .btn{min-width:0;max-width:100%;white-space:normal;line-height:1.25;text-align:center}
body.billi-app .quick-action-grid .btn{min-height:56px}
body.billi-app .plan-summary{display:grid!important;grid-template-columns:1fr!important;align-items:stretch;gap:10px;padding:18px!important}
body.billi-app .plan-summary strong{font-size:26px;line-height:1.15;margin:0}
body.billi-app .plan-summary span{font-size:13px;line-height:1.45;margin:0;color:var(--muted)}
body.billi-app .plan-summary .btn{width:100%!important;min-height:52px;margin:2px 0 0!important;padding:13px 16px}
body.billi-app .dashboard-stats .stat{height:100%}
body.billi-app .dashboard-list-card{height:100%}

@media(max-width:760px){
 body.billi-app .plan-summary{padding:16px!important;gap:9px}
 body.billi-app .plan-summary strong{font-size:24px}
 body.billi-app .plan-summary span{font-size:13px}
 body.billi-app .plan-summary .btn{min-height:54px}
 body.billi-app .card{border-radius:17px}
}
@media(max-width:420px){
 body.billi-app .plan-summary strong{font-size:22px}
 body.billi-app .quick-action-grid .btn{min-height:56px;padding-left:13px;padding-right:13px}
}

/* V70 mobile account placement */
@media(max-width:760px){
  .b70-mobile-tools{position:relative}
  .b70-mobile-tools .b70-account-menu{position:absolute;right:-4px;top:49px;width:min(310px,calc(100vw - 24px))}
}

/* =========================================================
   V71 — REFERENCE-MATCHED GLOBAL UI / CONTENT FIT / MOBILE UX
   Design target: supplied BILLI PRO desktop + mobile screenshots.
   ========================================================= */

/* Never let a control create an accidental narrow column or spill out of its card. */
body.billi-app .card,
body.billi-app .stat,
body.billi-app .price-card,
body.billi-app .plan-summary,
body.billi-app .payment-box,
body.billi-app .pending-card,
.v63-action,
.v63-invoice-card { box-sizing:border-box; }

body.billi-app .btn,
body.billi-app button.btn,
body.billi-app a.btn,
body.billi-app input[type=submit],
body.billi-app input[type=button] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow:hidden;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:normal;
}
body.billi-app .btn > span,
body.billi-app .btn > strong,
body.billi-app .btn > b { min-width:0; }

/* Real SVG navigation icons — remove legacy pseudo-symbol duplicates. */
body.billi-app>nav .navlinks a::before { content:none!important; display:none!important; }

/* Mobile standard pages match the supplied app header: hamburger → BILLI → tools. */
@media(max-width:760px){
  body.billi-app>nav {
    height:68px!important; min-height:68px!important;
    display:flex!important; flex-direction:row!important; align-items:center!important;
    gap:10px!important; padding:8px 16px!important;
  }
  body.billi-app>nav .menu-toggle { order:1!important; flex:0 0 48px; }
  body.billi-app>nav .logo { order:2!important; margin:0!important; padding:0!important; flex:0 0 auto; }
  body.billi-app>nav .b70-mobile-tools { order:3!important; margin-left:auto; }
  body.billi-app>nav .navlinks { top:68px!important; left:0!important; width:min(310px,88vw)!important; height:calc(100vh - 68px)!important; max-height:none!important; border-radius:0 18px 18px 0!important; padding:14px!important; }
  body.billi-app>nav .navlinks a { min-height:50px!important; padding:12px 14px!important; }
  body.billi-app>.container { padding-top:24px!important; }

  /* Every plan/pricing card contains its own price, description and CTA. */
  body.billi-app .plan-summary {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:11px!important;
    padding:18px!important;
    box-sizing:border-box!important;
  }
  body.billi-app .plan-summary strong {
    display:block!important;
    width:100%!important;
    font-size:25px!important;
    line-height:1.2!important;
    margin:0!important;
  }
  body.billi-app .plan-summary span { display:block!important; width:100%!important; line-height:1.5!important; }
  body.billi-app .plan-summary .btn { width:100%!important; min-height:54px!important; margin:1px 0 0!important; padding:13px 15px!important; }

  /* Dashboard quick actions: no squeezed text. */
  body.billi-app .quick-action-grid { grid-template-columns:1fr!important; gap:10px!important; }
  body.billi-app .quick-action-grid .btn { min-height:56px!important; width:100%!important; }
}

@media(min-width:761px){
  body.billi-app .plan-summary {
    grid-template-columns:minmax(0,1fr) minmax(260px,330px)!important;
    align-items:center!important;
    gap:22px!important;
    padding:20px 22px!important;
  }
  body.billi-app .plan-summary strong { font-size:25px!important; line-height:1.2!important; }
  body.billi-app .plan-summary .btn { width:100%!important; min-height:52px!important; }
}

/* ---------------- Invoice reference layout ---------------- */
.v63-app-shell { min-width:0; }
.v63-main,.v63-content { min-width:0; }
.v63-actions { align-items:stretch!important; }
.v63-action { box-sizing:border-box; min-width:0!important; overflow:hidden!important; }
.v63-action > span:last-child { min-width:0!important; overflow:hidden; }
.v63-action b,.v63-action small { display:block; min-width:0; overflow-wrap:anywhere; }
.v63-action-icon { flex:0 0 auto!important; }

@media(min-width:761px){
  .v63-content { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
  .v63-actions { grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:8px!important; }
  .v63-actions>.v63-action:nth-child(1){grid-column:1 / span 2!important;grid-row:1!important}
  .v63-actions>.v63-action:nth-child(2){grid-column:3 / span 2!important;grid-row:1!important}
  .v63-actions>.v63-action:nth-child(3){grid-column:5 / span 2!important;grid-row:1!important}
  .v63-actions>.v63-action:nth-child(4){grid-column:1 / span 3!important;grid-row:2!important}
  .v63-actions>.v63-action:nth-child(5){grid-column:4 / span 3!important;grid-row:2!important}
  .v63-actions>.v63-action:nth-child(6){grid-column:1 / span 2!important;grid-row:3!important}
  .v63-actions>.v63-action:nth-child(7){grid-column:3 / span 2!important;grid-row:3!important}
  .v63-actions>.v63-delete{grid-column:5 / span 2!important;grid-row:3!important}
  .v63-action { min-height:70px!important; padding:10px 14px!important; }
  .v63-action b { font-size:15px!important; line-height:1.18!important; }
  .v63-action small { font-size:11px!important; line-height:1.25!important; margin-top:2px; color:#63728a; }
  .v63-invoice-card { padding:20px!important; }
  .v63-parties { gap:12px!important; }
  .v63-party { padding:14px 16px!important; }
  .v63-finance { gap:10px!important; }
  .v63-notes { gap:10px!important; }
}

@media(max-width:760px){
  .v63-content { width:100%!important; padding:14px 20px 30px!important; box-sizing:border-box; }
  .v63-page-head { margin-bottom:14px!important; }
  .v63-back { min-height:54px!important; padding:13px 16px!important; border-radius:16px!important; font-size:17px!important; width:max-content; max-width:100%; }
  .v63-actions { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; margin-bottom:18px!important; }
  .v63-action { min-height:82px!important; padding:11px 10px!important; border-radius:18px!important; gap:9px!important; }
  .v63-action b { font-size:16px!important; line-height:1.18!important; }
  .v63-action small { display:none!important; }
  .v63-action-icon svg { width:29px!important; height:29px!important; }
  .v63-actions>.v63-action:nth-child(1){grid-column:1!important;grid-row:1!important}
  .v63-actions>.v63-action:nth-child(2){grid-column:2!important;grid-row:1!important}
  .v63-actions>.v63-action:nth-child(3){grid-column:1/-1!important;grid-row:2!important}
  .v63-actions>.v63-action:nth-child(4){grid-column:1!important;grid-row:3!important}
  .v63-actions>.v63-action:nth-child(5){grid-column:2!important;grid-row:3!important}
  .v63-actions>.v63-action:nth-child(6){grid-column:1!important;grid-row:4!important}
  .v63-actions>.v63-action:nth-child(7){grid-column:2!important;grid-row:4!important}
  .v63-actions>.v63-delete{grid-column:1/-1!important;grid-row:5!important}
  .v63-delete .v63-action { min-height:78px!important; }
  .v63-invoice-card { padding:24px 18px 18px!important; border-radius:20px!important; }
  .v63-business h1 { font-size:27px!important; line-height:1.15!important; }
  .v63-business p { font-size:14px!important; }
  .v63-invoice-meta { margin-top:18px!important; padding-top:16px!important; }
  .v63-invoice-meta h2 { font-size:22px!important; overflow-wrap:anywhere; }
  .v63-parties { gap:10px!important; }
  .v63-party { padding:14px 15px!important; border-radius:14px!important; cursor:pointer; }
  .v63-party-heading { min-height:26px; }
  .v63-party-heading i { font-size:18px!important; }
  .v63-party h3 { margin-top:9px!important; }
  .v63-items { margin-top:15px!important; }
  .v63-items tr { padding:12px 0!important; }
  .v63-items td { min-height:22px; align-items:flex-start; }
  .v63-totals { margin-top:13px!important; }
  .v63-finance { gap:9px!important; }
  .v63-finance>div,.v63-finance>a { min-height:68px!important; padding:12px!important; border-radius:14px!important; }
  .v63-finance span { font-size:10px!important; line-height:1.25!important; }
  .v63-finance b { font-size:17px!important; line-height:1.2!important; }
  .v63-notes>div { padding:13px!important; border-radius:13px!important; }
  .v63-share-card { padding:14px!important; border-radius:15px!important; }
  .v63-share-card>div:last-child { gap:8px!important; }
  .v63-share-card .btn { min-height:46px!important; padding:10px 9px!important; font-size:12px!important; }
}

@media(max-width:420px){
  .v63-content { padding-left:20px!important; padding-right:20px!important; }
  .v63-action { min-height:76px!important; padding-left:8px!important; padding-right:8px!important; }
  .v63-action b { font-size:14px!important; }
  .v63-action-icon svg { width:27px!important;height:27px!important; }
  .v63-invoice-card { padding-left:16px!important; padding-right:16px!important; }
}

/* Mobile invoice collapsible sections — JS adds .b71-collapsed only when requested. */
@media(max-width:760px){
  .v63-party.b71-collapsed > :not(.v63-party-heading) { display:none!important; }
  .v63-party.b71-collapsed .v63-party-heading i { transform:rotate(-90deg); }
  .v63-party-heading i { transition:transform .18s ease; }
  .v63-items.b71-collapsed table { display:none!important; }
  .v63-items.b71-collapsed::before { content:'Tap to view invoice items'; display:block; padding:14px; background:#f5f8ff; border:1px solid #dce5f5; border-radius:13px; color:#68778e; font-size:12px; font-weight:700; }
}

/* Professional WhatsApp icon: green circle + white speech-bubble/handset. */
.b71-whatsapp-icon { width:1.25em!important; height:1.25em!important; display:block; flex:0 0 auto; }
.b71-whatsapp-icon .wa-disc { fill:#18b65b; stroke:none; }
.b71-whatsapp-icon .wa-bubble { fill:#fff; stroke:none; }
.b71-whatsapp-icon .wa-phone { fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* Prevent any image/logo from creating broken/oversized invoice headers. */
.v63-brandline img { max-width:52px; max-height:28px; width:auto; height:auto; object-fit:contain; }
.v63-brandline { min-width:0; display:flex; align-items:center; gap:7px; }

/* Global desktop tables stay inside their cards; mobile cards never horizontally overflow. */
body.billi-app .responsive-table,
body.billi-app .table-wrap { min-width:0; max-width:100%; overflow-x:auto; }
body.billi-app table { max-width:100%; }

/* V71 focus/click states. Every interactive surface advertises that it is interactive. */
a.btn,button.btn,.v63-action,.dashboard-row,.getting-started-step,.b70-avatar-button,.b70-mobile-avatar-btn,.b70-topbar-icon,.v63-mobile-menu,.v63-menu-btn { cursor:pointer; }
a.btn:active,button.btn:active,.v63-action:active { transform:translateY(1px); }

/* V71 invoice sidebar icons + item toggle */
.v71-nav-icon{width:21px;height:21px;display:inline-grid;place-items:center;flex:0 0 21px;color:currentColor}
.v71-nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.b71-items-toggle{display:none}
@media(max-width:760px){
  .b71-items-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;margin:0 0 9px;padding:13px 14px;border:1px solid #dce5f2;border-radius:14px;background:#f5f8ff;color:#172033;font:inherit;font-size:15px;font-weight:900;cursor:pointer}
  .b71-items-toggle::after{content:'⌄';font-size:18px;color:#536177}
  .v63-items.b71-collapsed .b71-items-toggle::after{transform:rotate(-90deg)}
  .v63-items.b71-collapsed table{display:none!important}
}

/* V71 plan card uses a dedicated copy column so price/help never compete with CTA. */
body.billi-app .plan-summary .plan-copy{min-width:0;display:grid;gap:6px;align-content:center}
body.billi-app .plan-summary .plan-copy strong{margin:0!important}
body.billi-app .plan-summary .plan-copy span{margin:0!important}
@media(max-width:760px){body.billi-app .plan-summary .plan-copy{gap:6px}.plan-summary .plan-copy strong{font-size:24px!important}}


/* =========================================================
   BILLI PRO V72 — GLOBAL UI CLEANUP / NO DUPLICATE NAV
   Reference target: clean mobile app bar + professional desktop sidebar.
   ========================================================= */
body.billi-app > nav.b72-global-nav { box-sizing:border-box; }
body.billi-app > nav.b72-global-nav .logo { display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; gap:9px!important; box-sizing:border-box; text-decoration:none!important; }
body.billi-app > nav.b72-global-nav .logo span { display:inline-flex!important; align-items:center!important; justify-content:center!important; height:30px!important; min-width:46px!important; box-sizing:border-box; padding:0 9px!important; border:2px solid currentColor!important; border-radius:8px!important; background:transparent!important; font-size:11px!important; line-height:1!important; letter-spacing:.5px!important; }
body.billi-app > nav.b72-global-nav .navlinks a::before { content:none!important; display:none!important; }
body.billi-app > nav.b72-global-nav .b72-nav-icon { width:21px;height:21px;display:grid;place-items:center;flex:0 0 21px;color:currentColor; }
body.billi-app > nav.b72-global-nav .b72-nav-icon svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
body.billi-app > nav.b72-global-nav .navlinks a { text-decoration:none!important; }
body.billi-app > nav.b72-global-nav .navlinks a > span:last-child { min-width:0; }
body.billi-app > nav.b72-global-nav .navlinks a.active .b72-nav-icon { color:currentColor; }
.b70-account-menu .danger { margin-top:4px; }

@media(min-width:761px){
  body.billi-app > nav.b72-global-nav { width:214px!important; padding:22px 12px 16px!important; }
  body.billi-app > nav.b72-global-nav .logo { width:100%!important; padding:2px 10px 22px!important; font-size:24px!important; flex:0 0 auto; }
  body.billi-app > nav.b72-global-nav .logo span { color:#fff!important; }
  body.billi-app > nav.b72-global-nav .navlinks { flex:0 0 auto!important; }
  body.billi-app > nav.b72-global-nav .navlinks a { min-height:46px; box-sizing:border-box; }
  body.billi-app > nav.b72-global-nav .navlinks a:last-child { margin-top:6px; }
}

@media(max-width:760px){
  body.billi-app > nav.b72-global-nav { height:68px!important; min-height:68px!important; max-height:68px!important; overflow:visible!important; padding:8px 16px!important; display:flex!important; align-items:center!important; gap:10px!important; }
  body.billi-app > nav.b72-global-nav .b70-sidebar-footer,
  body.billi-app > nav.b72-global-nav > .b70-sidebar-footer { display:none!important; }
  body.billi-app > nav.b72-global-nav .logo { order:2!important; flex:0 0 auto!important; width:auto!important; margin:0!important; padding:0!important; font-size:25px!important; line-height:1!important; }
  body.billi-app > nav.b72-global-nav .logo span { height:34px!important; min-width:49px!important; padding:0 9px!important; border-width:2px!important; border-radius:9px!important; font-size:11px!important; }
  body.billi-app > nav.b72-global-nav .menu-toggle { order:1!important; flex:0 0 48px!important; width:48px!important; height:48px!important; margin:0!important; }
  body.billi-app > nav.b72-global-nav .b70-mobile-tools { order:3!important; margin-left:auto!important; flex:0 0 auto!important; position:relative!important; }
  body.billi-app > nav.b72-global-nav .mobile-nav-backdrop { inset:68px 0 0!important; }
  body.billi-app > nav.b72-global-nav .navlinks { top:68px!important; left:0!important; right:auto!important; width:min(310px,88vw)!important; height:calc(100vh - 68px)!important; max-height:none!important; border-radius:0 18px 18px 0!important; padding:14px!important; }
  body.billi-app > nav.b72-global-nav .navlinks a { min-height:50px!important; padding:12px 14px!important; }
  body.billi-app > nav.b72-global-nav .b70-mobile-tools .b70-mobile-bell,
  body.billi-app > nav.b72-global-nav .b70-mobile-tools .b70-mobile-avatar-btn { width:44px!important; height:44px!important; }
  body.billi-app > nav.b72-global-nav .b70-mobile-tools .b70-avatar { width:40px!important; height:40px!important; font-size:13px!important; }
  body.billi-app > nav.b72-global-nav .b70-mobile-tools .b70-account-menu { right:-4px!important; top:50px!important; width:min(300px,calc(100vw - 20px))!important; }
  body.billi-app > nav.b72-global-nav .b70-account-head { padding:12px!important; }
  body.billi-app > nav.b72-global-nav .b70-account-head .b70-avatar { width:44px!important;height:44px!important;font-size:14px!important; }
  body.billi-app > nav.b72-global-nav .b70-account-menu a.danger { min-height:48px!important; }
}

body.billi-app .plan-summary { box-sizing:border-box!important; overflow:hidden!important; }
body.billi-app .plan-summary > * { min-width:0!important; max-width:100%!important; }
body.billi-app .plan-summary .btn { box-sizing:border-box!important; overflow-wrap:anywhere!important; }
body.billi-app .card, body.billi-app .price-card, body.billi-app .stat, body.billi-app .plan-summary, body.billi-app .payment-box { box-sizing:border-box; }

.v63-mobile-topbar .v69-mobile-account-menu { box-sizing:border-box; }
.v63-mobile-topbar .v69-mobile-account-menu .v69-account-head { margin-bottom:4px; }
.v63-mobile-topbar .v69-mobile-account-menu .v69-logout { margin-top:4px; }
.v63-account-wrap .v69-account-menu .v69-account-head { margin-bottom:4px; }
.v63-account-wrap .v69-account-menu .v69-logout { margin-top:4px; }

.b71-whatsapp-icon { width:1.45em!important; height:1.45em!important; min-width:1.45em!important; min-height:1.45em!important; flex:0 0 1.45em!important; }
.v63-action .v63-wa { display:grid!important; place-items:center!important; }
.b68-wa-inline { display:inline-flex!important; align-items:center!important; gap:8px!important; }
.b68-wa-inline .b71-whatsapp-icon { width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important; }

@media(max-width:760px){
  .v63-actions .v63-action { min-width:0!important; overflow:hidden!important; }
  .v63-actions .v63-action > span:last-child { min-width:0!important; max-width:100%!important; overflow-wrap:anywhere!important; text-align:center!important; }
  .v63-actions .v63-action b { display:block; overflow-wrap:anywhere!important; }
}


/* ================================================================
   BILLI PRO V73 — GLOBAL UI / NAVIGATION FINAL LAYER
   One navigation system, one account menu, no stray mobile content.
   ================================================================ */
html,body{max-width:100%;overflow-x:hidden}
body.billi-app{background:#f5f7fb;color:#172033}
body.billi-app>nav.b72-global-nav{box-sizing:border-box;z-index:2000}
body.billi-app>nav.b72-global-nav .b70-sidebar-footer{display:none!important}
body.billi-app>nav.b72-global-nav .navlinks{box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.billi-app>nav.b72-global-nav .navlinks a{box-sizing:border-box;min-width:0}
body.billi-app>nav.b72-global-nav .navlinks a span:last-child{min-width:0;overflow-wrap:anywhere}
body.billi-app>nav.b72-global-nav .logo{flex-shrink:0;white-space:nowrap}
body.billi-app>nav.b72-global-nav .menu-toggle{flex-shrink:0;display:grid;place-items:center}
body.billi-app>nav.b72-global-nav .menu-icon{display:flex;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;pointer-events:none}
body.billi-app>nav.b72-global-nav .menu-icon i{display:block;width:26px;height:2.5px;border-radius:99px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
body.billi-app>nav.b72-global-nav .menu-toggle.is-open .menu-icon i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.billi-app>nav.b72-global-nav .menu-toggle.is-open .menu-icon i:nth-child(2){opacity:0}
body.billi-app>nav.b72-global-nav .menu-toggle.is-open .menu-icon i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.b70-account-menu{box-sizing:border-box;overflow:hidden}
.b70-account-menu a{min-height:46px!important}
.b70-account-menu .danger{border-top:1px solid #edf0f4!important;margin-top:6px!important;padding-top:13px!important}
.b70-account-head{min-width:0}
.b70-account-head>div{min-width:0}
.b70-account-head strong{overflow-wrap:anywhere}
.b70-account-head small{white-space:nowrap}
.b70-avatar{font-variant-numeric:tabular-nums}

@media(max-width:760px){
  body.billi-app>nav.b72-global-nav{position:fixed!important;left:0;right:0;top:0;bottom:auto;width:100%!important;height:68px!important;min-height:68px!important;max-height:68px!important;padding:8px 16px!important;display:flex!important;align-items:center!important;gap:10px!important;overflow:visible!important;background:#2457d6!important;color:#fff!important;border:0!important;border-radius:0!important;box-shadow:0 6px 22px rgba(36,87,214,.18)!important}
  body.billi-app>nav.b72-global-nav .logo{order:2!important;margin:0!important;padding:0!important;width:auto!important;font-size:25px!important;line-height:1!important;color:#fff!important}
  body.billi-app>nav.b72-global-nav .logo span{height:34px!important;min-width:49px!important;border:2px solid #fff!important;border-radius:9px!important;padding:0 9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:11px!important;line-height:1!important;color:#fff!important;background:transparent!important}
  body.billi-app>nav.b72-global-nav .menu-toggle{order:1!important;width:48px!important;height:48px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;box-shadow:none!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools{order:3!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:5px!important;position:relative!important;flex:0 0 auto!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools button{width:44px!important;height:44px!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-avatar{width:40px!important;height:40px!important;font-size:13px!important;background:#64748b!important}
  body.billi-app>nav.b72-global-nav .navlinks{position:fixed!important;left:0!important;right:auto!important;top:68px!important;width:min(310px,88vw)!important;height:calc(100dvh - 68px)!important;max-height:none!important;margin:0!important;padding:14px!important;background:#fff!important;border:1px solid #dbe3ee!important;border-left:0!important;border-radius:0 18px 18px 0!important;box-shadow:18px 0 45px rgba(23,32,51,.20)!important;transform:translateX(-105%)!important;visibility:hidden!important;opacity:0!important;transition:transform .22s ease,opacity .18s ease,visibility .22s ease!important;z-index:2100!important}
  body.billi-app>nav.b72-global-nav .navlinks.open{transform:translateX(0)!important;visibility:visible!important;opacity:1!important}
  body.billi-app>nav.b72-global-nav .navlinks a{min-height:50px!important;padding:12px 14px!important;border-radius:11px!important;color:#172033!important;font-size:14px!important}
  body.billi-app>nav.b72-global-nav .navlinks a:hover,body.billi-app>nav.b72-global-nav .navlinks a.active{background:#eef3ff!important;color:#2457d6!important}
  body.billi-app>nav.b72-global-nav .navlinks a.active .b72-nav-icon{color:#2457d6!important}
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop{position:fixed!important;inset:68px 0 0!important;background:rgba(7,18,35,.38)!important;z-index:2050!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .18s ease,visibility .18s ease!important}
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  body.billi-app.menu-open{overflow:hidden!important}
  body.billi-app>.container{margin-top:68px!important;padding-top:24px!important}
  .b70-account-menu{position:absolute!important;right:-4px!important;top:49px!important;width:min(315px,calc(100vw - 20px))!important;padding:8px!important;border-radius:18px!important;z-index:3000!important;box-shadow:0 24px 60px rgba(23,32,51,.22)!important}
  .b70-account-head{padding:12px!important;gap:12px!important}
  .b70-account-head .b70-avatar{width:46px!important;height:46px!important;font-size:14px!important}
  .b70-account-head strong{font-size:15px!important}
  .b70-account-head small{font-size:11px!important}
  .b70-account-menu a{font-size:14px!important;min-height:50px!important;padding:12px 11px!important}
}

@media(min-width:761px){
  body.billi-app>nav.b72-global-nav{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:214px!important;height:100vh!important;padding:22px 12px 16px!important;background:#071a31!important;color:#fff!important;display:flex!important;flex-direction:column!important;align-items:stretch!important}
  body.billi-app>nav.b72-global-nav .navlinks{display:flex!important;flex-direction:column!important;gap:4px!important;width:100%!important;flex:1 1 auto!important}
  body.billi-app>nav.b72-global-nav .navlinks a{min-height:46px!important;padding:11px 12px!important;color:#d5dfec!important;border-radius:10px!important}
  body.billi-app>nav.b72-global-nav .navlinks a:hover,body.billi-app>nav.b72-global-nav .navlinks a.active{background:rgba(36,87,214,.30)!important;color:#fff!important}
  body.billi-app>nav.b72-global-nav .menu-toggle{display:none!important}
  body.billi-app>main.container{margin-left:214px!important;width:calc(100% - 214px)!important;max-width:none!important;padding-left:26px!important;padding-right:26px!important}
  body.billi-app .b70-topbar{margin-left:214px!important}
  .b70-account-menu{position:absolute!important;right:18px!important;top:57px!important;width:315px!important}
}

/* Plan cards: text and CTA are always contained and vertically aligned. */
body.billi-app .plan-summary{box-sizing:border-box!important;width:100%!important;min-width:0!important;overflow:hidden!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:stretch!important;padding:18px!important}
body.billi-app .plan-summary .plan-copy{min-width:0!important;width:100%!important;display:grid!important;gap:6px!important}
body.billi-app .plan-summary .plan-copy strong{display:block!important;margin:0!important;font-size:25px!important;line-height:1.2!important;overflow-wrap:anywhere!important}
body.billi-app .plan-summary .plan-copy span{display:block!important;margin:0!important;line-height:1.45!important;overflow-wrap:anywhere!important}
body.billi-app .plan-summary>.btn{width:100%!important;min-width:0!important;min-height:54px!important;margin:0!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important}

/* Invoice page — the custom shell uses the same interaction rules. */
.v63-app-shell{min-width:0!important;overflow-x:hidden!important}
.v63-mobile-topbar{z-index:2100!important}
.v63-mobile-menu{position:relative!important;z-index:2200!important;cursor:pointer!important}
.v63-sidebar{z-index:2150!important}
.v63-app-shell.v63-menu-open::after{z-index:2120!important;pointer-events:auto!important}
.v63-mobile-right{position:relative!important;z-index:2300!important}
.v69-mobile-account-menu{z-index:2400!important;box-sizing:border-box!important;max-width:calc(100vw - 20px)!important;overflow:hidden!important}
.v69-mobile-account-menu .v69-account-head{min-width:0!important}
.v69-mobile-account-menu .v69-account-head>div{min-width:0!important}
.v69-mobile-account-menu a{min-height:48px!important}
.v63-mobile-brand{display:inline-flex!important;align-items:center!important;gap:8px!important;white-space:nowrap!important}
.v63-mobile-brand span{height:34px!important;min-width:49px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;border:2px solid #fff!important;border-radius:9px!important;padding:0 9px!important;font-size:11px!important;line-height:1!important}

/* Printing must never print the web application shell. */
@media print{
  body.v63-invoice-body .v63-app-shell,.b70-topbar,body.billi-app>nav{display:none!important}
  body.v63-invoice-body .v63-mobile-topbar,body.v63-invoice-body .v63-sidebar{display:none!important}
}


/* V73 invoice shell cleanup: no repeated promotional footer inside the mobile drawer. */
@media(max-width:760px){
  body.v63-invoice-body .v63-sidebar-footer{display:none!important}
  body.v63-invoice-body .v63-sidebar{padding-bottom:24px!important}
  body.v63-invoice-body .v63-side-nav{padding-bottom:10px!important}
  body.v63-invoice-body .v63-mobile-topbar{height:68px!important;padding:0 16px!important;gap:13px!important}
  body.v63-invoice-body .v63-mobile-menu{width:48px!important;height:48px!important;display:grid!important;place-items:center!important}
  body.v63-invoice-body .v63-mobile-brand{font-size:25px!important;font-weight:950!important}
  body.v63-invoice-body .v63-mobile-right .v65-mobile-avatar-btn{width:44px!important;height:44px!important}
}


/* V74 final polish: compact mobile invoice actions without awkward text wrapping. */
@media (max-width:430px){
  body.v63-invoice-body .v63-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;margin-bottom:20px!important}
  body.v63-invoice-body .v63-actions .v63-action{min-width:0!important;min-height:74px!important;padding:10px 8px!important;gap:7px!important;overflow:hidden!important}
  body.v63-invoice-body .v63-actions .v63-action b{font-size:14px!important;line-height:1.12!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
  body.v63-invoice-body .v63-actions .v63-action-icon svg{width:25px!important;height:25px!important;flex:0 0 25px!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(4) b{white-space:nowrap!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(5) b{font-size:14px!important}
  body.v63-invoice-body .v63-delete .v63-action{min-height:72px!important}
  body.v63-invoice-body .v63-delete .v63-action b{font-size:15px!important}
  body.v63-invoice-body .v63-mobile-brand{gap:7px!important}
  body.v63-invoice-body .v63-mobile-brand span{min-width:48px!important;height:32px!important;border-radius:9px!important;font-size:11px!important;padding:0 8px!important}
  body.v63-invoice-body .v63-mobile-menu{z-index:2300!important;pointer-events:auto!important}
  body.v63-invoice-body .v63-mobile-right{z-index:2300!important}
  body.v63-invoice-body .v69-mobile-account-menu{right:0!important;top:50px!important;width:min(310px,calc(100vw - 18px))!important}
}

/* V74 canonical avatar: every customer-facing page uses one stable initials value. */
.b70-avatar,.v63-avatar,.v69-avatar-large{font-variant-numeric:tabular-nums;letter-spacing:0!important}
.b71-whatsapp-icon .wa-disc{fill:#25D366!important}
.b71-whatsapp-icon .wa-bubble{fill:#fff!important}
.b71-whatsapp-icon .wa-phone{stroke:#25D366!important;stroke-width:2.1!important}


/* V74 WhatsApp mark: keep the handset centered inside the white chat bubble. */
.b71-whatsapp-icon{overflow:visible!important}
.b71-whatsapp-icon .wa-phone{stroke:#25D366!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important}


/* ================================================================
   BILLI PRO V75 — CLEAN RESPONSIVE WORKSPACE
   Final layer: one predictable breakpoint, full-size desktop canvas,
   compact mobile app bar, consistent avatar initials, and contained cards.
   ================================================================ */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body{min-width:0}

/* One source of truth for the authenticated avatar. */
.b70-avatar,.v63-avatar,.v69-avatar-large{font-family:inherit!important;font-weight:900!important;letter-spacing:0!important;text-transform:uppercase!important}

/* Standard authenticated pages — desktop canvas. */
@media(min-width:901px){
  body.billi-app{overflow-x:hidden!important}
  body.billi-app>nav.b72-global-nav{width:232px!important;padding:24px 14px 18px!important}
  body.billi-app>nav.b72-global-nav .logo{font-size:27px!important;padding:0 10px 25px!important;gap:9px!important}
  body.billi-app>nav.b72-global-nav .logo span{font-size:11px!important;padding:5px 8px!important;border-radius:7px!important}
  body.billi-app>nav.b72-global-nav .navlinks{gap:5px!important}
  body.billi-app>nav.b72-global-nav .navlinks a{min-height:48px!important;padding:12px 13px!important;font-size:14px!important;gap:12px!important}
  body.billi-app>main.container{margin-left:232px!important;width:calc(100% - 232px)!important;max-width:none!important;padding:30px 34px 48px!important}
  body.billi-app .b70-topbar{margin-left:232px!important;height:68px!important;padding:0 30px!important}
  body.billi-app .b70-topbar-search{width:min(500px,48vw)!important;height:42px!important;font-size:13px!important}
  body.billi-app .hero{max-width:1280px!important;margin:0 auto 24px!important}
  body.billi-app .card{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}
  body.billi-app .stats{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}
  body.billi-app .grid2{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}
  body.billi-app .plan-summary{grid-template-columns:minmax(0,1fr) minmax(270px,360px)!important;align-items:center!important}

  /* Invoice workspace: use all available width without squeezing. */
  body.v63-invoice-body .v63-app-shell{min-height:100vh!important;display:flex!important}
  body.v63-invoice-body .v63-sidebar{display:flex!important;width:232px!important;flex:0 0 232px!important;padding:24px 14px 18px!important}
  body.v63-invoice-body .v63-main{min-width:0!important;flex:1 1 auto!important;width:calc(100% - 232px)!important}
  body.v63-invoice-body .v63-topbar{height:68px!important;padding:0 30px!important}
  body.v63-invoice-body .v63-content{width:min(1320px,calc(100% - 56px))!important;max-width:1320px!important;margin:0 auto!important;padding:28px 0 50px!important}
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important;margin-bottom:20px!important}
  body.v63-invoice-body .v63-action{min-height:76px!important;padding:12px 16px!important;border-radius:13px!important}
  body.v63-invoice-body .v63-action-icon svg{width:28px!important;height:28px!important}
  body.v63-invoice-body .v63-action b{font-size:15px!important;line-height:1.2!important}
  body.v63-invoice-body .v63-action small{font-size:11px!important;line-height:1.3!important}
  body.v63-invoice-body .v63-invoice-card{padding:28px 30px 22px!important;border-radius:18px!important}
  body.v63-invoice-body .v63-business h1{font-size:31px!important}
  body.v63-invoice-body .v63-invoice-meta h2{font-size:24px!important}
  body.v63-invoice-body .v63-party{padding:16px 18px!important;min-height:118px!important}
  body.v63-invoice-body .v63-items th,body.v63-invoice-body .v63-items td{padding:11px 9px!important}
  body.v63-invoice-body .v63-items td{font-size:13px!important}
  body.v63-invoice-body .v63-finance>div{min-height:68px!important;padding:12px 14px!important}
  body.v63-invoice-body .v63-finance b{font-size:17px!important}
}

/* Mobile/tablet: never render the desktop sidebar in a narrow viewport. */
@media(max-width:900px){
  body.billi-app{overflow-x:hidden!important}
  body.billi-app>nav.b72-global-nav{position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important;height:68px!important;min-height:68px!important;max-height:68px!important;padding:8px 16px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;background:#2457d6!important;border:0!important;border-radius:0!important;z-index:2000!important;overflow:visible!important}
  body.billi-app>nav.b72-global-nav .logo{order:2!important;margin:0!important;padding:0!important;color:#fff!important;font-size:25px!important;line-height:1!important}
  body.billi-app>nav.b72-global-nav .logo span{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:34px!important;min-width:49px!important;margin-left:4px!important;padding:0 8px!important;border:2px solid #fff!important;border-radius:9px!important;background:transparent!important;color:#fff!important;font-size:11px!important}
  body.billi-app>nav.b72-global-nav .menu-toggle{order:1!important;display:grid!important;place-items:center!important;width:48px!important;height:48px!important;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;box-shadow:none!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools{order:3!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:5px!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools button{width:44px!important;height:44px!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-avatar{width:40px!important;height:40px!important;font-size:13px!important;background:#64748b!important}
  body.billi-app>main.container{width:100%!important;margin:68px 0 0!important;padding:24px 16px 38px!important}
  body.billi-app .hero{margin:0 0 20px!important}
  body.billi-app .card{width:100%!important;max-width:none!important}
  body.billi-app .plan-summary{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:18px!important;align-items:stretch!important}
  body.billi-app .plan-summary .plan-copy{min-width:0!important}
  body.billi-app .plan-summary .plan-copy strong{font-size:24px!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.billi-app .plan-summary .plan-copy span{font-size:14px!important;line-height:1.45!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.billi-app .plan-summary>.btn{width:100%!important;min-height:54px!important;margin:0!important}

  /* Invoice mobile header + drawer. */
  body.v63-invoice-body .v63-app-shell{display:block!important;min-height:100vh!important}
  body.v63-invoice-body .v63-sidebar{display:flex!important;position:fixed!important;left:0!important;top:68px!important;bottom:0!important;width:min(320px,88vw)!important;height:calc(100dvh - 68px)!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;z-index:2150!important;padding:18px 14px 24px!important;background:#071a31!important}
  body.v63-invoice-body .v63-app-shell.v63-menu-open .v63-sidebar{transform:translateX(0)!important}
  body.v63-invoice-body .v63-desktop-topbar{display:none!important}
  body.v63-invoice-body .v63-main{width:100%!important;min-width:0!important}
  body.v63-invoice-body .v63-mobile-topbar{display:flex!important;position:fixed!important;left:0!important;right:0!important;top:0!important;width:100%!important;height:68px!important;padding:8px 16px!important;z-index:2200!important}
  body.v63-invoice-body .v63-mobile-menu{width:48px!important;height:48px!important;display:grid!important;place-items:center!important;padding:0!important;cursor:pointer!important;z-index:2300!important}
  body.v63-invoice-body .v63-mobile-brand{font-size:25px!important;gap:7px!important}
  body.v63-invoice-body .v63-mobile-right{margin-left:auto!important;position:relative!important;z-index:2300!important}
  body.v63-invoice-body .v63-content{width:100%!important;max-width:none!important;margin:0!important;padding:88px 16px 32px!important}
  body.v63-invoice-body .v63-page-head{margin-bottom:14px!important}
  body.v63-invoice-body .v63-back{min-height:54px!important;padding:13px 16px!important;border-radius:16px!important;font-size:16px!important}
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:20px!important}
  body.v63-invoice-body .v63-action{min-width:0!important;min-height:72px!important;padding:10px 9px!important;border-radius:16px!important;gap:8px!important;overflow:hidden!important}
  body.v63-invoice-body .v63-action b{font-size:14px!important;line-height:1.15!important;text-align:center!important;overflow-wrap:normal!important;word-break:normal!important}
  body.v63-invoice-body .v63-action small{display:none!important}
  body.v63-invoice-body .v63-action-icon svg{width:27px!important;height:27px!important;flex:0 0 27px!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(1){grid-column:1!important;grid-row:1!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(2){grid-column:2!important;grid-row:1!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(3){grid-column:1/-1!important;grid-row:2!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(4){grid-column:1!important;grid-row:3!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(5){grid-column:2!important;grid-row:3!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(6){grid-column:1!important;grid-row:4!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(7){grid-column:2!important;grid-row:4!important}
  body.v63-invoice-body .v63-delete{grid-column:1/-1!important;grid-row:5!important}
  body.v63-invoice-body .v63-delete .v63-action{min-height:70px!important}
  body.v63-invoice-body .v63-invoice-card{width:100%!important;max-width:none!important;padding:22px 17px 17px!important;border-radius:19px!important}
  body.v63-invoice-body .v63-business h1{font-size:26px!important}
  body.v63-invoice-body .v63-invoice-meta{min-width:0!important}
  body.v63-invoice-body .v63-invoice-meta h2{font-size:21px!important;overflow-wrap:anywhere!important}
  body.v63-invoice-body .v63-party{min-height:0!important;padding:14px!important}
  body.v63-invoice-body .v63-finance{grid-template-columns:1fr 1fr!important}
  body.v63-invoice-body .v63-finance .due{grid-column:1/-1!important}
  body.v63-invoice-body .v63-share-card{width:100%!important}

  /* Single clean account menu on invoice mobile. */
  body.v63-invoice-body .v69-mobile-account-menu{position:absolute!important;right:0!important;top:50px!important;width:min(315px,calc(100vw - 18px))!important;max-height:calc(100dvh - 85px)!important;overflow:auto!important;padding:9px!important;border-radius:18px!important;z-index:2500!important}
  body.v63-invoice-body .v69-mobile-account-menu .v69-account-head{padding:12px!important}
  body.v63-invoice-body .v69-mobile-account-menu a{min-height:50px!important;padding:12px 11px!important;font-size:14px!important}
}

/* Professional WhatsApp mark: green chat bubble + white handset, centered. */
.b71-whatsapp-icon{display:block!important;width:1.55em!important;height:1.55em!important;flex:0 0 1.55em!important;overflow:visible!important}
.b71-whatsapp-icon .wa-disc{fill:#25D366!important}
.b71-whatsapp-icon .wa-bubble{fill:#fff!important}
.b71-whatsapp-icon .wa-phone{fill:none!important;stroke:#25D366!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.b68-wa-inline .b71-whatsapp-icon{width:21px!important;height:21px!important;flex-basis:21px!important}

/* Remove accidental oversized/broken image presentation inside invoice branding. */
.v63-brandline{min-width:0!important;max-width:100%!important}
.v63-brandline img{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;flex:0 0 38px!important}
.v63-brandline>.logo{min-width:0!important;display:inline-flex!important;align-items:center!important;gap:7px!important;white-space:nowrap!important}
.v63-brandline>.logo span{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:28px!important;padding:4px 7px!important;border-radius:7px!important}


/* ================================================================
   BILLI PRO V76 — DESKTOP RENDERING REPAIR
   Root cause fixed: standard authenticated pages were missing the
   billi-app body scope, so the workspace SVG/navigation rules never
   applied. This caused giant black SVGs, collapsed nav, and squeezed
   dashboard content. Keep this layer deliberately small and explicit.
   ================================================================ */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body.billi-app{min-height:100vh}

/* Standard workspace navigation must always size its inline SVG icons. */
body.billi-app > nav.b72-global-nav .b72-nav-icon,
body.billi-app > nav.b72-global-nav .b72-nav-icon svg{box-sizing:border-box}
body.billi-app > nav.b72-global-nav .b72-nav-icon{width:21px!important;height:21px!important;display:grid!important;place-items:center!important;flex:0 0 21px!important;overflow:hidden!important}
body.billi-app > nav.b72-global-nav .b72-nav-icon svg{display:block!important;width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body.billi-app > nav.b72-global-nav .logo{display:inline-flex!important;align-items:center!important;white-space:nowrap!important}
body.billi-app > nav.b72-global-nav .logo span{display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}

/* Dashboard and every standard authenticated page use the same canvas. */
@media(min-width:901px){
  body.billi-app > nav.b72-global-nav{width:232px!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;height:100vh!important;min-height:100vh!important}
  body.billi-app > main.container{margin-left:232px!important;width:calc(100% - 232px)!important;max-width:none!important}
  body.billi-app .b70-topbar{margin-left:232px!important;width:calc(100% - 232px)!important;box-sizing:border-box!important}
  body.billi-app .dashboard-page{width:calc(100% - 232px)!important;max-width:none!important}
  body.billi-app .dashboard-page > .hero,
  body.billi-app .dashboard-page > .dashboard-focus,
  body.billi-app .dashboard-page > .stats,
  body.billi-app .dashboard-page > .dashboard-main-grid{width:min(1280px,100%)!important}
  body.billi-app .dashboard-main-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;align-items:start!important}
  body.billi-app .dashboard-main-grid > .card{min-width:0!important}
}

/* Never allow an unstyled inline SVG to become a 300x150 black object. */
body.billi-app .b70-topbar svg,
body.billi-app .b70-account-menu svg,
body.billi-app .quick-action-grid svg,
body.billi-app .dashboard-page svg{max-width:100%;display:block}
body.billi-app .b70-topbar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.billi-app .quick-action-grid .b67-btn-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Invoice workspace: explicit icon containment prevents black/default SVGs. */
body.v63-invoice-body .v71-nav-icon{width:21px!important;height:21px!important;display:grid!important;place-items:center!important;flex:0 0 21px!important;overflow:hidden!important;color:currentColor!important}
body.v63-invoice-body .v71-nav-icon svg{display:block!important;width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body.v63-invoice-body .v65-search-icon svg,
body.v63-invoice-body .v63-bell svg,
body.v63-invoice-body .v69-menu-icon svg,
body.v63-invoice-body .v63-action-icon svg,
body.v63-invoice-body .v65-bell-btn svg{display:block!important;fill:none!important;stroke:currentColor!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body.v63-invoice-body .v65-search-icon svg{width:18px!important;height:18px!important}
body.v63-invoice-body .v63-bell svg{width:24px!important;height:24px!important}
body.v63-invoice-body .v69-menu-icon svg{width:20px!important;height:20px!important}
body.v63-invoice-body .v63-action-icon svg{width:28px!important;height:28px!important}
body.v63-invoice-body .v65-bell-btn svg{width:24px!important;height:24px!important}

/* Invoice desktop canvas: readable proportions and no artificial squeeze. */
@media(min-width:901px){
  body.v63-invoice-body .v63-sidebar{width:232px!important;flex-basis:232px!important}
  body.v63-invoice-body .v63-content{width:min(1320px,calc(100% - 48px))!important;max-width:1320px!important;margin:0 auto!important;padding:28px 0 50px!important}
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
  body.v63-invoice-body .v63-action{min-width:0!important;min-height:76px!important}
  body.v63-invoice-body .v63-invoice-card{width:100%!important;max-width:none!important}
}

/* Intermediate widths remain a genuine mobile/tablet workspace, never a tiny desktop. */
@media(max-width:900px){
  body.billi-app > nav.b72-global-nav .navlinks a{min-width:0!important}
  body.billi-app > nav.b72-global-nav .navlinks a .b72-nav-icon svg{width:20px!important;height:20px!important}
  body.billi-app > main.container{width:100%!important;max-width:none!important}
}


/* ================================================================
   BILLI PRO V77 — HARD RESPONSIVE WORKSPACE BASELINE
   This layer intentionally uses direct component selectors instead
   of depending on page-specific scope for critical geometry.
   ================================================================ */

/* Standard application navigation: one authoritative desktop/mobile system. */
.b72-global-nav{box-sizing:border-box!important;z-index:2200!important;}
.b72-global-nav .b72-nav-icon{width:22px!important;height:22px!important;display:inline-grid!important;place-items:center!important;flex:0 0 22px!important;overflow:hidden!important;}
.b72-global-nav .b72-nav-icon svg{display:block!important;width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.b72-global-nav .logo{display:inline-flex!important;align-items:center!important;gap:9px!important;white-space:nowrap!important;flex:0 0 auto!important;}
.b72-global-nav .logo span{display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;line-height:1!important;}
.b72-global-nav .navlinks a{box-sizing:border-box!important;min-width:0!important;text-decoration:none!important;}
.b72-global-nav .navlinks a>span:last-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}

/* Desktop: sidebar + clean top utility bar + spacious workspace. */
@media(min-width:761px){
  body.billi-app>nav.b72-global-nav{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:232px!important;height:100vh!important;min-height:100vh!important;
    padding:22px 14px 18px!important;background:#071a31!important;color:#fff!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;border:0!important;border-radius:0!important;
    box-shadow:10px 0 30px rgba(7,26,49,.12)!important;
  }
  body.billi-app>nav.b72-global-nav .logo{font-size:27px!important;color:#fff!important;padding:0 10px 25px!important;}
  body.billi-app>nav.b72-global-nav .logo span{font-size:11px!important;height:30px!important;min-width:48px!important;padding:0 8px!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:7px!important;background:transparent!important;color:#fff!important;}
  body.billi-app>nav.b72-global-nav .menu-toggle{display:none!important;}
  body.billi-app>nav.b72-global-nav .navlinks{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:5px!important;width:100%!important;flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;}
  body.billi-app>nav.b72-global-nav .navlinks a{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:48px!important;padding:12px 13px!important;border-radius:11px!important;color:#d5dfec!important;font-size:14px!important;font-weight:750!important;}
  body.billi-app>nav.b72-global-nav .navlinks a:hover{background:rgba(36,87,214,.24)!important;color:#fff!important;}
  body.billi-app>nav.b72-global-nav .navlinks a.active{background:#1764ea!important;color:#fff!important;box-shadow:0 7px 18px rgba(23,100,234,.22)!important;}
  body.billi-app>main.container{margin:0 0 0 232px!important;width:calc(100% - 232px)!important;max-width:none!important;padding:30px 34px 50px!important;}
  body.billi-app .b70-topbar{margin-left:232px!important;width:calc(100% - 232px)!important;height:68px!important;padding:0 30px!important;position:sticky!important;top:0!important;z-index:1800!important;}
  body.billi-app .b70-topbar-search{width:min(560px,52vw)!important;height:42px!important;}
  body.billi-app .hero,body.billi-app .dashboard-focus,body.billi-app .stats,body.billi-app .dashboard-main-grid{width:min(1280px,100%)!important;margin-left:auto!important;margin-right:auto!important;}
  body.billi-app .hero{margin-top:0!important;}
  body.billi-app .dashboard-main-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr)!important;align-items:start!important;}
  body.billi-app .dashboard-main-grid>.card{min-width:0!important;}
  body.billi-app .card{max-width:none!important;}
  body.billi-app .b70-account-button,.b70-avatar-button{position:relative!important;}
  body.billi-app .b70-account-menu{width:330px!important;max-width:calc(100vw - 28px)!important;}
}

/* Desktop sub-breakpoints: avoid cramped 900–1199px layouts. */
@media(min-width:761px) and (max-width:1199px){
  body.billi-app>nav.b72-global-nav{width:216px!important;}
  body.billi-app>main.container{margin-left:216px!important;width:calc(100% - 216px)!important;padding-left:24px!important;padding-right:24px!important;}
  body.billi-app .b70-topbar{margin-left:216px!important;width:calc(100% - 216px)!important;padding-left:24px!important;padding-right:24px!important;}
  body.billi-app .dashboard-main-grid{grid-template-columns:1fr!important;}
  body.billi-app .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.billi-app>nav.b72-global-nav .navlinks a{font-size:13px!important;padding-left:11px!important;padding-right:11px!important;}
}

/* Standard mobile: never show desktop sidebar. */
@media(max-width:760px){
  body.billi-app>nav.b72-global-nav{
    position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;
    width:100%!important;height:68px!important;min-height:68px!important;max-height:68px!important;
    padding:8px 16px!important;background:#2457d6!important;color:#fff!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;
    border:0!important;border-radius:0!important;overflow:visible!important;box-shadow:0 6px 22px rgba(36,87,214,.18)!important;
  }
  body.billi-app>nav.b72-global-nav .menu-toggle{display:grid!important;place-items:center!important;order:1!important;width:48px!important;height:48px!important;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;box-shadow:none!important;}
  body.billi-app>nav.b72-global-nav .logo{order:2!important;font-size:25px!important;color:#fff!important;margin:0!important;padding:0!important;}
  body.billi-app>nav.b72-global-nav .logo span{height:34px!important;min-width:49px!important;padding:0 9px!important;border:2px solid #fff!important;border-radius:9px!important;background:transparent!important;color:#fff!important;font-size:11px!important;}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools{order:3!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:4px!important;position:relative!important;flex:0 0 auto!important;}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools button{width:44px!important;height:44px!important;border:0!important;background:transparent!important;color:#fff!important;border-radius:11px!important;display:grid!important;place-items:center!important;padding:0!important;}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-avatar{width:40px!important;height:40px!important;background:#64748b!important;font-size:13px!important;}
  body.billi-app>nav.b72-global-nav .navlinks{position:fixed!important;left:0!important;right:auto!important;top:68px!important;width:min(310px,88vw)!important;height:calc(100dvh - 68px)!important;max-height:none!important;margin:0!important;padding:14px!important;background:#fff!important;color:#172033!important;border:1px solid #dbe3ee!important;border-left:0!important;border-radius:0 18px 18px 0!important;box-shadow:18px 0 45px rgba(23,32,51,.20)!important;display:flex!important;flex-direction:column!important;gap:5px!important;transform:translateX(-105%)!important;visibility:hidden!important;opacity:0!important;transition:transform .22s ease,opacity .18s ease,visibility .22s ease!important;z-index:2300!important;overflow-y:auto!important;}
  body.billi-app>nav.b72-global-nav .navlinks.open{transform:translateX(0)!important;visibility:visible!important;opacity:1!important;}
  body.billi-app>nav.b72-global-nav .navlinks a{display:flex!important;align-items:center!important;gap:12px!important;min-height:50px!important;padding:12px 14px!important;border-radius:11px!important;color:#172033!important;font-size:14px!important;font-weight:750!important;}
  body.billi-app>nav.b72-global-nav .navlinks a.active,body.billi-app>nav.b72-global-nav .navlinks a:hover{background:#eef3ff!important;color:#2457d6!important;}
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop{position:fixed!important;inset:68px 0 0!important;background:rgba(7,18,35,.38)!important;z-index:2250!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
  body.billi-app>.container{margin:68px 0 0!important;width:100%!important;max-width:none!important;padding:24px 16px 40px!important;}
  body.billi-app .b70-topbar{display:none!important;}
  body.billi-app .hero{margin:0 0 20px!important;}
  body.billi-app .stats{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  body.billi-app .dashboard-main-grid{grid-template-columns:1fr!important;}
  body.billi-app .card{width:100%!important;max-width:none!important;}
  body.billi-app .b70-account-menu{position:absolute!important;right:-4px!important;top:49px!important;width:min(315px,calc(100vw - 20px))!important;max-height:calc(100dvh - 85px)!important;overflow:auto!important;}
}

/* Hard stop for unstyled SVGs in standard workspace, regardless of cascade order. */
.b72-global-nav svg,.b70-topbar svg,.b70-account-menu svg,.quick-action-grid svg{display:block!important;max-width:24px!important;max-height:24px!important;}
.b70-topbar-search svg,.b70-topbar-icon svg,.b70-account-menu svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.quick-action-grid .b67-btn-icon{width:22px!important;height:22px!important;display:grid!important;place-items:center!important;flex:0 0 22px!important;overflow:hidden!important;}
.quick-action-grid .b67-btn-icon svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;}

/* Invoice shell: use readable desktop proportions at every desktop width. */
@media(min-width:761px){
  body.v63-invoice-body .v63-sidebar{width:232px!important;flex:0 0 232px!important;}
  body.v63-invoice-body .v63-content{width:calc(100% - 48px)!important;max-width:1320px!important;margin:0 auto!important;padding:28px 0 50px!important;}
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
  body.v63-invoice-body .v63-action{min-width:0!important;min-height:78px!important;padding:12px 15px!important;}
  body.v63-invoice-body .v63-action b{font-size:15px!important;line-height:1.2!important;}
  body.v63-invoice-body .v63-action small{font-size:11px!important;line-height:1.35!important;}
  body.v63-invoice-body .v63-invoice-card{width:100%!important;max-width:none!important;}
}
@media(min-width:1200px){
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
}
@media(min-width:761px) and (max-width:1100px){
  body.v63-invoice-body .v63-sidebar{width:216px!important;flex-basis:216px!important;}
  body.v63-invoice-body .v63-content{width:calc(100% - 32px)!important;}
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.v63-invoice-body .v63-action:nth-child(3),body.v63-invoice-body .v63-delete{grid-column:1/-1!important;}
}

/* One consistent business initials treatment. */
.b70-avatar,.v63-avatar,.v69-avatar-large,.v69-avatar,.v63-mobile-avatar-btn{font-variant-numeric:tabular-nums!important;letter-spacing:0!important;text-transform:uppercase!important;}

/* ================================================================
   BILLI PRO V78 — FINAL RESPONSIVE / NAVIGATION REPAIR
   Root cause: V77 inherited an unclosed max-width:420px media block.
   That trapped the later desktop/mobile CSS inside the wrong media
   query. V78 closes that block and adds one final, explicit geometry
   layer for the affected invoice and workspace components.
   ================================================================ */

/* No duplicate promotional pseudo-content in the primary navigation. */
body.billi-app > nav.b72-global-nav::after{display:none!important;content:none!important}

/* One predictable logo treatment. */
body.billi-app > nav.b72-global-nav .logo,
body.billi-app > nav.b72-global-nav .logo span,
body.v63-invoice-body .v63-mobile-brand,
body.v63-invoice-body .v63-mobile-brand span,
body.v63-invoice-body .v63-brand{
  box-sizing:border-box!important;
}

/* Standard workspace desktop: sidebar and content can never overlap. */
@media(min-width:761px){
  body.billi-app > nav.b72-global-nav{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:232px!important;
    height:100vh!important;
    overflow:hidden!important;
  }
  body.billi-app > nav.b72-global-nav .navlinks{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.billi-app > main.container{
    margin-left:232px!important;
    width:calc(100% - 232px)!important;
    min-width:0!important;
  }
  body.billi-app .b70-topbar{
    margin-left:232px!important;
    width:calc(100% - 232px)!important;
    min-width:0!important;
  }
}
@media(min-width:761px) and (max-width:1199px){
  body.billi-app > nav.b72-global-nav{width:216px!important}
  body.billi-app > main.container{margin-left:216px!important;width:calc(100% - 216px)!important}
  body.billi-app .b70-topbar{margin-left:216px!important;width:calc(100% - 216px)!important}
}

/* Invoice desktop: stable sidebar, topbar and expandable content. */
@media(min-width:761px){
  body.v63-invoice-body .v63-app-shell{display:flex!important;min-height:100vh!important;width:100%!important;overflow:visible!important}
  body.v63-invoice-body .v63-sidebar{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    width:232px!important;
    flex:0 0 232px!important;
    min-height:100vh!important;
    height:100vh!important;
    transform:none!important;
    overflow-y:auto!important;
  }
  body.v63-invoice-body .v63-main{min-width:0!important;flex:1 1 auto!important;width:auto!important}
  body.v63-invoice-body .v63-topbar{width:100%!important;min-width:0!important}
  body.v63-invoice-body .v63-content{box-sizing:border-box!important;min-width:0!important;width:min(1320px,calc(100% - 48px))!important;max-width:1320px!important}
  body.v63-invoice-body .v63-sidebar .v63-side-nav a{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.v63-invoice-body .v63-sidebar .v63-side-nav a span:last-child{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.v63-invoice-body .v63-menu-btn{
    width:42px!important;height:42px!important;
    display:grid!important;place-items:center!important;
    flex:0 0 42px!important;
    border:1px solid #dbe3ee!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#172033!important;
    font-size:22px!important;
    line-height:1!important;
  }
  body.v63-invoice-body .v63-menu-btn:hover{background:#f5f8fd!important;border-color:#c9d5e5!important}
  /* Desktop hamburger actually collapses the sidebar instead of hiding the page. */
  body.v63-invoice-body .v63-app-shell.v63-sidebar-collapsed .v63-sidebar{width:0!important;flex-basis:0!important;padding-left:0!important;padding-right:0!important;border:0!important;overflow:hidden!important}
  body.v63-invoice-body .v63-app-shell.v63-sidebar-collapsed .v63-main{width:100%!important;flex:1 1 100%!important}
}

/* Mobile invoice header: only one BILLI PRO mark. The invoice itself starts with business name. */
@media(max-width:760px){
  body.v63-invoice-body .v63-brandline{display:none!important}
  body.v63-invoice-body .v63-business h1{margin-top:0!important}
  body.v63-invoice-body .v63-actions{width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  body.v63-invoice-body .v63-action,
  body.v63-invoice-body .v63-delete,
  body.v63-invoice-body .v63-delete .v63-action{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.v63-invoice-body .v63-action{gap:8px!important;overflow:hidden!important}
  body.v63-invoice-body .v63-action-icon{width:28px!important;min-width:28px!important;height:28px!important;display:grid!important;place-items:center!important;flex:0 0 28px!important;font-size:20px!important}
  body.v63-invoice-body .v63-action-icon svg{width:25px!important;height:25px!important;max-width:25px!important;max-height:25px!important}
  body.v63-invoice-body .v63-action > span:last-child{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  body.v63-invoice-body .v63-action b{display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;line-height:1.18!important}
  body.v63-invoice-body .v63-action small{display:none!important}
  body.v63-invoice-body .v63-share-card{width:100%!important;min-width:0!important;overflow:hidden!important}
  body.v63-invoice-body .v63-share-card>div:last-child{min-width:0!important;width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important}
  body.v63-invoice-body .v63-share-card .btn{min-width:0!important;max-width:100%!important;overflow:hidden!important;white-space:normal!important}
  body.v63-invoice-body .b68-wa-inline{min-width:0!important;gap:6px!important;justify-content:center!important}
  body.v63-invoice-body .b68-wa-inline .b71-whatsapp-icon{width:21px!important;height:21px!important;min-width:21px!important;flex:0 0 21px!important}
  body.v63-invoice-body .b63-mobile-brand{min-width:0!important}
}

/* Keep the WhatsApp mark visually contained and never stretched by flex layouts. */
.b71-whatsapp-icon{box-sizing:border-box!important;display:block!important;max-width:21px!important;max-height:21px!important;overflow:visible!important}
.b71-whatsapp-icon .wa-disc{fill:#25D366!important;stroke:none!important}
.b71-whatsapp-icon .wa-bubble{fill:#fff!important;stroke:none!important}
.b71-whatsapp-icon .wa-phone{fill:none!important;stroke:#25D366!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* Invoice mobile drawer: active item stays a compact blue row, never a white full-page block. */
@media(max-width:760px){
  body.v63-invoice-body .v63-sidebar .v63-side-nav{display:grid!important;width:100%!important;gap:4px!important}
  body.v63-invoice-body .v63-sidebar .v63-side-nav a{display:flex!important;align-items:center!important;width:100%!important;min-height:50px!important;padding:12px 12px!important;border-radius:11px!important;background:transparent!important;color:#dce6f4!important}
  body.v63-invoice-body .v63-sidebar .v63-side-nav a.active{background:#1760e8!important;color:#fff!important;box-shadow:0 8px 20px rgba(23,96,232,.25)!important}
  body.v63-invoice-body .v63-sidebar .v63-side-nav a .v71-nav-icon{width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important}
  body.v63-invoice-body .v63-sidebar .v63-side-nav a .v71-nav-icon svg{width:20px!important;height:20px!important}
}

/* Same initials everywhere; never alter the supplied two-letter value. */
.b70-avatar,.v63-avatar,.v69-avatar-large,.v69-avatar,.v63-mobile-avatar-btn .v63-avatar{
  text-transform:uppercase!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:0!important;
}

/* ================================================================
   BILLI PRO V79 — INVOICE VISIBILITY + WHATSAPP FIT REPAIR
   Root cause: the global `nav{...}` rule was also styling the
   invoice's <nav class="v63-side-nav"> element. That made the
   sidebar navigation itself white and introduced the large blank/
   hidden-looking desktop area seen in the screenshots.
   ================================================================ */

/* The invoice sidebar's inner navigation is NOT a global site nav.
   Neutralize every global nav property explicitly. */
body.v63-invoice-body .v63-sidebar > .v63-side-nav,
body.v63-invoice-body nav.v63-side-nav {
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  display:grid!important;
  align-items:stretch!important;
  justify-content:normal!important;
  gap:4px!important;
  flex:1 1 auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

body.v63-invoice-body .v63-sidebar > .v63-side-nav a {
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  padding:12px 12px!important;
  min-height:48px!important;
  background:transparent!important;
  border:0!important;
  border-radius:11px!important;
  color:#dce6f4!important;
  box-shadow:none!important;
}
body.v63-invoice-body .v63-sidebar > .v63-side-nav a.active {
  background:#1760e8!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(23,96,232,.25)!important;
}
body.v63-invoice-body .v63-sidebar > .v63-side-nav a .v71-nav-icon {
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  flex:0 0 22px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
body.v63-invoice-body .v63-sidebar > .v63-side-nav a .v71-nav-icon svg {
  width:20px!important;
  height:20px!important;
  max-width:20px!important;
  max-height:20px!important;
  display:block!important;
}

/* Action labels must shrink as a flex item and wrap inside the card,
   never clip after "WhatsA...". */
body.v63-invoice-body .v63-actions .v63-action > span:last-child {
  flex:1 1 0!important;
  width:0!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-align:left!important;
}
body.v63-invoice-body .v63-actions .v63-action > span:last-child b {
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
body.v63-invoice-body .v63-actions .v63-action > span:last-child small {
  max-width:none!important;
  overflow:visible!important;
}

/* WhatsApp action: intentionally allow the label to occupy two clean
   lines on narrow phones, while staying single-line on roomy screens. */
body.v63-invoice-body .v63-actions .v63-share > .v63-action-icon {
  flex:0 0 28px!important;
  width:28px!important;
  min-width:28px!important;
}
body.v63-invoice-body .v63-actions .v63-share > .v63-action-icon svg {
  width:27px!important;
  height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
}
@media(max-width:430px){
  body.v63-invoice-body .v63-actions .v63-share > span:last-child b {
    font-size:13px!important;
    line-height:1.14!important;
    text-align:left!important;
  }
  body.v63-invoice-body .v63-actions .v63-share {
    gap:8px!important;
  }
}

/* The compact share card at the bottom gets the same containment rule. */
body.v63-invoice-body .b68-wa-inline {
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:normal!important;
  overflow:visible!important;
}
body.v63-invoice-body .b68-wa-inline .b71-whatsapp-icon {
  flex:0 0 21px!important;
  width:21px!important;
  height:21px!important;
}

/* Desktop invoice content should remain a readable workspace rather than
   a narrow card surrounded by excessive empty canvas. */
@media(min-width:901px){
  body.v63-invoice-body .v63-content {
    width:min(1320px,calc(100% - 56px))!important;
    max-width:1320px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.v63-invoice-body .v63-invoice-card {
    width:100%!important;
  }
}

/* Tablet/intermediate widths: keep the invoice usable and prevent a
   desktop sidebar from squeezing the actual invoice content. */
@media(min-width:761px) and (max-width:900px){
  body.v63-invoice-body .v63-sidebar {
    width:216px!important;
    flex-basis:216px!important;
  }
  body.v63-invoice-body .v63-content {
    width:calc(100% - 28px)!important;
    padding:18px 0 36px!important;
  }
  body.v63-invoice-body .v63-actions {
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
}

/* Final mobile containment: nothing in the action grid may clip its label. */
@media(max-width:760px){
  body.v63-invoice-body .v63-actions .v63-action > span:last-child {
    flex:1 1 0!important;
    width:0!important;
  }
  body.v63-invoice-body .v63-actions .v63-action > span:last-child b {
    text-align:left!important;
  }
  body.v63-invoice-body .v63-actions .v63-action:not(.v63-share) > span:last-child b {
    text-align:left!important;
  }
  body.v63-invoice-body .v63-actions .v63-share > span:last-child b {
    text-align:left!important;
  }
}


/* ================================================================
   BILLI PRO V80 — REAL RESPONSIVE BREAKPOINT + INVOICE GRID REPAIR
   Treat widths up to 1000px as the compact/tablet/mobile workspace.
   This is intentional: mobile browsers using "Desktop site" can expose
   a ~980px CSS viewport even on a phone. The previous 760px breakpoint
   therefore incorrectly activated the desktop sidebar/grid on phones.
   ================================================================ */

/* Standard authenticated pages: compact app bar + drawer through 1000px. */
@media (max-width:1000px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body.billi-app{min-width:0!important;overflow-x:hidden!important;padding:0!important}

  body.billi-app>nav.b72-global-nav{
    position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;
    width:100%!important;height:68px!important;min-height:68px!important;max-height:68px!important;
    padding:8px 16px!important;display:flex!important;align-items:center!important;gap:10px!important;
    overflow:visible!important;background:#2457d6!important;color:#fff!important;border:0!important;
    border-radius:0!important;box-shadow:0 6px 22px rgba(36,87,214,.18)!important;z-index:2000!important;
  }
  body.billi-app>nav.b72-global-nav .logo{order:2!important;display:inline-flex!important;align-items:center!important;gap:7px!important;width:auto!important;margin:0!important;padding:0!important;font-size:25px!important;line-height:1!important;color:#fff!important}
  body.billi-app>nav.b72-global-nav .logo span{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:34px!important;min-width:49px!important;padding:0 9px!important;border:2px solid #fff!important;border-radius:9px!important;background:transparent!important;color:#fff!important;font-size:11px!important;line-height:1!important}
  body.billi-app>nav.b72-global-nav .menu-toggle{order:1!important;display:grid!important;place-items:center!important;width:48px!important;height:48px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;box-shadow:none!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools{order:3!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:5px!important;position:relative!important;flex:0 0 auto!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools button{width:44px!important;height:44px!important;border:0!important;background:transparent!important;color:#fff!important;border-radius:11px!important;display:grid!important;place-items:center!important;padding:0!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools svg{display:block!important;width:23px!important;height:23px!important;max-width:23px!important;max-height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-avatar{width:40px!important;height:40px!important;font-size:13px!important;background:#64748b!important}
  body.billi-app>nav.b72-global-nav .navlinks{position:fixed!important;left:0!important;right:auto!important;top:68px!important;width:min(310px,88vw)!important;height:calc(100dvh - 68px)!important;max-height:none!important;margin:0!important;padding:14px!important;background:#fff!important;border:1px solid #dbe3ee!important;border-left:0!important;border-radius:0 18px 18px 0!important;box-shadow:18px 0 45px rgba(23,32,51,.20)!important;transform:translateX(-105%)!important;visibility:hidden!important;opacity:0!important;transition:transform .22s ease,opacity .18s ease,visibility .22s ease!important;z-index:2100!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important}
  body.billi-app>nav.b72-global-nav .navlinks.open{transform:translateX(0)!important;visibility:visible!important;opacity:1!important}
  body.billi-app>nav.b72-global-nav .navlinks a{display:flex!important;align-items:center!important;width:100%!important;min-height:50px!important;padding:12px 14px!important;border-radius:11px!important;color:#172033!important;font-size:14px!important;gap:12px!important}
  body.billi-app>nav.b72-global-nav .navlinks a:hover,body.billi-app>nav.b72-global-nav .navlinks a.active{background:#eef3ff!important;color:#2457d6!important}
  body.billi-app>nav.b72-global-nav .navlinks a .b72-nav-icon{width:22px!important;height:22px!important;min-width:22px!important;display:grid!important;place-items:center!important;flex:0 0 22px!important}
  body.billi-app>nav.b72-global-nav .navlinks a .b72-nav-icon svg{display:block!important;width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important}
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop{position:fixed!important;inset:68px 0 0!important;background:rgba(7,18,35,.38)!important;z-index:2050!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  body.billi-app.menu-open{overflow:hidden!important}
  body.billi-app>.container{margin:68px 0 0!important;width:100%!important;max-width:none!important;padding:24px 16px 40px!important}
  body.billi-app .b70-topbar{display:none!important}
  body.billi-app .hero{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:16px!important;margin:0 auto 20px!important;max-width:100%!important}
  body.billi-app .hero>div{min-width:0!important;flex:1 1 300px!important}
  body.billi-app .hero>.btn{flex:0 0 auto!important}
  body.billi-app .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  body.billi-app .grid2{grid-template-columns:1fr!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  body.billi-app .card,body.billi-app .hero,body.billi-app .stats,body.billi-app .grid2{min-width:0!important}
  body.billi-app .dashboard-page svg{display:block!important;max-width:24px!important;max-height:24px!important}
  body.billi-app .quick-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Invoice page: same 1000px responsive breakpoint. */
@media (max-width:1000px){
  body.v63-invoice-body{min-width:0!important;overflow-x:hidden!important}
  body.v63-invoice-body .v63-app-shell{display:block!important;min-height:100vh!important;width:100%!important;overflow-x:hidden!important}
  body.v63-invoice-body .v63-sidebar{
    position:fixed!important;left:0!important;top:68px!important;bottom:0!important;
    width:min(320px,88vw)!important;height:calc(100dvh - 68px)!important;min-height:0!important;
    flex:none!important;display:flex!important;transform:translateX(-105%)!important;
    transition:transform .22s ease!important;z-index:2150!important;padding:18px 14px 24px!important;
    background:#071a31!important;color:#fff!important;overflow-y:auto!important;overflow-x:hidden!important;
  }
  body.v63-invoice-body .v63-app-shell.v63-menu-open .v63-sidebar{transform:translateX(0)!important}
  body.v63-invoice-body .v63-desktop-topbar{display:none!important}
  body.v63-invoice-body .v63-mobile-topbar{display:flex!important;position:fixed!important;left:0!important;right:0!important;top:0!important;width:100%!important;height:68px!important;padding:8px 16px!important;z-index:2200!important;background:#2457d6!important;color:#fff!important}
  body.v63-invoice-body .v63-main{width:100%!important;min-width:0!important;display:block!important}
  body.v63-invoice-body .v63-content{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:88px 16px 32px!important;box-sizing:border-box!important}
  body.v63-invoice-body .v63-page-head{margin-bottom:14px!important}
  body.v63-invoice-body .v63-page-head>div{display:none!important}
  body.v63-invoice-body .v63-back{min-height:54px!important;padding:13px 16px!important;border-radius:16px!important;font-size:16px!important}

  /* Canonical action order: Edit / Payments, Returns, WhatsApp / Link,
     PDF / Print, Delete. No stretched six-column desktop grid. */
  body.v63-invoice-body .v63-actions{display:grid!important;width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-auto-rows:minmax(0,auto)!important;gap:10px!important;margin-bottom:20px!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(1){grid-column:1!important;grid-row:1!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(2){grid-column:2!important;grid-row:1!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(3){grid-column:1/-1!important;grid-row:2!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(4){grid-column:1!important;grid-row:3!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(5){grid-column:2!important;grid-row:3!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(6){grid-column:1!important;grid-row:4!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(7){grid-column:2!important;grid-row:4!important}
  body.v63-invoice-body .v63-delete{grid-column:1/-1!important;grid-row:5!important;width:100%!important;min-width:0!important;display:flex!important}
  body.v63-invoice-body .v63-action{min-width:0!important;width:100%!important;max-width:100%!important;min-height:72px!important;box-sizing:border-box!important;padding:10px 12px!important;border-radius:16px!important;gap:8px!important;overflow:hidden!important}
  body.v63-invoice-body .v63-action-icon{width:27px!important;min-width:27px!important;height:27px!important;flex:0 0 27px!important;display:grid!important;place-items:center!important}
  body.v63-invoice-body .v63-action-icon svg{display:block!important;width:25px!important;height:25px!important;max-width:25px!important;max-height:25px!important}
  body.v63-invoice-body .v63-action>span:last-child{flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;overflow:visible!important;text-align:left!important}
  body.v63-invoice-body .v63-action>span:last-child b{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;font-size:14px!important;line-height:1.18!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;hyphens:none!important}
  body.v63-invoice-body .v63-action>span:last-child small{display:none!important}
  body.v63-invoice-body .v63-share{min-width:0!important}
  body.v63-invoice-body .v63-share>span:last-child b{white-space:normal!important;overflow-wrap:break-word!important}
  body.v63-invoice-body .v63-delete .v63-action{min-height:70px!important}

  body.v63-invoice-body .v63-invoice-card{width:100%!important;max-width:none!important;min-width:0!important;padding:22px 17px 17px!important;border-radius:19px!important;box-sizing:border-box!important;overflow:hidden!important}
  body.v63-invoice-body .v63-invoice-top{display:block!important}
  body.v63-invoice-body .v63-brandline{display:none!important}
  body.v63-invoice-body .v63-business h1{font-size:26px!important;margin-top:0!important}
  body.v63-invoice-body .v63-invoice-meta{text-align:left!important;min-width:0!important;margin-top:15px!important;padding-top:13px!important;border-top:1px solid #edf0f4!important}
  body.v63-invoice-body .v63-invoice-meta h2{font-size:21px!important;overflow-wrap:anywhere!important}
  body.v63-invoice-body .v63-parties{grid-template-columns:1fr!important;gap:8px!important;margin-top:16px!important}
  body.v63-invoice-body .v63-party{min-height:0!important;padding:14px!important}
  body.v63-invoice-body .v63-items table{display:block!important;width:100%!important;min-width:0!important}
  body.v63-invoice-body .v63-items thead{display:none!important}
  body.v63-invoice-body .v63-items tbody,body.v63-invoice-body .v63-items tr,body.v63-invoice-body .v63-items td{display:block!important;width:100%!important}
  body.v63-invoice-body .v63-items td{display:flex!important;justify-content:space-between!important;gap:12px!important;padding:3px 0!important;text-align:right!important;font-size:12px!important}
  body.v63-invoice-body .v63-items td::before{content:attr(data-label)!important;text-align:left!important;font-size:9px!important;font-weight:950!important;letter-spacing:.5px!important;color:#7b8799!important}
  body.v63-invoice-body .v63-totals{max-width:none!important;margin-top:10px!important}
  body.v63-invoice-body .v63-finance{grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.v63-invoice-body .v63-finance .due{grid-column:1/-1!important}
  body.v63-invoice-body .v63-notes{grid-template-columns:1fr!important}
  body.v63-invoice-body .v63-share-card{display:block!important;width:100%!important;min-width:0!important;overflow:hidden!important}
  body.v63-invoice-body .v63-share-card>div:last-child{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important;width:100%!important;min-width:0!important}
  body.v63-invoice-body .v63-share-card .btn{width:100%!important;min-width:0!important;max-width:100%!important;min-height:40px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.v63-invoice-body .b68-wa-inline{min-width:0!important;max-width:100%!important;gap:5px!important;justify-content:center!important;white-space:normal!important}
  body.v63-invoice-body .b68-wa-inline .b71-whatsapp-icon{width:20px!important;height:20px!important;min-width:20px!important;flex:0 0 20px!important}

  /* Drawer internals always remain dark; only its active row is blue. */
  body.v63-invoice-body .v63-sidebar > .v63-side-nav{display:grid!important;width:100%!important;gap:4px!important;background:transparent!important}
  body.v63-invoice-body .v63-sidebar > .v63-side-nav a{display:flex!important;align-items:center!important;width:100%!important;min-height:50px!important;padding:12px!important;background:transparent!important;color:#dce6f4!important;border:0!important;border-radius:11px!important;box-shadow:none!important}
  body.v63-invoice-body .v63-sidebar > .v63-side-nav a.active{background:#1760e8!important;color:#fff!important}
  body.v63-invoice-body .v63-sidebar > .v63-side-nav a .v71-nav-icon{width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;display:grid!important;place-items:center!important}
  body.v63-invoice-body .v63-sidebar > .v63-side-nav a .v71-nav-icon svg{display:block!important;width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important}
}

/* At real desktop widths, keep the invoice action grid spacious and predictable. */
@media (min-width:1001px){
  body.v63-invoice-body .v63-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(1){grid-column:1!important;grid-row:1!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(2){grid-column:2!important;grid-row:1!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(3){grid-column:3!important;grid-row:1!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(4){grid-column:1!important;grid-row:2!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(5){grid-column:2!important;grid-row:2!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(6){grid-column:1!important;grid-row:3!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(7){grid-column:2!important;grid-row:3!important}
  body.v63-invoice-body .v63-delete{grid-column:3!important;grid-row:3!important}
}

/* ================================================================
   BILLI PRO V81 — GLOBAL DESKTOP / MOBILE EXPERIENCE
   One responsive system for public site, customer workspace and admin.
   ================================================================ */

html, body { max-width:100%; }
body { overflow-x:hidden; }
img, svg, video, canvas { max-width:100%; }

/* Auth pages: clean, centered and comfortable on every screen. */
body.auth-page {
  min-height:100vh!important;
  min-height:100dvh!important;
  display:grid!important;
  place-items:center!important;
  padding:32px 20px!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(36,87,214,.09), transparent 34%),
    var(--bg)!important;
}
body.auth-page .auth {
  width:min(500px,100%)!important;
  max-width:500px!important;
  margin:0!important;
  padding:34px!important;
  border-radius:20px!important;
  box-shadow:0 20px 60px rgba(23,32,51,.10)!important;
}
body.auth-page .auth .logo { margin-bottom:12px!important; }
body.auth-page .auth h1 { margin:8px 0 8px!important; font-size:30px!important; line-height:1.15!important; }
body.auth-page .auth form { margin-top:20px!important; }
body.auth-page .auth label { margin:15px 0!important; }
body.auth-page .auth input { min-height:48px!important; }
body.auth-page .auth .full { margin-top:10px!important; min-height:48px!important; }

/* Public landing page: preserve a real document flow so the page scrolls
   naturally and the mobile drawer never becomes part of the content width. */
body:not(.v63-invoice-body) .landing,
body:not(.v63-invoice-body) .marketing-section,
body:not(.v63-invoice-body) .cta-section,
body:not(.v63-invoice-body) .site-footer { position:relative; }
body .container { max-width:1180px; }

/* Standard customer workspace — desktop. */
@media (min-width:1001px) {
  body.billi-app>nav.b72-global-nav {
    width:232px!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks {
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin!important;
  }
  body.billi-app>main.container {
    margin-left:232px!important;
    width:calc(100% - 232px)!important;
    max-width:none!important;
    padding:34px clamp(24px,3vw,48px) 56px!important;
  }
  body.billi-app .b70-topbar {
    margin-left:232px!important;
    width:calc(100% - 232px)!important;
    position:sticky!important;
    top:0!important;
  }
  body.billi-app .hero,
  body.billi-app .dashboard-focus,
  body.billi-app .stats,
  body.billi-app .dashboard-main-grid {
    max-width:1320px!important;
  }
  body.billi-app .dashboard-main-grid {
    grid-template-columns:minmax(0,1.2fr) minmax(360px,.9fr)!important;
  }
}

/* Intermediate desktop/tablet: keep the workspace usable instead of
   squeezing a desktop sidebar and invoice into a phone-sized canvas. */
@media (min-width:761px) and (max-width:1000px) {
  body.billi-app>nav.b72-global-nav { width:100%!important; }
}

/* Mobile and tablet app header. This intentionally covers 1000px because
   some Android browsers expose a desktop-style CSS viewport around 980px. */
@media (max-width:1000px) {
  body.billi-app>nav.b72-global-nav {
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    padding:8px 16px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    background:#2457d6!important;
    color:#fff!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
    z-index:3000!important;
  }
  body.billi-app>nav.b72-global-nav .menu-toggle {
    display:grid!important;
    flex:0 0 48px!important;
    width:48px!important;
    height:48px!important;
    background:transparent!important;
    border:0!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  body.billi-app>nav.b72-global-nav .logo {
    font-size:25px!important;
    color:#fff!important;
    padding:0!important;
    margin:0!important;
  }
  body.billi-app>nav.b72-global-nav .logo span {
    background:transparent!important;
    color:#fff!important;
    border:2px solid #fff!important;
    height:34px!important;
    min-width:49px!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks {
    position:fixed!important;
    left:0!important;
    top:68px!important;
    right:auto!important;
    width:min(320px,88vw)!important;
    height:calc(100dvh - 68px)!important;
    margin:0!important;
    padding:16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:5px!important;
    background:#071a31!important;
    border:0!important;
    border-radius:0 18px 18px 0!important;
    box-shadow:18px 0 48px rgba(0,0,0,.28)!important;
    transform:translateX(-110%)!important;
    opacity:0!important;
    visibility:hidden!important;
    transition:transform .22s ease,opacity .18s ease,visibility .22s ease!important;
    z-index:3200!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks.open {
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks a {
    width:100%!important;
    min-height:50px!important;
    flex:0 0 auto!important;
    padding:12px 14px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    color:#dce6f4!important;
    background:transparent!important;
    border-radius:11px!important;
    font-size:14px!important;
    white-space:normal!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks a:hover,
  body.billi-app>nav.b72-global-nav .navlinks a.active {
    background:#1764ea!important;
    color:#fff!important;
  }
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop {
    position:fixed!important;
    inset:68px 0 0!important;
    background:rgba(4,13,27,.55)!important;
    z-index:3100!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.billi-app>nav.b72-global-nav .mobile-nav-backdrop.open {
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.billi-app>main.container {
    margin:68px 0 0!important;
    width:100%!important;
    max-width:none!important;
    padding:26px 16px 44px!important;
  }
  body.billi-app .b70-topbar { display:none!important; }
  body.billi-app .hero {
    margin:0 0 20px!important;
    align-items:flex-start!important;
  }
  body.billi-app .hero>div { min-width:0!important; }
  body.billi-app .stats { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body.billi-app .dashboard-main-grid { grid-template-columns:1fr!important; }
  body.billi-app .card,
  body.billi-app .stats,
  body.billi-app .grid2,
  body.billi-app .hero { min-width:0!important; width:100%!important; }
  body.billi-app .quick-action-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}

/* Public navigation at phone width: drawer remains dark and readable. */
@media (max-width:760px) {
  body:not(.v63-invoice-body) nav:not(.b72-global-nav) {
    z-index:3000!important;
  }
  body:not(.v63-invoice-body) .navlinks {
    z-index:3200!important;
  }
  body.auth-page { padding:20px 14px!important; place-items:center!important; }
  body.auth-page .auth {
    width:100%!important;
    max-width:520px!important;
    padding:25px 19px!important;
    border-radius:17px!important;
  }
  body.auth-page .auth h1 { font-size:27px!important; }
  body.auth-page .auth input { min-height:47px!important; }
}

/* Very small phones: never allow action labels or controls to overflow. */
@media (max-width:430px) {
  body.auth-page { padding:14px 10px!important; }
  body.auth-page .auth { padding:22px 16px!important; }
  body.billi-app>nav.b72-global-nav { padding-left:10px!important; padding-right:10px!important; }
  body.billi-app>nav.b72-global-nav .logo { font-size:23px!important; }
  body.billi-app .quick-action-grid { grid-template-columns:1fr!important; }
}

/* Invoice: final authority for the action area and shell at compact widths. */
@media (max-width:1000px) {
  body.v63-invoice-body { overflow-x:hidden!important; }
  body.v63-invoice-body .v63-app-shell { width:100%!important; min-width:0!important; overflow-x:hidden!important; }
  body.v63-invoice-body .v63-sidebar {
    position:fixed!important;
    left:0!important;
    top:68px!important;
    bottom:0!important;
    width:min(320px,88vw)!important;
    height:calc(100dvh - 68px)!important;
    transform:translateX(-110%)!important;
    visibility:hidden!important;
    opacity:0!important;
    z-index:3200!important;
    background:#071a31!important;
    overflow-y:auto!important;
    transition:transform .22s ease,opacity .18s ease,visibility .22s ease!important;
  }
  body.v63-invoice-body .v63-app-shell.v63-menu-open .v63-sidebar {
    transform:translateX(0)!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.v63-invoice-body .v63-mobile-topbar {
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:68px!important;
    display:flex!important;
    z-index:3300!important;
  }
  body.v63-invoice-body .v63-main { width:100%!important; min-width:0!important; }
  body.v63-invoice-body .v63-content {
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:88px 16px 40px!important;
  }
  body.v63-invoice-body .v63-actions {
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action {
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    min-height:72px!important;
    padding:11px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(1),
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(2) { grid-row:1!important; }
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(3) { grid-column:1/-1!important; grid-row:2!important; }
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(4) { grid-column:1!important; grid-row:3!important; }
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(5) { grid-column:2!important; grid-row:3!important; }
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(6) { grid-column:1!important; grid-row:4!important; }
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(7) { grid-column:2!important; grid-row:4!important; }
  body.v63-invoice-body .v63-actions .v63-delete,
  body.v63-invoice-body .v63-delete { grid-column:1/-1!important; grid-row:5!important; width:100%!important; }
  body.v63-invoice-body .v63-action>span:last-child { min-width:0!important; flex:1 1 auto!important; width:auto!important; }
  body.v63-invoice-body .v63-action>span:last-child b { white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; line-height:1.2!important; }
  body.v63-invoice-body .v63-action>span:last-child small { display:none!important; }
  body.v63-invoice-body .v63-share .v63-action-icon { flex:0 0 28px!important; }
  body.v63-invoice-body .v63-share .v63-action-icon svg { width:26px!important; height:26px!important; }
  body.v63-invoice-body .v63-invoice-card { width:100%!important; max-width:none!important; min-width:0!important; overflow:hidden!important; }
  body.v63-invoice-body .v63-items { width:100%!important; min-width:0!important; overflow:hidden!important; }
  body.v63-invoice-body .v63-items table { min-width:0!important; }
  body.v63-invoice-body .v63-share-card { width:100%!important; min-width:0!important; overflow:hidden!important; }
  body.v63-invoice-body .v63-share-card>div:last-child { grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; min-width:0!important; }
  body.v63-invoice-body .v63-share-card .btn { min-width:0!important; width:100%!important; white-space:normal!important; overflow-wrap:anywhere!important; }
}

/* Invoice desktop: readable 3-column action layout with no skinny cards. */
@media (min-width:1001px) {
  body.v63-invoice-body .v63-app-shell { display:flex!important; min-height:100vh!important; width:100%!important; }
  body.v63-invoice-body .v63-sidebar { flex:0 0 232px!important; width:232px!important; position:sticky!important; top:0!important; height:100vh!important; }
  body.v63-invoice-body .v63-main { min-width:0!important; flex:1 1 auto!important; width:auto!important; }
  body.v63-invoice-body .v63-content { width:min(1320px,calc(100% - 56px))!important; max-width:1320px!important; margin:0 auto!important; }
  body.v63-invoice-body .v63-actions { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important; }
  body.v63-invoice-body .v63-actions>.v63-action { min-width:0!important; width:100%!important; min-height:76px!important; }
  body.v63-invoice-body .v63-invoice-card { width:100%!important; max-width:none!important; }
}

/* Admin pages: same typography, spacing and responsive tables as customer
   pages, without accidentally inheriting the customer sidebar. */
body:not(.billi-app):not(.v63-invoice-body) .responsive-table,
body:not(.billi-app):not(.v63-invoice-body) .card { min-width:0; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.admin-actions form { margin:0; }
@media (max-width:760px) {
  body.auth-page .auth { box-shadow:0 14px 40px rgba(23,32,51,.09)!important; }
  body:not(.v63-invoice-body) nav .navlinks a { min-height:46px!important; }
  body:not(.v63-invoice-body) main.container { padding-left:15px!important; padding-right:15px!important; }
  body:not(.v63-invoice-body) .hero .page-actions { width:100%; }
  body:not(.v63-invoice-body) .hero .page-actions .btn { flex:1 1 100%; }
  body:not(.v63-invoice-body) .responsive-table { overflow-x:auto!important; }
}


/* ================================================================
   BILLI PRO V82 — FINAL NAV/DRAWER + TOUCH-VIEW REPAIR
   - One visual drawer style for authenticated PHP workspaces
   - No duplicate BILLI PRO branding inside the mobile invoice drawer
   - Touch/Android desktop-mode browsers use the compact workspace
   - Invoice actions keep readable widths and never clip WhatsApp text
   ================================================================ */

/* Authenticated workspace drawers use the same light BILLI surface.
   The public marketing drawer may retain its branded presentation. */
@media (max-width:1000px), (hover:none) and (pointer:coarse) and (max-width:1300px) {
  body.billi-app > nav.b72-global-nav .navlinks {
    background:#fff!important;
    color:#172033!important;
    border:1px solid #dbe3ee!important;
    border-left:0!important;
    box-shadow:18px 0 45px rgba(23,32,51,.20)!important;
  }
  body.billi-app > nav.b72-global-nav .navlinks a {
    color:#172033!important;
    background:transparent!important;
  }
  body.billi-app > nav.b72-global-nav .navlinks a:hover,
  body.billi-app > nav.b72-global-nav .navlinks a.active {
    background:#eef3ff!important;
    color:#2457d6!important;
    box-shadow:none!important;
  }
  body.billi-app > nav.b72-global-nav .navlinks a .b72-nav-icon {
    color:currentColor!important;
  }
  body.billi-app > nav.b72-global-nav .mobile-nav-backdrop {
    background:rgba(15,23,42,.28)!important;
  }
}

/* Android Chrome/Desktop-site and touch tablets: never squeeze a full
   desktop sidebar + invoice into the narrow physical screen. */
@media (hover:none) and (pointer:coarse) and (max-width:1300px) {
  html,body { width:100%!important; max-width:100%!important; overflow-x:hidden!important; }

  body.billi-app > nav.b72-global-nav {
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    padding:8px 16px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    background:#2457d6!important;
    color:#fff!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
    z-index:3000!important;
  }
  body.billi-app > nav.b72-global-nav .menu-toggle {
    display:grid!important;
    order:1!important;
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    background:transparent!important;
    border:0!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  body.billi-app > nav.b72-global-nav .logo {
    order:2!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-size:25px!important;
  }
  body.billi-app > nav.b72-global-nav .logo span {
    color:#fff!important;
    border-color:#fff!important;
    background:transparent!important;
  }
  body.billi-app > nav.b72-global-nav .b70-mobile-tools {
    order:3!important;
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
  }
  body.billi-app > nav.b72-global-nav .navlinks {
    position:fixed!important;
    left:0!important;
    right:auto!important;
    top:68px!important;
    width:min(320px,88vw)!important;
    height:calc(100dvh - 68px)!important;
    max-height:none!important;
    margin:0!important;
    padding:14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translateX(-110%)!important;
    visibility:hidden!important;
    opacity:0!important;
    transition:transform .22s ease,opacity .18s ease,visibility .22s ease!important;
    z-index:3200!important;
    border-radius:0 18px 18px 0!important;
  }
  body.billi-app > nav.b72-global-nav .navlinks.open {
    transform:translateX(0)!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.billi-app > main.container {
    width:100%!important;
    max-width:none!important;
    margin:68px 0 0!important;
    padding:24px 16px 40px!important;
  }
  body.billi-app .b70-topbar { display:none!important; }
  body.billi-app .hero,
  body.billi-app .card,
  body.billi-app .stats,
  body.billi-app .dashboard-main-grid,
  body.billi-app .grid2 { width:100%!important; max-width:none!important; min-width:0!important; }
  body.billi-app .dashboard-main-grid { grid-template-columns:1fr!important; }

  /* Invoice uses exactly the same mobile workspace behavior. */
  body.v63-invoice-body .v63-app-shell {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
  }
  body.v63-invoice-body .v63-mobile-topbar {
    display:flex!important;
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:68px!important;
    z-index:3300!important;
    background:#2457d6!important;
    color:#fff!important;
  }
  body.v63-invoice-body .v63-desktop-topbar { display:none!important; }
  body.v63-invoice-body .v63-main { width:100%!important; min-width:0!important; }
  body.v63-invoice-body .v63-content {
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:88px 16px 40px!important;
    box-sizing:border-box!important;
  }
  body.v63-invoice-body .v63-sidebar {
    position:fixed!important;
    left:0!important;
    top:68px!important;
    bottom:0!important;
    width:min(320px,88vw)!important;
    height:calc(100dvh - 68px)!important;
    display:flex!important;
    flex-direction:column!important;
    padding:18px 14px 24px!important;
    background:#fff!important;
    color:#172033!important;
    border-right:1px solid #dbe3ee!important;
    box-shadow:18px 0 45px rgba(23,32,51,.20)!important;
    transform:translateX(-110%)!important;
    visibility:hidden!important;
    opacity:0!important;
    z-index:3200!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.v63-invoice-body .v63-app-shell.v63-menu-open .v63-sidebar {
    transform:translateX(0)!important;
    visibility:visible!important;
    opacity:1!important;
  }
  /* Mobile header already supplies the BILLI PRO brand. */
  body.v63-invoice-body .v63-sidebar .v63-brand,
  body.v63-invoice-body .v63-sidebar .v63-sidebar-footer { display:none!important; }
  body.v63-invoice-body .v63-sidebar > .v63-side-nav {
    width:100%!important;
    flex:1 1 auto!important;
    display:grid!important;
    gap:4px!important;
    background:transparent!important;
  }
  body.v63-invoice-body .v63-sidebar > .v63-side-nav a {
    color:#172033!important;
    background:transparent!important;
    min-height:50px!important;
    padding:12px 12px!important;
    border-radius:11px!important;
  }
  body.v63-invoice-body .v63-sidebar > .v63-side-nav a.active {
    color:#2457d6!important;
    background:#eef3ff!important;
    box-shadow:none!important;
  }
  body.v63-invoice-body .v63-sidebar > .v63-side-nav a .v71-nav-icon { color:currentColor!important; }

  /* Invoice actions: two equal columns, with readable wrapping. */
  body.v63-invoice-body .v63-actions {
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.v63-invoice-body .v63-actions > .v63-action {
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:72px!important;
    padding:10px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body.v63-invoice-body .v63-actions > .v63-action > span:last-child {
    min-width:0!important;
    width:auto!important;
    flex:0 1 auto!important;
    text-align:center!important;
  }
  body.v63-invoice-body .v63-actions > .v63-action > span:last-child b {
    display:block!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.18!important;
  }
  body.v63-invoice-body .v63-share .v63-action-icon,
  body.v63-invoice-body .v63-share .v63-action-icon svg { width:27px!important; height:27px!important; flex:0 0 27px!important; }
  body.v63-invoice-body .v63-invoice-card,
  body.v63-invoice-body .v63-share-card { width:100%!important; max-width:none!important; min-width:0!important; overflow:hidden!important; }
}

/* Auth cards: keep the desktop form centered and the mobile form compact. */
@media (min-width:1001px), (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1300px) {
  body.auth-page .auth { width:min(520px,calc(100vw - 48px))!important; max-width:520px!important; }
}
@media (max-width:760px), (hover:none) and (pointer:coarse) and (max-width:760px) {
  body.auth-page { padding:20px 14px!important; }
  body.auth-page .auth { width:100%!important; max-width:520px!important; padding:24px 18px!important; }
  body.auth-page .auth input,
  body.auth-page .auth .full { min-height:48px!important; }
}

/* ================================================================
   BILLI PRO V83 — BALANCED SPACING / VISUAL RHYTHM REPAIR
   Final geometry layer for customer, invoice, admin and public pages.
   Prevents flex/grid stretch from turning normal controls into giant
   empty boxes and keeps the workspace compact without changing the
   established BILLI colour system.
   ================================================================ */

/* Global document rhythm */
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--bg)}

/* Standard authenticated pages: content should flow naturally. */
body.billi-app>main.container{
  min-height:0!important;
  box-sizing:border-box!important;
}
body.billi-app .hero{
  align-items:flex-start!important;
  min-height:0!important;
  height:auto!important;
  box-sizing:border-box!important;
}
body.billi-app .hero>div,
body.billi-app .hero>.btn,
body.billi-app .hero>.page-actions{min-height:0!important;height:auto!important}
body.billi-app .hero>.btn,
body.billi-app .hero>.page-actions{align-self:flex-start!important}
body.billi-app .hero .page-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:stretch!important;
  gap:10px!important;
}
body.billi-app .hero .page-actions .btn{
  flex:0 0 auto!important;
  width:auto!important;
  height:auto!important;
  min-height:46px!important;
  max-height:none!important;
}
body.billi-app .hero+*{margin-top:0!important}
body.billi-app .card{height:auto!important;min-height:0!important}
body.billi-app .stats{height:auto!important;min-height:0!important}

/* Compact, even page spacing */
@media(min-width:1001px){
  body.billi-app>main.container{padding-top:28px!important;padding-bottom:44px!important}
  body.billi-app .hero{margin-bottom:18px!important;gap:20px!important}
  body.billi-app .hero h1{margin:4px 0 7px!important}
  body.billi-app .hero p{line-height:1.5!important}
  body.billi-app .card{padding:22px!important}
  body.billi-app .grid2{gap:16px!important}
  body.billi-app .stats{gap:12px!important;margin-bottom:16px!important}
}

@media(max-width:1000px){
  body.billi-app>main.container{
    padding:20px 16px 34px!important;
  }
  body.billi-app .hero{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:11px!important;
    margin:0 0 16px!important;
  }
  body.billi-app .hero .page-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  body.billi-app .hero .page-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:10px 12px!important;
  }
  body.billi-app .hero>.btn{
    width:100%!important;
    min-height:50px!important;
    padding:10px 12px!important;
  }
  body.billi-app .hero h1{margin:3px 0 6px!important;font-size:clamp(29px,6vw,38px)!important;line-height:1.12!important}
  body.billi-app .hero p{line-height:1.5!important}
  body.billi-app .card{padding:18px!important}
  body.billi-app .stats{gap:10px!important;margin-bottom:14px!important}
  body.billi-app .grid2{gap:12px!important}
}

@media(max-width:480px){
  body.billi-app>main.container{padding:18px 14px 30px!important}
  body.billi-app .hero{gap:9px!important;margin-bottom:14px!important}
  body.billi-app .hero .page-actions{grid-template-columns:1fr!important;gap:8px!important}
  body.billi-app .hero .page-actions .btn,
  body.billi-app .hero>.btn{min-height:48px!important}
  body.billi-app .hero h1{font-size:30px!important}
  body.billi-app .hero p{font-size:15px!important}
  body.billi-app .card{padding:16px!important;border-radius:16px!important}
}

/* The navigation is part of the workspace, not a dark page section. */
@media(min-width:761px){
  body.billi-app>nav.b72-global-nav{
    background:#fff!important;
    color:#172033!important;
    border-right:1px solid #e1e7ef!important;
    box-shadow:6px 0 24px rgba(23,32,51,.055)!important;
  }
  body.billi-app>nav.b72-global-nav .logo{color:#172033!important}
  body.billi-app>nav.b72-global-nav .logo span{
    color:#fff!important;
    background:#172033!important;
    border-color:#172033!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks a{
    color:#536177!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks a:hover{
    background:#f3f6fb!important;
    color:#2457d6!important;
  }
  body.billi-app>nav.b72-global-nav .navlinks a.active{
    background:#1764ea!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(23,100,234,.18)!important;
  }
  body.billi-app>nav.b72-global-nav .b70-sidebar-footer{display:none!important}
}

/* Mobile app header remains branded blue; its drawer is clean white. */
@media(max-width:1000px){
  body.billi-app>nav.b72-global-nav .navlinks{
    background:#fff!important;
    color:#172033!important;
    border:1px solid #dbe3ee!important;
    border-left:0!important;
  }
}

/* Invoice action geometry: no stretching, no skinny desktop cards,
   and the WhatsApp label always has enough room. */
body.v63-invoice-body .v63-actions{
  align-items:stretch!important;
  height:auto!important;
  min-height:0!important;
}
body.v63-invoice-body .v63-actions>.v63-action{
  height:auto!important;
  min-height:72px!important;
  max-height:none!important;
  box-sizing:border-box!important;
}
body.v63-invoice-body .v63-action b,
body.v63-invoice-body .v63-action small{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
body.v63-invoice-body .v63-action>span:last-child{
  min-width:0!important;
  max-width:100%!important;
}
body.v63-invoice-body .v63-share>span:last-child b{
  white-space:normal!important;
}
@media(min-width:1001px){
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  body.v63-invoice-body .v63-actions>.v63-action{min-height:70px!important;padding:11px 14px!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(1){grid-column:auto!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(2){grid-column:auto!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(3){grid-column:auto!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(4){grid-column:auto!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(5){grid-column:auto!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(6){grid-column:auto!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-action:nth-child(7){grid-column:auto!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-delete{grid-column:auto!important;grid-row:auto!important}
}
@media(max-width:1000px){
  body.v63-invoice-body .v63-content{padding:84px 14px 30px!important}
  body.v63-invoice-body .v63-page-head{margin-bottom:12px!important}
  body.v63-invoice-body .v63-actions{gap:8px!important;margin-bottom:16px!important}
  body.v63-invoice-body .v63-actions>.v63-action{min-height:64px!important;padding:9px 8px!important;border-radius:14px!important}
}
@media(max-width:430px){
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.v63-invoice-body .v63-actions>.v63-action{min-height:62px!important}
}

/* Auth pages: compact, deliberate and balanced on both desktop and phone. */
body.auth-page{
  min-height:100dvh!important;
  padding:32px 20px!important;
  background:radial-gradient(circle at 50% 0,#eef3ff 0,#f5f7fb 48%,#f5f7fb 100%)!important;
}
body.auth-page .auth{
  width:min(480px,100%)!important;
  max-width:480px!important;
  padding:30px!important;
  border-radius:18px!important;
  box-shadow:0 18px 48px rgba(23,32,51,.08)!important;
}
body.auth-page .auth h1{margin:9px 0 7px!important}
body.auth-page .auth form{margin-top:17px!important}
body.auth-page .auth label{margin:13px 0!important}
body.auth-page .auth input{min-height:48px!important}
body.auth-page .auth .full{min-height:48px!important;margin-top:8px!important}
@media(max-width:600px){
  body.auth-page{padding:18px 12px!important}
  body.auth-page .auth{padding:23px 18px!important;border-radius:16px!important}
}

/* Admin pages inherit the same compact rhythm without taking the
   authenticated customer sidebar styles. */
body:not(.billi-app):not(.v63-invoice-body) main.container{
  min-height:0!important;
}
body:not(.billi-app):not(.v63-invoice-body) .hero{
  align-items:flex-start!important;
  min-height:0!important;
  height:auto!important;
  margin-bottom:18px!important;
}
body:not(.billi-app):not(.v63-invoice-body) .hero .page-actions{
  align-self:flex-start!important;
  height:auto!important;
}
body:not(.billi-app):not(.v63-invoice-body) .hero .page-actions .btn{
  min-height:46px!important;
  height:auto!important;
}

/* Public homepage sections: tighten rhythm without removing intentional
   breathing room between major marketing sections. */
.landing-enhanced{padding-top:52px!important;padding-bottom:40px!important}
.marketing-section{padding-top:58px!important;padding-bottom:58px!important}
.section-heading{margin-bottom:24px!important}
.feature-grid,.workflow-grid{gap:14px!important}
@media(max-width:760px){
  .landing-enhanced{padding-top:32px!important;padding-bottom:28px!important}
  .marketing-section{padding-top:42px!important;padding-bottom:42px!important}
  .section-heading{margin-bottom:20px!important}
  .feature-grid,.workflow-grid{gap:11px!important}
}

/* ================================================================
   BILLI PRO V84 — AUTHENTICATED PAGE FLOW REPAIR
   Removes remaining viewport/flex/grid stretching after login.
   All customer PHP pages now use content-driven heights and compact,
   even vertical rhythm. Existing BILLI colours and theme are preserved.
   ================================================================ */

body.billi-app > main.container,
body.billi-app > main.container > *,
body.billi-app .hero,
body.billi-app .card,
body.billi-app .stats,
body.billi-app .grid2,
body.billi-app .dashboard-main-grid,
body.billi-app .dashboard-focus,
body.billi-app .dashboard-list-card,
body.billi-app .plan-summary,
body.billi-app .stat {
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  box-sizing:border-box!important;
}

body.billi-app > main.container {
  display:block!important;
}

body.billi-app .hero {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:20px!important;
  margin:0 0 18px!important;
  padding:0!important;
}

body.billi-app .hero > div:first-child {
  min-width:0!important;
  width:auto!important;
  flex:none!important;
}

body.billi-app .hero .page-actions {
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  align-self:start!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  gap:9px!important;
  flex:none!important;
}

body.billi-app .hero .page-actions .btn,
body.billi-app .hero > .btn {
  width:auto!important;
  height:auto!important;
  min-height:46px!important;
  max-height:54px!important;
  flex:0 0 auto!important;
  align-self:flex-start!important;
  padding:10px 15px!important;
  line-height:1.2!important;
}

body.billi-app .hero + * {
  margin-top:0!important;
}

/* Never let generic dashboard equal-height rules create giant cards. */
body.billi-app .dashboard-stats .stat,
body.billi-app .dashboard-list-card,
body.billi-app .dashboard-main-grid > *,
body.billi-app .quick-action-grid,
body.billi-app .getting-started-card {
  height:auto!important;
  min-height:0!important;
}

/* Empty states should be proportional to their content. */
body.billi-app .empty,
body.billi-app .empty-state {
  min-height:0!important;
  height:auto!important;
  padding:20px 10px!important;
  margin:0!important;
}

/* Invoice history: controls stay compact and the list starts immediately. */
body.billi-app .invoice-list-actions {
  height:auto!important;
  min-height:0!important;
  align-items:center!important;
}

@media (max-width:1000px){
  body.billi-app > main.container {
    padding:20px 16px 34px!important;
    margin-top:68px!important;
  }

  body.billi-app .hero {
    display:block!important;
    margin:0 0 16px!important;
  }

  body.billi-app .hero > div:first-child {
    width:100%!important;
    margin:0!important;
  }

  body.billi-app .hero .page-actions {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:max-content!important;
    align-items:start!important;
    justify-content:stretch!important;
    width:100%!important;
    margin:13px 0 0!important;
    gap:9px!important;
  }

  body.billi-app .hero .page-actions .btn,
  body.billi-app .hero > .btn {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    max-height:54px!important;
    height:50px!important;
    margin:0!important;
    padding:10px 12px!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }

  body.billi-app .card {
    margin-top:0!important;
  }
}

@media (max-width:480px){
  body.billi-app > main.container {
    padding:18px 14px 30px!important;
  }

  body.billi-app .hero {
    margin-bottom:14px!important;
  }

  body.billi-app .hero .page-actions {
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:12px!important;
  }

  body.billi-app .hero .page-actions .btn,
  body.billi-app .hero > .btn {
    min-height:48px!important;
    height:48px!important;
    max-height:50px!important;
  }

  body.billi-app .hero h1 {
    margin:3px 0 6px!important;
  }

  body.billi-app .hero p {
    margin:0!important;
    line-height:1.48!important;
  }
}

/* Authenticated workspace should not inherit old equal-height card rules. */
body.billi-app .card,
body.billi-app .stat,
body.billi-app .price-card,
body.billi-app .form-section,
body.billi-app .customer-card,
body.billi-app .payment-box,
body.billi-app .pending-card {
  height:auto!important;
  min-height:0!important;
}

/* ================================================================
   V84 — invoice action labels
   ================================================================ */
body.v63-invoice-body .v63-action {
  height:auto!important;
  max-height:none!important;
}
body.v63-invoice-body .v63-actions {
  height:auto!important;
  min-height:0!important;
  align-items:start!important;
  grid-auto-rows:max-content!important;
}
body.v63-invoice-body .v63-action b {
  overflow-wrap:anywhere!important;
}


/* ================================================================
   BILLI PRO V85 — FINAL VISUAL RHYTHM + WHATSAPP ICON AUTHORITY
   Content-driven cards, consistent page spacing, and one reusable
   professional WhatsApp mark across customer/public sharing actions.
   ================================================================ */
.b85-whatsapp-icon{
  display:block!important;
  width:1.45em!important;
  height:1.45em!important;
  min-width:1.45em!important;
  min-height:1.45em!important;
  max-width:32px!important;
  max-height:32px!important;
  flex:0 0 1.45em!important;
  object-fit:contain!important;
  vertical-align:middle!important;
}
.v63-action .b85-whatsapp-icon{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;flex-basis:28px!important}
.b68-wa-inline .b85-whatsapp-icon{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;flex-basis:22px!important}
.reminder-btn .b85-whatsapp-icon{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;flex-basis:20px!important}
.b85-dashboard-wa{display:inline-block!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;vertical-align:-5px!important;margin-right:7px!important}

/* Logged-in pages: compact but not cramped. */
body.billi-app > main.container{margin-top:0!important}
body.billi-app .hero{gap:22px!important;margin-bottom:18px!important}
body.billi-app .hero h1{margin-bottom:8px!important}
body.billi-app .hero p{line-height:1.5!important}
body.billi-app .card{box-sizing:border-box!important}
body.billi-app .stats{gap:14px!important}
body.billi-app .grid2{gap:14px!important}
body.billi-app .dashboard-focus{margin:14px 0!important}
body.billi-app .dashboard-list-card{margin:0!important}
body.billi-app .empty,.billi-app .empty-state{padding:18px 8px!important}

/* Invoice list: never reserve a giant blank area above records. */
body.billi-app .invoice-list-actions{gap:8px!important}
body.billi-app .invoice-list-actions .btn{min-height:42px!important;height:42px!important}

/* Auth pages: keep the card visually centered while making the form rhythm
   slightly more generous than the cramped mobile reference. */
body.auth-page .auth{margin:auto!important}
body.auth-page .auth h1{margin:10px 0 8px!important}
body.auth-page .auth form{margin-top:18px!important}
body.auth-page .auth label{margin:13px 0!important}
body.auth-page .auth .full{margin-top:9px!important}

@media(min-width:1001px){
  body.billi-app > main.container{padding-top:28px!important;padding-bottom:48px!important}
  body.billi-app .hero{margin-bottom:20px!important}
  body.billi-app .dashboard-focus{margin:14px 0 18px!important}
  body.billi-app .stats{margin-top:16px!important}
  body.billi-app .dashboard-main-grid{gap:14px!important}
}
@media(max-width:1000px){
  body.billi-app > main.container{padding-top:24px!important;padding-bottom:38px!important}
  body.billi-app .hero{margin-bottom:17px!important}
  body.billi-app .hero > .btn{margin-top:4px!important}
  body.billi-app .stats{gap:12px!important}
  body.billi-app .grid2{gap:12px!important}
}
@media(max-width:600px){
  body.auth-page .auth{padding:23px 18px!important}
  body.billi-app > main.container{padding-left:16px!important;padding-right:16px!important}
  body.billi-app .hero{gap:12px!important}
  body.billi-app .hero p{line-height:1.48!important}
}
@media(max-width:430px){
  .v63-action .b85-whatsapp-icon{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;flex-basis:25px!important}
  .b85-dashboard-wa{width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important}
}


/* ================================================================
   BILLI PRO V86 — VISIBILITY + RESPONSIVE VIEWPORT REPAIR
   Final authority layer: never hide the page hero under the fixed
   workspace header, never clip action labels, and keep WhatsApp
   sharing controls visibly branded on every viewport.
   ================================================================ */

/* The workspace header is fixed on compact authenticated pages.
   Reserve its height so the first heading is never covered. */
@media (max-width:1000px){
  body.billi-app > main.container{
    margin-top:68px!important;
    padding-top:20px!important;
  }
}

/* On small phones keep the original comfortable header-to-content rhythm. */
@media (max-width:600px){
  body.billi-app > main.container{
    margin-top:68px!important;
    padding-top:18px!important;
  }
}

/* Do not let headings, labels or buttons disappear because of inherited
   flex/grid clipping rules. */
body.billi-app .hero,
body.billi-app .hero > div,
body.billi-app .hero h1,
body.billi-app .hero p,
body.billi-app .card,
body.billi-app .stat,
body.billi-app .btn,
body.billi-app .btn span,
body.billi-app .btn b,
body.billi-app .btn small{
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
body.billi-app .hero h1,
body.billi-app .hero p{
  clip:initial!important;
  text-indent:0!important;
}

/* Canonical WhatsApp mark. It must remain visible even when a button is
   a flex/grid child with tight intrinsic sizing. */
.b85-whatsapp-icon{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:1!important;
  flex:0 0 auto!important;
  object-fit:contain!important;
  overflow:visible!important;
}
.v63-action.v63-share .v85-whatsapp-icon{
  width:28px!important;height:28px!important;
  min-width:28px!important;min-height:28px!important;
  flex-basis:28px!important;
}
.b68-wa-inline .b85-whatsapp-icon{
  width:22px!important;height:22px!important;
  min-width:22px!important;min-height:22px!important;
  flex-basis:22px!important;
}
.reminder-btn .b85-whatsapp-icon{
  width:20px!important;height:20px!important;
  min-width:20px!important;min-height:20px!important;
  flex-basis:20px!important;
}

/* Share buttons: icon + complete label always travel together. */
.v63-action.v63-share,
.b68-wa-inline,
.reminder-btn{
  overflow:visible!important;
  white-space:normal!important;
}
.v63-action.v63-share > span:last-child,
.b68-wa-inline,
.reminder-btn{
  min-width:0!important;
}
.v63-action.v63-share > span:last-child b{
  display:block!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.2!important;
}

/* Actual phone: balanced 2-column action grid. */
@media (max-width:430px){
  body.v63-invoice-body .v63-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action{
    min-height:62px!important;
    padding:9px 7px!important;
  }
  body.v63-invoice-body .v63-action.v63-share .b85-whatsapp-icon{
    width:24px!important;height:24px!important;
    min-width:24px!important;min-height:24px!important;
    flex-basis:24px!important;
  }
}

/* Touch devices using Chrome's Desktop-site mode commonly expose a
   ~980px layout viewport while the physical display is still a phone.
   JS adds .billi-desktop-site; give that mode a real desktop-width layout
   instead of rendering a tiny mobile page inside a scaled viewport. */
html.billi-desktop-site body.billi-app > main.container{
  margin-top:0!important;
  padding:28px 30px 48px!important;
}
html.billi-desktop-site body.billi-app .hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:20px!important;
  margin-bottom:20px!important;
}
html.billi-desktop-site body.billi-app .hero > .btn,
html.billi-desktop-site body.billi-app .hero .page-actions .btn{
  width:auto!important;
  min-height:46px!important;
  height:auto!important;
}
html.billi-desktop-site body.billi-app .stats,
html.billi-desktop-site body.billi-app .grid2{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* ================================================================
   BILLI PRO V87 — DESKTOP-SITE + ACTION VISIBILITY + WHATSAPP MASTER
   Treat Android Chrome Desktop Site as a desktop presentation so the
   customer workspace never mixes mobile chrome with desktop content.
   Keep both invoice actions fully visible and use the same supplied
   WhatsApp master image everywhere.
   ================================================================ */

/* Supplied WhatsApp master: no clipping, no inherited SVG/icon rules. */
img.b85-whatsapp-icon{
  display:block!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
  object-fit:contain!important;
  flex:0 0 28px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.b68-wa-inline img.b85-whatsapp-icon{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;max-height:22px!important;flex-basis:22px!important}
.reminder-btn img.b85-whatsapp-icon{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;flex-basis:20px!important}

/* Android Chrome Desktop Site: restore the actual desktop workspace. */
@media (min-width:761px){
  html.billi-desktop-site body.billi-app>nav.b72-global-nav{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:232px!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:none!important;
    padding:22px 12px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    background:#071a31!important;
    color:#fff!important;
    overflow:hidden!important;
    z-index:3000!important;
  }
  html.billi-desktop-site body.billi-app>nav.b72-global-nav .menu-toggle{display:none!important}
  html.billi-desktop-site body.billi-app>nav.b72-global-nav .logo{display:inline-flex!important;width:100%!important;margin:0!important;padding:2px 10px 22px!important;font-size:24px!important;color:#fff!important;order:initial!important}
  html.billi-desktop-site body.billi-app>nav.b72-global-nav .navlinks{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    max-height:calc(100vh - 90px)!important;
    display:flex!important;
    flex-direction:column!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    overflow-y:auto!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
  }
  html.billi-desktop-site body.billi-app>nav.b72-global-nav .navlinks a{width:100%!important;min-height:46px!important;padding:12px 14px!important;font-size:14px!important;color:#dce6f4!important;white-space:nowrap!important}
  html.billi-desktop-site body.billi-app>nav.b72-global-nav .mobile-nav-backdrop{display:none!important}
  html.billi-desktop-site body.billi-app>main.container{
    margin-left:232px!important;
    margin-top:0!important;
    width:calc(100% - 232px)!important;
    max-width:none!important;
    padding:34px clamp(24px,3vw,48px) 56px!important;
  }
  html.billi-desktop-site body.billi-app .b70-topbar{display:flex!important;margin-left:232px!important;width:calc(100% - 232px)!important;position:sticky!important;top:0!important}
  html.billi-desktop-site body.billi-app .responsive-table{overflow-x:auto!important}
  html.billi-desktop-site body.billi-app .responsive-table table{display:table!important;width:100%!important;min-width:0!important;table-layout:fixed!important}
  html.billi-desktop-site body.billi-app .responsive-table thead{display:table-header-group!important}
  html.billi-desktop-site body.billi-app .responsive-table tbody{display:table-row-group!important}
  html.billi-desktop-site body.billi-app .responsive-table tr{display:table-row!important}
  html.billi-desktop-site body.billi-app .responsive-table th,
  html.billi-desktop-site body.billi-app .responsive-table td{display:table-cell!important}
  html.billi-desktop-site body.billi-app .invoice-list-actions{display:flex!important;flex-wrap:nowrap!important;gap:7px!important;align-items:center!important;justify-content:flex-start!important}
  html.billi-desktop-site body.billi-app .invoice-list-actions .btn{width:auto!important;min-width:74px!important;height:42px!important;white-space:nowrap!important;overflow:visible!important}
  html.billi-desktop-site body.billi-app .responsive-table th:last-child,
  html.billi-desktop-site body.billi-app .responsive-table td:last-child{width:180px!important;min-width:180px!important;white-space:nowrap!important}
}

/* Invoice detail has its own shell; give Desktop Site the same desktop
   treatment instead of showing the compact mobile header at ~980px. */
@media (min-width:761px){
  html.billi-desktop-site body.v63-invoice-body{overflow-x:hidden!important}
  html.billi-desktop-site body.v63-invoice-body .v63-app-shell{display:flex!important;min-height:100vh!important;width:100%!important;overflow:visible!important}
  html.billi-desktop-site body.v63-invoice-body .v63-sidebar{
    display:block!important;
    position:sticky!important;
    top:0!important;
    left:auto!important;
    width:232px!important;
    flex:0 0 232px!important;
    height:100vh!important;
    min-height:100vh!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
    overflow-y:auto!important;
    z-index:100!important;
  }
  html.billi-desktop-site body.v63-invoice-body .v63-mobile-topbar{display:none!important}
  html.billi-desktop-site body.v63-invoice-body .v63-desktop-topbar{display:flex!important;position:sticky!important;top:0!important;z-index:100!important}
  html.billi-desktop-site body.v63-invoice-body .v63-main{flex:1 1 auto!important;width:auto!important;min-width:0!important}
  html.billi-desktop-site body.v63-invoice-body .v63-content{width:min(1320px,calc(100% - 56px))!important;max-width:1320px!important;margin:0 auto!important;padding:18px 22px 42px!important}
  html.billi-desktop-site body.v63-invoice-body .v63-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  html.billi-desktop-site body.v63-invoice-body .v63-actions>.v63-action{min-width:0!important;width:100%!important;min-height:76px!important;overflow:visible!important}
  html.billi-desktop-site body.v63-invoice-body .v63-actions>.v63-action>span:last-child{min-width:0!important;overflow:visible!important}
  html.billi-desktop-site body.v63-invoice-body .v63-action b{white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important}
  html.billi-desktop-site body.v63-invoice-body .v63-action small{display:block!important}
  html.billi-desktop-site body.v63-invoice-body .v63-delete{width:100%!important}
  html.billi-desktop-site body.v63-invoice-body .v63-share-card .btn{white-space:nowrap!important;overflow:visible!important}
}

/* Never let the invoice action labels be clipped at any non-phone width. */
@media (min-width:431px){
  body.v63-invoice-body .v63-action{overflow:visible!important}
  body.v63-invoice-body .v63-action>span:last-child{min-width:0!important;overflow:visible!important}
  body.v63-invoice-body .v63-action b{overflow:visible!important}
}


/* ================================================================
   BILLI PRO V88 — FINAL INVOICE HEADER + ACTION ALIGNMENT REPAIR
   Android Chrome Desktop Site must use the desktop invoice shell even
   when its CSS viewport is below 1000px. Real phones keep the compact
   mobile shell. The invoice delete action is centered like every other
   action, and the mobile brand/header cannot collapse or disappear.
   ================================================================ */

/* Delete is an action like the others: center the icon + label as one unit. */
body.v63-invoice-body .v63-delete .v63-action{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  margin:0!important;
}
body.v63-invoice-body .v63-delete .v63-action>span:last-child{
  text-align:center!important;
}

/* Compact phone header: stable three-part layout; brand never gets squeezed
   out when the navigation drawer is opened. */
@media(max-width:760px){
  body.v63-invoice-body .v63-mobile-topbar{
    display:grid!important;
    grid-template-columns:48px minmax(max-content,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    overflow:visible!important;
  }
  body.v63-invoice-body .v63-mobile-menu{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
  }
  body.v63-invoice-body .v63-mobile-brand{
    display:inline-flex!important;
    width:max-content!important;
    max-width:none!important;
    min-width:max-content!important;
    flex:0 0 auto!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:3301!important;
    color:#fff!important;
  }
  body.v63-invoice-body .v63-mobile-right{
    margin-left:0!important;
    justify-self:end!important;
    min-width:max-content!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    z-index:3302!important;
  }
  body.v63-invoice-body .v63-mobile-right .v65-bell-btn,
  body.v63-invoice-body .v63-mobile-right .v65-mobile-avatar-btn{
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
  }
}

/* Android Chrome Desktop Site / touch desktop: do not enter the 1000px
   mobile invoice shell. This is intentionally based on touch capability,
   not only on a JS viewport class, so it remains reliable after reload. */
@media (hover:none) and (pointer:coarse) and (min-width:761px){
  body.v63-invoice-body .v63-app-shell{
    display:flex!important;
    min-height:100vh!important;
    width:100%!important;
    overflow:visible!important;
  }
  body.v63-invoice-body .v63-sidebar{
    display:flex!important;
    position:sticky!important;
    left:auto!important;
    top:0!important;
    width:232px!important;
    flex:0 0 232px!important;
    height:100vh!important;
    min-height:100vh!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:100!important;
    background:#071a31!important;
    color:#fff!important;
  }
  body.v63-invoice-body .v63-mobile-topbar{display:none!important}
  body.v63-invoice-body .v63-desktop-topbar{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    z-index:100!important;
  }
  body.v63-invoice-body .v63-main{
    width:auto!important;
    min-width:0!important;
    flex:1 1 auto!important;
  }
  body.v63-invoice-body .v63-content{
    width:min(1320px,calc(100% - 44px))!important;
    max-width:1320px!important;
    margin:0 auto!important;
    padding:20px 0 44px!important;
  }
  body.v63-invoice-body .v63-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action{
    width:100%!important;
    min-width:0!important;
    min-height:76px!important;
    padding:11px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    overflow:visible!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action>span:last-child{
    min-width:0!important;
    flex:0 1 auto!important;
    text-align:center!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action b{
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.2!important;
  }
  body.v63-invoice-body .v63-delete,
  body.v63-invoice-body .v63-delete .v63-action{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  body.v63-invoice-body .v63-invoice-card,
  body.v63-invoice-body .v63-share-card{
    width:100%!important;
    max-width:none!important;
  }
}

/* The JS class remains a useful fallback for Android browsers that report
   unusual pointer capabilities in Desktop Site mode. */
@media (min-width:761px){
  html.billi-desktop-site body.v63-invoice-body .v63-mobile-topbar{display:none!important}
  html.billi-desktop-site body.v63-invoice-body .v63-desktop-topbar{display:flex!important}
  html.billi-desktop-site body.v63-invoice-body .v63-app-shell{display:flex!important;min-height:100vh!important}
  html.billi-desktop-site body.v63-invoice-body .v63-sidebar{display:flex!important;position:sticky!important;top:0!important;transform:none!important;visibility:visible!important;opacity:1!important;width:232px!important;flex:0 0 232px!important;height:100vh!important}
  html.billi-desktop-site body.v63-invoice-body .v63-main{flex:1 1 auto!important;width:auto!important;min-width:0!important}
  html.billi-desktop-site body.v63-invoice-body .v63-content{width:min(1320px,calc(100% - 44px))!important;max-width:1320px!important;margin:0 auto!important;padding:20px 0 44px!important}
  html.billi-desktop-site body.v63-invoice-body .v63-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  html.billi-desktop-site body.v63-invoice-body .v63-actions>.v63-action{min-height:76px!important;width:100%!important;justify-content:center!important;text-align:center!important;overflow:visible!important}
  html.billi-desktop-site body.v63-invoice-body .v63-delete{grid-column:auto!important;grid-row:auto!important}
}


/* ================================================================
   BILLI PRO V89 — INVOICE HISTORY ACTION + DESKTOP-SITE FINAL FIX
   ================================================================ */

/* Never let the invoice history action cell squeeze the Edit button out. */
@media (min-width:761px){
  body.billi-app .responsive-table table{
    table-layout:auto!important;
    min-width:0!important;
    width:100%!important;
  }
  body.billi-app .responsive-table th:last-child,
  body.billi-app .responsive-table td:last-child{
    width:190px!important;
    min-width:190px!important;
    white-space:nowrap!important;
  }
  body.billi-app .invoice-list-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(82px,1fr))!important;
    width:180px!important;
    max-width:180px!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }
  body.billi-app .invoice-list-actions .btn{
    display:flex!important;
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    height:42px!important;
    min-height:42px!important;
    padding:8px 10px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}

/* Desktop Site on a touch phone: force the same readable table/action geometry. */
html.billi-desktop-site body.billi-app .responsive-table table{
  table-layout:auto!important;
  min-width:0!important;
}
html.billi-desktop-site body.billi-app .responsive-table th:last-child,
html.billi-desktop-site body.billi-app .responsive-table td:last-child{
  width:190px!important;
  min-width:190px!important;
  white-space:nowrap!important;
}
html.billi-desktop-site body.billi-app .invoice-list-actions{
  display:grid!important;
  grid-template-columns:repeat(2,86px)!important;
  width:180px!important;
  max-width:180px!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
html.billi-desktop-site body.billi-app .invoice-list-actions .btn{
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  height:42px!important;
  min-height:42px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

/* Export page is a normal authenticated workspace; its avatar must never fall
   back to the generic U because the page forgot to provide user context. */
body.billi-app .b70-avatar{flex:0 0 auto!important;}


/* ================================================================
   BILLI PRO V90 — WORKSPACE QA + PROFILE PHOTO
   ================================================================ */
.b70-avatar-photo,.v63-avatar-photo,.v69-avatar-large.v69-avatar-photo{
  overflow:hidden!important;
  background:#2457d6!important;
  display:grid!important;
  place-items:center!important;
}
.b70-avatar-photo img,.v63-avatar-photo img,.v69-avatar-large.v69-avatar-photo img{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:cover!important;border:0!important;margin:0!important;
}
.b70-photo-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;padding:6px 4px 8px!important;border-bottom:1px solid #edf0f4!important}
.b70-photo-actions a,.b70-photo-actions form{margin:0!important}
.b70-photo-actions a,.b70-photo-actions button{min-height:40px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:8px 7px!important;border:1px solid #dbe3ee!important;border-radius:10px!important;background:#f7f9fd!important;color:#2457d6!important;font-size:11px!important;font-weight:850!important;text-decoration:none!important;box-sizing:border-box!important}
.b70-photo-actions button{font-family:inherit!important;cursor:pointer!important}
.b70-photo-actions .b70-photo-remove{color:#b52e35!important;background:#fff5f5!important;border-color:#f1cccc!important}
.b70-photo-actions .b70-photo-remove[hidden]{display:none!important}
.b70-photo-actions .b70-photo-remove>span{display:inline!important}
.profile-photo-row{display:flex!important;align-items:center!important;gap:18px!important;flex-wrap:wrap!important}
.profile-photo-preview{width:92px!important;height:92px!important;border-radius:50%!important;overflow:hidden!important;border:2px solid #dbe3ee!important;background:#eef3ff!important;flex:0 0 92px!important}
.profile-photo-preview img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
.profile-photo-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;min-width:0!important}
.photo-upload-label{display:flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;padding:10px 15px!important;border:1px solid #cfd9e7!important;border-radius:11px!important;background:#fff!important;color:#2457d6!important;font-weight:850!important;cursor:pointer!important}
.photo-upload-label input{display:none!important}
.v70-invoice-photo-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;padding:6px 4px 8px!important;border-bottom:1px solid #edf0f4!important}
.v70-invoice-photo-actions a,.v70-invoice-photo-actions button{display:flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;padding:8px!important;border:1px solid #dbe3ee!important;border-radius:10px!important;background:#f7f9fd!important;color:#2457d6!important;font:850 11px/1.2 inherit!important;text-decoration:none!important;cursor:pointer!important}
.v70-invoice-photo-actions form{margin:0!important}
.v70-invoice-photo-actions button{width:100%!important;color:#b52e35!important;background:#fff5f5!important;border-color:#f1cccc!important}

/* Android Chrome Desktop Site: dashboard's narrow right card must not create
   a 270px second track inside a ~748px content canvas. Stack the plan summary
   itself so text can use the full card width. */
html.billi-desktop-site body.billi-app .plan-summary{
  grid-template-columns:1fr!important;
  gap:10px!important;
  padding:16px!important;
  align-items:stretch!important;
}
html.billi-desktop-site body.billi-app .plan-summary .plan-copy{width:100%!important;min-width:0!important}
html.billi-desktop-site body.billi-app .plan-summary .plan-copy strong{font-size:22px!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
html.billi-desktop-site body.billi-app .plan-summary .plan-copy span{font-size:12px!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
html.billi-desktop-site body.billi-app .plan-summary>.btn{width:100%!important;min-width:0!important}

/* Invoice history: preserve View + Edit as two complete controls at every
   desktop/tablet width, including Chrome Desktop Site. */
@media (min-width:761px){
  body.billi-app .responsive-table td:last-child{width:196px!important;min-width:196px!important;padding-left:10px!important;padding-right:10px!important}
  body.billi-app .invoice-list-actions{width:178px!important;max-width:178px!important;grid-template-columns:repeat(2,85px)!important;gap:8px!important}
  body.billi-app .invoice-list-actions .btn{width:85px!important;min-width:85px!important;max-width:85px!important;padding:8px 7px!important}
}
html.billi-desktop-site body.billi-app .responsive-table td:last-child{width:196px!important;min-width:196px!important}

@media(max-width:760px){
  .profile-photo-row{align-items:flex-start!important}
  .profile-photo-actions{width:100%!important}
  .profile-photo-actions .photo-upload-label,.profile-photo-actions .remove-logo-button{flex:1 1 180px!important}
  .b70-photo-actions,.v70-invoice-photo-actions{grid-template-columns:1fr!important}
}

.b70-photo-actions form{min-width:0!important}.b70-photo-actions .b70-photo-change{position:relative!important;overflow:hidden!important;cursor:pointer!important}.b70-photo-actions .b70-photo-change input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important}

/* ================================================================
   BILLI PRO V91 — MOBILE ACTION + PROFILE MENU POLISH
   ================================================================ */
/* Invoice delete is a full-width grid item; keep its content centered
   just like every other invoice action on mobile. */
@media(max-width:900px){
  body.v63-invoice-body .v63-delete{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
  }
  body.v63-invoice-body .v63-delete .v63-action{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:8px!important;
  }
  body.v63-invoice-body .v63-delete .v63-action>span:last-child{
    min-width:0!important;
    text-align:center!important;
  }
}

/* Account-menu profile-photo control: icon + label must stay on one clean,
   compact horizontal row. The file input remains invisible over the label. */
.b70-photo-actions form{width:100%!important;min-width:0!important}
.b70-photo-actions .b70-photo-change{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:44px!important;
  padding:10px 12px!important;
  box-sizing:border-box!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-align:center!important;
}
.b70-photo-actions .b70-photo-change svg{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  display:block!important;
  margin:0!important;
}
.b70-photo-actions .b70-photo-change span{
  display:block!important;
  min-width:0!important;
  line-height:1.2!important;
}
@media(max-width:760px){
  .b70-photo-actions{
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:7px 4px 9px!important;
  }
  .b70-photo-actions form,
  .b70-photo-actions .b70-photo-change,
  .b70-photo-actions button{width:100%!important;min-width:0!important}
  .b70-photo-actions .b70-photo-change{justify-content:center!important}
}

/* ================================================================
   BILLI PRO V92 — DEFINITIVE DELETE ACTION CENTERING
   The delete form/button must center the complete icon + label group,
   independent of flex/grid inheritance or browser button defaults.
   ================================================================ */
body.v63-invoice-body .v63-delete{
  display:grid!important;
  place-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
body.v63-invoice-body .v63-delete .v63-action{
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  grid-template-rows:1fr!important;
  place-content:center!important;
  place-items:center!important;
  justify-content:center!important;
  align-content:center!important;
  align-items:center!important;
  justify-items:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:10px 16px!important;
  gap:10px!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
body.v63-invoice-body .v63-delete .v63-action .v63-action-icon{
  grid-column:1!important;
  grid-row:1!important;
  margin:0!important;
}
body.v63-invoice-body .v63-delete .v63-action>span:last-child{
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  justify-self:center!important;
  align-self:center!important;
}
body.v63-invoice-body .v63-delete .v63-action>span:last-child b{
  width:auto!important;
  margin:0!important;
  text-align:center!important;
}

/* ================================================================
   BILLI PRO V93 — SPACING, SEARCH + ACCOUNT PHOTO FINAL POLISH
   ================================================================ */

/* Real global search: the old element was only a link to Invoices. */
.b70-topbar-search{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:min(560px,52vw)!important;
  height:42px!important;
  padding:0 10px!important;
  border:1px solid #dce3ec!important;
  border-radius:11px!important;
  background:#fff!important;
  box-sizing:border-box!important;
  margin:0!important;
}
.b70-topbar-search button{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  display:grid!important;place-items:center!important;
  padding:0!important;border:0!important;background:transparent!important;
  color:#718096!important;border-radius:8px!important;cursor:pointer!important;
}
.b70-topbar-search button:hover{background:#f1f5ff!important;color:#2457d6!important}
.b70-topbar-search input{
  min-width:0!important;flex:1 1 auto!important;width:100%!important;height:38px!important;
  padding:0!important;border:0!important;outline:0!important;background:transparent!important;
  color:#172033!important;font:650 13px/1.2 inherit!important;
}
.b70-topbar-search input::placeholder{color:#7b8799!important;opacity:1!important}
.b70-topbar-search:focus-within{border-color:#9db4e6!important;box-shadow:0 0 0 3px rgba(36,87,214,.08)!important}

/* Account menu: controlled width and predictable spacing on every viewport. */
.b70-account-menu{
  box-sizing:border-box!important;
  width:min(360px,calc(100vw - 24px))!important;
  padding:12px!important;
  border-radius:18px!important;
}
.b70-account-menu .b70-account-head{
  display:flex!important;align-items:center!important;gap:12px!important;
  padding:8px 8px 12px!important;margin:0!important;
}
.b70-account-menu .b70-account-head>div{min-width:0!important}
.b70-account-menu .b70-account-head strong{font-size:15px!important;line-height:1.2!important}
.b70-account-menu .b70-account-head small{display:block!important;margin-top:4px!important;font-size:12px!important;line-height:1.2!important}
.b70-photo-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:8px 0 12px!important;
  margin:0!important;
  border-top:1px solid #edf0f4!important;
  border-bottom:1px solid #edf0f4!important;
}
.b70-photo-actions form{width:100%!important;min-width:0!important;margin:0!important}
.b70-photo-actions .b70-photo-change,
.b70-photo-actions .b70-photo-remove{
  width:100%!important;min-width:0!important;min-height:48px!important;
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;padding:10px 9px!important;
  border:1px solid #dbe3ee!important;border-radius:11px!important;
  background:#f7f9fd!important;color:#2457d6!important;
  font:850 12px/1.2 inherit!important;text-decoration:none!important;
  text-align:center!important;white-space:normal!important;cursor:pointer!important;
}
.b70-photo-actions .b70-photo-change svg{width:20px!important;height:20px!important;flex:0 0 20px!important}
.b70-photo-actions .b70-photo-remove{
  color:#b52e35!important;background:#fff5f5!important;border-color:#f1cccc!important;
}
.b70-photo-actions .b70-photo-remove:hover{background:#ffecec!important}
.b70-photo-actions .b70-photo-remove>span{display:inline!important}
.b70-account-menu>a{min-height:48px!important;box-sizing:border-box!important;padding:12px 10px!important}

/* Invoice actions: equal tracks, real gaps, and full-width row controls. */
@media(max-width:760px){
  body.v63-invoice-body .v63-content{padding:18px 14px 36px!important}
  body.v63-invoice-body .v63-page-head{width:100%!important;margin:0 0 12px!important}
  body.v63-invoice-body .v63-back{
    display:flex!important;width:100%!important;min-width:0!important;min-height:58px!important;
    box-sizing:border-box!important;align-items:center!important;justify-content:center!important;
    margin:0!important;padding:12px 14px!important;border-radius:16px!important;
    text-align:center!important;
  }
  body.v63-invoice-body .v63-actions{
    width:100%!important;display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;margin:0 0 18px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action{
    width:100%!important;min-width:0!important;min-height:76px!important;
    box-sizing:border-box!important;padding:10px 10px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:8px!important;text-align:center!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action .v63-action-icon{flex:0 0 auto!important}
  body.v63-invoice-body .v63-actions>.v63-action>span:last-child{min-width:0!important;max-width:100%!important;text-align:center!important}
  body.v63-invoice-body .v63-actions>.v63-action b{font-size:13px!important;line-height:1.2!important}
  body.v63-invoice-body .v63-actions>.v63-action small{display:none!important}
  body.v63-invoice-body .v63-actions>.v63-return-action{grid-column:1/-1!important;grid-row:auto!important}
  body.v63-invoice-body .v63-actions>.v63-delete{
    grid-column:1/-1!important;grid-row:auto!important;
    width:100%!important;min-width:0!important;display:block!important;
    margin:0!important;
  }
  body.v63-invoice-body .v63-actions>.v63-delete .v63-action{
    width:100%!important;min-width:0!important;min-height:70px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    flex-direction:row!important;gap:10px!important;text-align:center!important;
  }
  body.v63-invoice-body .v63-actions>.v63-delete .v63-action>span:last-child{
    width:auto!important;max-width:calc(100% - 50px)!important;flex:0 1 auto!important;
    text-align:center!important;
  }
  body.v63-invoice-body .v63-actions>.v63-delete .v63-action b{font-size:14px!important}
}

@media(min-width:761px){
  body.v63-invoice-body .v63-actions{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action,
  body.v63-invoice-body .v63-actions>.v63-delete .v63-action{
    width:100%!important;min-width:0!important;min-height:76px!important;
    box-sizing:border-box!important;
  }
}

/* Mobile account menu: keep the photo controls compact and side-by-side. */
@media(max-width:760px){
  body.billi-app>nav.b72-global-nav .b70-account-menu,
  body.billi-app .b70-mobile-tools .b70-account-menu{
    width:min(360px,calc(100vw - 24px))!important;
    right:0!important;top:49px!important;
    padding:12px!important;
  }
  .b70-photo-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .b70-photo-actions .b70-photo-change,.b70-photo-actions .b70-photo-remove{min-height:50px!important;font-size:11px!important}
}

/* Search results page */
.b93-search-form{padding:16px!important;margin-bottom:16px!important}
.b93-search-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px;align-items:center}
.b93-search-row input{width:100%;height:48px;border:1px solid #dce3ec;border-radius:11px;padding:0 14px;font:650 14px/1.2 inherit;box-sizing:border-box;outline:0;background:#fff}
.b93-search-row input:focus{border-color:#9db4e6;box-shadow:0 0 0 3px rgba(36,87,214,.08)}
.b93-search-summary{display:flex;align-items:baseline;gap:7px;margin:0 2px 12px;color:#718096;font-size:13px}.b93-search-summary strong{color:#172033;font-size:15px}
.b93-results{align-items:start;gap:12px}.b93-results .card{overflow:hidden}
.b93-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 4px;border-top:1px solid #edf0f4;color:#172033;text-decoration:none!important;min-width:0}
.b93-result-row:first-of-type{border-top:0}.b93-result-row>span{min-width:0}.b93-result-row strong{display:block;font-size:13px;line-height:1.25}.b93-result-row small{display:block;margin-top:4px;color:#718096;font-size:11px;line-height:1.35}.b93-result-row>b{white-space:nowrap;font-size:13px}.b93-products-card{grid-column:1/-1}
@media(max-width:760px){.b93-search-row{grid-template-columns:1fr}.b93-search-row .btn{width:100%;min-height:48px}.b93-results{grid-template-columns:1fr!important}.b93-products-card{grid-column:auto}}


/* ================================================================
   BILLI PRO V94 — GLOBAL ACCOUNT + INVOICE HEADER CONSISTENCY
   One profile-photo control system across every authenticated page.
   ================================================================ */
.v65-search-form{
  display:flex!important;align-items:center!important;gap:9px!important;
  width:min(430px,48vw)!important;height:40px!important;padding:0 13px!important;
  border:1px solid #dce3ec!important;border-radius:11px!important;background:#fff!important;
  box-sizing:border-box!important;color:#718096!important;
}
.v65-search-form button{
  width:24px!important;height:24px!important;display:grid!important;place-items:center!important;
  flex:0 0 24px!important;border:0!important;background:transparent!important;color:inherit!important;
  padding:0!important;cursor:pointer!important;border-radius:7px!important;
}
.v65-search-form button:hover{background:#f1f5ff!important;color:#2457d6!important}
.v65-search-form input{
  min-width:0!important;flex:1 1 auto!important;width:100%!important;height:36px!important;
  padding:0!important;border:0!important;outline:0!important;background:transparent!important;
  color:#172033!important;font:650 13px/1.2 inherit!important;
}
.v65-search-form input::placeholder{color:#7b8799!important;opacity:1!important}
.v65-search-form:focus-within{border-color:#9db4e6!important;box-shadow:0 0 0 3px rgba(36,87,214,.08)!important}

/* Invoice's dedicated shell uses the exact same account-menu geometry as
   the standard BILLI workspace. */
.v63-account-wrap{position:relative!important}
.v63-account-wrap .b70-account-menu{
  position:absolute!important;right:0!important;top:calc(100% + 10px)!important;
  width:min(360px,calc(100vw - 24px))!important;max-height:calc(100dvh - 88px)!important;
  overflow:auto!important;box-sizing:border-box!important;padding:12px!important;
  border-radius:18px!important;z-index:2500!important;
}
.v63-mobile-topbar{position:sticky!important;z-index:1200!important}
.v63-mobile-topbar .v65-mobile-avatar-btn{position:relative!important}
.v63-mobile-topbar .b70-account-menu{
  position:absolute!important;right:0!important;top:54px!important;
  width:min(360px,calc(100vw - 20px))!important;max-height:calc(100dvh - 84px)!important;
  overflow:auto!important;box-sizing:border-box!important;padding:12px!important;
  border-radius:18px!important;z-index:2500!important;
}
.v63-mobile-topbar .b70-account-menu .b70-account-head,
.v63-account-wrap .b70-account-menu .b70-account-head{padding:8px 8px 12px!important;margin:0!important}
.v63-mobile-topbar .b70-photo-actions,
.v63-account-wrap .b70-photo-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.v63-mobile-topbar .b70-photo-actions .b70-photo-change,
.v63-mobile-topbar .b70-photo-actions .b70-photo-remove,
.v63-account-wrap .b70-photo-actions .b70-photo-change,
.v63-account-wrap .b70-photo-actions .b70-photo-remove{
  min-height:48px!important;width:100%!important;font-size:12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;box-sizing:border-box!important;
}

/* The invoice back control must never be clipped by the mobile header and
   must remain a normal first element in document flow. */
@media(max-width:1000px){
  body.v63-invoice-body .v63-main{min-width:0!important;overflow:visible!important}
  body.v63-invoice-body .v63-content{position:relative!important;z-index:1!important}
  body.v63-invoice-body .v63-page-head{position:relative!important;z-index:2!important;display:block!important;visibility:visible!important;overflow:visible!important}
  body.v63-invoice-body .v63-page-head .v63-back{position:relative!important;z-index:3!important;visibility:visible!important;opacity:1!important}
}
@media(max-width:760px){
  .v65-search-form{display:none!important}
  body.v63-invoice-body .v63-content{padding-top:18px!important}
  body.v63-invoice-body .v63-page-head{margin:0 0 12px!important}
  body.v63-invoice-body .v63-page-head .v63-back{
    width:100%!important;min-height:58px!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important;padding:12px 14px!important;text-align:center!important;
  }
}
@media(max-width:430px){
  .v63-mobile-topbar .b70-account-menu{right:-2px!important;width:min(360px,calc(100vw - 16px))!important}
}

/* ================================================================
   BILLI PRO V95 — MOBILE SEARCH PARITY
   Same search function on desktop and mobile, without crowding the blue app bar.
   ================================================================ */
.b70-mobile-searchbar{display:none!important}
@media(max-width:760px){
  .b70-mobile-searchbar{
    display:flex!important;align-items:center!important;gap:8px!important;
    width:100%!important;height:48px!important;box-sizing:border-box!important;
    margin:0 0 16px!important;padding:0 10px!important;
    border:1px solid #dce3ec!important;border-radius:13px!important;
    background:#fff!important;color:#718096!important;
    box-shadow:0 5px 16px rgba(23,32,51,.05)!important;
  }
  .b70-mobile-searchbar button{
    width:30px!important;height:30px!important;flex:0 0 30px!important;
    display:grid!important;place-items:center!important;padding:0!important;
    border:0!important;border-radius:8px!important;background:transparent!important;
    color:#718096!important;cursor:pointer!important;
  }
  .b70-mobile-searchbar button:active,.b70-mobile-searchbar button:focus-visible{
    background:#f1f5ff!important;color:#2457d6!important;
  }
  .b70-mobile-searchbar button svg{
    width:19px!important;height:19px!important;display:block!important;
    fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;
    stroke-linecap:round!important;stroke-linejoin:round!important;
  }
  .b70-mobile-searchbar input{
    min-width:0!important;flex:1 1 auto!important;width:100%!important;height:40px!important;
    padding:0!important;border:0!important;outline:0!important;background:transparent!important;
    color:#172033!important;font:650 13px/1.2 inherit!important;
  }
  .b70-mobile-searchbar input::placeholder{color:#7b8799!important;opacity:1!important}
  .b70-mobile-searchbar:focus-within{
    border-color:#9db4e6!important;box-shadow:0 0 0 3px rgba(36,87,214,.08),0 5px 16px rgba(23,32,51,.05)!important;
  }
  body.v63-invoice-body .b70-mobile-searchbar{
    margin:0 0 14px!important;
  }
  body.v63-invoice-body .v63-content{
    padding-top:88px!important;
  }
}
@media(max-width:420px){
  .b70-mobile-searchbar{height:46px!important;margin-bottom:14px!important;padding:0 9px!important}
  .b70-mobile-searchbar input{font-size:12px!important}
}


/* ================================================================
   BILLI PRO V97 — GLOBAL MOBILE/desktop ACCOUNT + SEARCH PARITY
   Final overrides intentionally live at EOF so historical CSS cannot
   re-hide the profile controls or change their mobile geometry.
   ================================================================ */
.b70-photo-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
.b70-photo-actions form{width:100%!important;min-width:0!important;margin:0!important}
.b70-photo-actions .b70-photo-change,
.b70-photo-actions .b70-photo-remove{
  width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  height:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.b70-photo-actions .b70-photo-change{
  gap:8px!important;
  padding:10px 12px!important;
  white-space:normal!important;
}
.b70-photo-actions .b70-photo-remove{
  gap:7px!important;
  padding:10px 12px!important;
}
@media(max-width:760px){
  .b70-account-menu{
    width:min(360px,calc(100vw - 20px))!important;
    padding:14px!important;
    border-radius:18px!important;
  }
  .b70-account-menu .b70-account-head{
    padding:8px 8px 14px!important;
    margin:0!important;
  }
  .b70-photo-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    padding:12px 0 14px!important;
  }
  .b70-photo-actions .b70-photo-change,
  .b70-photo-actions .b70-photo-remove{
    min-height:58px!important;
    font-size:12px!important;
    line-height:1.25!important;
  }
  .b70-photo-actions .b70-photo-change svg{
    width:21px!important;height:21px!important;flex:0 0 21px!important;
  }
  .b70-account-menu>a{
    min-height:52px!important;
    padding:13px 10px!important;
  }
}
@media(max-width:390px){
  .b70-account-menu{width:calc(100vw - 16px)!important;padding:12px!important}
  .b70-photo-actions{gap:8px!important}
  .b70-photo-actions .b70-photo-change,
  .b70-photo-actions .b70-photo-remove{padding-left:8px!important;padding-right:8px!important;font-size:11px!important}
}

/* V96 mobile search: one real, full-width search field on every standard
   authenticated page, immediately below the blue app bar. */
@media(max-width:760px){
  body.billi-app>main.container .b70-mobile-searchbar{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    margin:0 0 18px!important;
    box-sizing:border-box!important;
  }
}


/* ================================================================
   BILLI PRO V97 — ROOT-CAUSE CACHE + GLOBAL ACCOUNT PARITY REPAIR
   ================================================================ */
/* A profile action row is a two-control component whenever an avatar exists. */
.b70-photo-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  width:100%!important;
  align-items:stretch!important;
}
.b70-photo-actions>form{display:block!important;width:100%!important;min-width:0!important;margin:0!important}
.b70-photo-actions .b70-photo-change,
.b70-photo-actions .b70-photo-remove{
  width:100%!important;min-width:0!important;min-height:54px!important;height:100%!important;
  box-sizing:border-box!important;display:flex!important;align-items:center!important;
  justify-content:center!important;text-align:center!important;margin:0!important;
  padding:10px 12px!important;border-radius:11px!important;line-height:1.25!important;
}
.b70-photo-actions .b70-photo-change span,
.b70-photo-actions .b70-photo-remove span{min-width:0!important;max-width:100%!important;text-align:center!important}
.b70-photo-actions .b70-photo-remove{color:#b52e35!important;background:#fff5f5!important;border-color:#f1cccc!important}
@media(max-width:760px){
  .b70-account-menu{width:min(360px,calc(100vw - 16px))!important}
  .b70-photo-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;padding:12px 0 14px!important}
  .b70-photo-actions .b70-photo-change,.b70-photo-actions .b70-photo-remove{min-height:58px!important;font-size:12px!important}
}
@media(max-width:350px){
  .b70-photo-actions{gap:7px!important}
  .b70-photo-actions .b70-photo-change,.b70-photo-actions .b70-photo-remove{padding-left:7px!important;padding-right:7px!important;font-size:11px!important}
}

/* Mobile search is a first-class workspace control, directly below the app bar. */
@media(max-width:760px){
  body.billi-app>main.container .b70-mobile-searchbar{
    display:flex!important;width:100%!important;min-width:0!important;height:48px!important;
    margin:0 0 18px!important;box-sizing:border-box!important;
  }
  body.v63-invoice-body .v63-content .b70-mobile-searchbar{
    display:flex!important;width:100%!important;height:48px!important;
    margin:0 0 14px!important;box-sizing:border-box!important;
  }
}

/* Public landing page must NOT receive authenticated workspace chrome. */
body.landing-page .b70-topbar,
body.landing-page .b70-mobile-tools{display:none!important}

/* ================================================================
   BILLI PRO V99 — TRUE CROSS-DEVICE PARITY / SPACING FINAL LAYER
   ================================================================ */
.b70-account-menu{
  width:360px!important;
  max-width:calc(100vw - 20px)!important;
  padding:14px!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
}
.b70-account-menu .b70-account-head{
  display:flex!important;align-items:center!important;gap:14px!important;
  padding:8px 8px 14px!important;margin:0!important;
  min-width:0!important;
}
.b70-account-menu .b70-account-head .b70-avatar{
  width:52px!important;height:52px!important;min-width:52px!important;
  flex:0 0 52px!important;border-radius:50%!important;overflow:hidden!important;
}
.b70-account-menu .b70-account-head strong{
  display:block!important;font-size:17px!important;line-height:1.2!important;
}
.b70-account-menu .b70-account-head small{
  display:block!important;margin-top:5px!important;font-size:12px!important;
  line-height:1.25!important;color:#718096!important;white-space:nowrap!important;
}
.b70-photo-actions{
  width:100%!important;display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;padding:12px 0 14px!important;
  margin:0!important;align-items:stretch!important;
  border-top:1px solid #edf0f4!important;border-bottom:1px solid #edf0f4!important;
}
.b70-photo-actions>form{display:block!important;width:100%!important;min-width:0!important;margin:0!important}
.b70-photo-actions .b70-photo-change,
.b70-photo-actions .b70-photo-remove{
  width:100%!important;min-width:0!important;height:58px!important;min-height:58px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;margin:0!important;padding:10px 12px!important;
  border-radius:11px!important;text-align:center!important;line-height:1.25!important;
  white-space:normal!important;
}
.b70-photo-actions .b70-photo-change span,
.b70-photo-actions .b70-photo-remove span{
  display:block!important;min-width:0!important;max-width:100%!important;text-align:center!important;
}
.b70-photo-actions .b70-photo-change svg{width:21px!important;height:21px!important;flex:0 0 21px!important}
.b70-photo-actions .b70-photo-remove{color:#b52e35!important;background:#fff5f5!important;border-color:#f1cccc!important}
.b70-photo-actions .b70-photo-remove[hidden]{display:none!important}
.b70-account-menu>a{
  width:100%!important;min-height:54px!important;padding:13px 10px!important;
  display:flex!important;align-items:center!important;gap:12px!important;
  box-sizing:border-box!important;
}
.b70-account-menu>a .b70-nav-icon{width:24px!important;min-width:24px!important;display:grid!important;place-items:center!important}
.b70-account-menu>a.danger{margin-top:6px!important;padding-top:14px!important;border-top:1px solid #edf0f4!important}
@media(max-width:760px){
  .b70-account-menu{width:min(360px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important;padding:14px!important}
  .b70-account-menu .b70-account-head{padding:8px 8px 14px!important;gap:14px!important}
  .b70-account-menu .b70-account-head .b70-avatar{width:52px!important;height:52px!important;min-width:52px!important;flex-basis:52px!important}
  .b70-account-menu .b70-account-head strong{font-size:17px!important}
  .b70-photo-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .b70-photo-actions .b70-photo-change,.b70-photo-actions .b70-photo-remove{height:58px!important;min-height:58px!important;font-size:12px!important}
  .b70-account-menu>a{min-height:54px!important;font-size:14px!important}
}
@media(max-width:390px){
  .b70-account-menu{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;padding:12px!important}
  .b70-photo-actions{gap:8px!important}
  .b70-photo-actions .b70-photo-change,.b70-photo-actions .b70-photo-remove{padding-left:8px!important;padding-right:8px!important;font-size:11px!important}
}
/* V99: mobile search is always visible in the workspace content, never removed
   by historical desktop-search rules. */
@media(max-width:760px){
  body.billi-app>main.container .b70-mobile-searchbar,
  body.v63-invoice-body .v63-content .b70-mobile-searchbar{
    display:flex!important;visibility:visible!important;opacity:1!important;
  }
}

/* ================================================================
   BILLI PRO V99 — CROSS-DEVICE PHYSICAL-MOBILE PARITY + FINAL SPACING
   ================================================================ */
/* Chrome Desktop Site can expose a desktop CSS viewport on a physical phone.
   JS adds .billi-physical-mobile in that situation. Invoice detail must then
   use the same mobile shell as every other BILLI page. */
html.billi-physical-mobile body.v63-invoice-body .v63-app-shell{
  display:block!important;width:100%!important;min-height:0!important;overflow:visible!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-sidebar{
  display:none!important;position:fixed!important;transform:translateX(-110%)!important;
  visibility:hidden!important;opacity:0!important;width:min(320px,88vw)!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-app-shell.v63-menu-open .v63-sidebar{
  display:block!important;transform:translateX(0)!important;visibility:visible!important;opacity:1!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-desktop-topbar{display:none!important}
html.billi-physical-mobile body.v63-invoice-body .v63-mobile-topbar{
  display:flex!important;position:fixed!important;left:0!important;right:0!important;top:0!important;
  width:100%!important;height:68px!important;z-index:2200!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-main{
  display:block!important;width:100%!important;min-width:0!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-content{
  width:100%!important;max-width:none!important;margin:0!important;
  padding:88px 14px 36px!important;box-sizing:border-box!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-actions{
  width:100%!important;display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-return-action,
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-delete{
  grid-column:1/-1!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action{
  width:100%!important;min-width:0!important;min-height:76px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;text-align:center!important;
}
/* Standard mobile pages: keep the search close to the blue app bar. */
@media(max-width:760px){
  body.billi-app>main.container{padding-top:14px!important}
  body.billi-app>main.container .b70-mobile-searchbar{margin-top:0!important;margin-bottom:18px!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools{gap:8px!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools button{width:44px!important;height:44px!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-avatar{width:40px!important;height:40px!important}
}
/* Keep both photo controls identical and available in every account menu. */
.b70-photo-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.b70-photo-actions .b70-photo-change,.b70-photo-actions .b70-photo-remove{
  width:100%!important;height:58px!important;min-height:58px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;text-align:center!important;
}
.b70-photo-actions .b70-photo-remove[hidden]{display:flex!important}
.b70-photo-actions .b70-photo-remove:disabled{opacity:.55;cursor:not-allowed}

/* V99 physical-phone mode also applies to standard authenticated pages when
   Android Chrome is in Desktop Site mode. This prevents a phone from receiving
   a scaled desktop sidebar while the same phone's other pages are mobile. */
html.billi-physical-mobile body.billi-app>nav.b72-global-nav{
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;
  width:100%!important;height:68px!important;min-height:68px!important;max-height:68px!important;
  padding:8px 16px!important;display:flex!important;flex-direction:row!important;
  align-items:center!important;background:#2457d6!important;color:#fff!important;
  border:0!important;box-shadow:0 6px 22px rgba(36,87,214,.18)!important;overflow:visible!important;
  z-index:2200!important;
}
html.billi-physical-mobile body.billi-app>nav.b72-global-nav .menu-toggle{display:grid!important;order:1!important}
html.billi-physical-mobile body.billi-app>nav.b72-global-nav .logo{
  display:inline-flex!important;order:2!important;width:auto!important;margin:0!important;padding:0!important;
  color:#fff!important;font-size:25px!important;
}
html.billi-physical-mobile body.billi-app>nav.b72-global-nav .navlinks{position:fixed!important}
html.billi-physical-mobile body.billi-app>nav.b72-global-nav .b70-mobile-tools{display:flex!important;order:3!important;margin-left:auto!important}
html.billi-physical-mobile body.billi-app .b70-topbar{display:none!important}
html.billi-physical-mobile body.billi-app>main.container{
  width:100%!important;max-width:none!important;margin:0!important;padding:14px 16px 40px!important;
  box-sizing:border-box!important;
}
html.billi-physical-mobile body.billi-app>main.container .b70-mobile-searchbar{
  display:flex!important;visibility:visible!important;opacity:1!important;
}

/* ================================================================
   BILLI PRO V100 — PROFILE + NOTIFICATION RELIABILITY LAYER
   ================================================================ */
.b70-account-menu[hidden],.b100-notification-panel[hidden]{display:none!important}
.b100-notification-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 20px));background:#fff;border:1px solid #dce4ee;border-radius:16px;padding:12px;box-shadow:0 22px 55px rgba(23,32,51,.18);z-index:2600;box-sizing:border-box;color:#172033}
.b100-notification-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 11px;border-bottom:1px solid #edf0f4}
.b100-notification-head strong{font-size:16px;line-height:1.2}
.b100-notification-close{width:32px;height:32px;border:0;border-radius:9px;background:#f4f7fb;color:#536177;font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer}
.b100-notification-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:16px}
.b100-notification-check{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid #d9e5f4;background:#f3f7ff;color:#2457d6;font-size:22px;font-weight:900;margin-bottom:4px}
.b100-notification-empty strong{font-size:14px}
.b100-notification-empty small{font-size:12px;line-height:1.45;color:#718096}
.b70-account-menu .b70-photo-change input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.b70-account-menu .b70-photo-change{cursor:pointer!important}
.b63-account-wrap .b63-notification-btn{border:0;background:transparent;color:inherit;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;cursor:pointer;padding:0}
.b63-account-wrap .b63-notification-btn:hover{background:#f1f5ff;color:#2457d6}
.b63-account-wrap .b63-notification-btn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v63-mobile-topbar .b100-notification-panel{right:0;top:calc(100% + 8px)}
@media(max-width:760px){
  body.billi-app>nav.b72-global-nav .b100-notification-panel{right:-4px;width:min(340px,calc(100vw - 16px));top:50px}
  body.v63-invoice-body .v63-mobile-topbar .b100-notification-panel{right:0;width:min(340px,calc(100vw - 16px));top:54px}
}
@media(max-width:390px){
  body.billi-app>nav.b72-global-nav .b100-notification-panel{right:-2px;width:calc(100vw - 12px)}
}
.v63-account-controls{display:flex;align-items:center;gap:4px}
.v63-account-controls .v63-account{margin:0!important}
@media(max-width:1000px){.v63-account-controls{display:none!important}}

/* ================================================================
   BILLI PRO V101 — FLOATING UI / TRUE CROSS-VIEWPORT GEOMETRY
   Root-cause repair: account and notification panels are portalled to
   <body> and positioned from their trigger. They can no longer inherit
   the header/nav flex geometry, clipping, or left-edge overflow.
   ================================================================ */
.billi-floating-panel{
  position:fixed!important;
  inset:auto!important;
  box-sizing:border-box!important;
  margin:0!important;
  z-index:10000!important;
  max-width:calc(100vw - 24px)!important;
  overflow:hidden!important;
}
.billi-floating-panel.b70-account-menu{
  width:360px!important;
  max-width:calc(100vw - 24px)!important;
  padding:14px!important;
  border:1px solid #dce4ee!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 24px 65px rgba(23,32,51,.22)!important;
}
.billi-floating-panel.b100-notification-panel{
  width:340px!important;
  max-width:calc(100vw - 24px)!important;
  padding:12px!important;
  border:1px solid #dce4ee!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 24px 65px rgba(23,32,51,.20)!important;
}
.billi-floating-panel.b70-account-menu .b70-account-head{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  padding:6px 8px 14px!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.billi-floating-panel.b70-account-menu .b70-account-head .b70-avatar{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  flex:0 0 52px!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
.billi-floating-panel.b70-account-menu .b70-account-head .b70-avatar-photo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.billi-floating-panel.b70-account-menu .b70-account-head strong{
  display:block!important;
  font-size:17px!important;
  line-height:1.2!important;
}
.billi-floating-panel.b70-account-menu .b70-account-head small{
  display:block!important;
  margin-top:5px!important;
  font-size:12px!important;
  line-height:1.25!important;
  color:#718096!important;
  white-space:nowrap!important;
}
.billi-floating-panel.b70-account-menu .b70-photo-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  width:100%!important;
  padding:12px 0 14px!important;
  margin:0!important;
  border-top:1px solid #edf0f4!important;
  border-bottom:1px solid #edf0f4!important;
  align-items:stretch!important;
}
.billi-floating-panel.b70-account-menu .b70-photo-actions>form{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-change,
.billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-remove{
  width:100%!important;
  min-width:0!important;
  height:58px!important;
  min-height:58px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:9px 10px!important;
  border:1px solid #dbe3ee!important;
  border-radius:11px!important;
  background:#f7f9fd!important;
  color:#2457d6!important;
  font:850 12px/1.25 inherit!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:hidden!important;
  cursor:pointer!important;
}
.billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-change svg{
  width:21px!important;height:21px!important;min-width:21px!important;flex:0 0 21px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-remove{
  color:#b52e35!important;
  background:#fff5f5!important;
  border-color:#f1cccc!important;
}
.billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-remove:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
}
.billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-change input[type=file]{
  position:absolute!important;
  width:1px!important;height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.billi-floating-panel.b70-account-menu>a{
  width:100%!important;
  min-height:54px!important;
  padding:13px 10px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  border-radius:10px!important;
}
.billi-floating-panel.b70-account-menu>a .b70-nav-icon{
  width:24px!important;min-width:24px!important;height:24px!important;
  display:grid!important;place-items:center!important;flex:0 0 24px!important;
}
.billi-floating-panel.b70-account-menu>a .b70-nav-icon svg{
  width:20px!important;height:20px!important;fill:none!important;
  stroke:currentColor!important;stroke-width:1.9!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.billi-floating-panel.b70-account-menu>a.danger{
  margin-top:6px!important;
  padding-top:14px!important;
  border-top:1px solid #edf0f4!important;
  color:#b52e35!important;
}
.billi-floating-panel.b100-notification-panel .b100-notification-head{
  min-height:38px!important;
  box-sizing:border-box!important;
}
.billi-floating-panel.b100-notification-panel .b100-notification-empty{
  min-height:150px!important;
}

@media(max-width:760px){
  .billi-floating-panel.b70-account-menu{
    width:min(360px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    padding:14px!important;
  }
  .billi-floating-panel.b100-notification-panel{
    width:min(340px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
  }
}
@media(max-width:390px){
  .billi-floating-panel.b70-account-menu{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:12px!important}
  .billi-floating-panel.b70-account-menu .b70-photo-actions{gap:8px!important}
  .billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-change,
  .billi-floating-panel.b70-account-menu .b70-photo-actions .b70-photo-remove{font-size:11px!important;padding-left:7px!important;padding-right:7px!important}
  .billi-floating-panel.b100-notification-panel{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important}
}

/* Standard mobile app bar: evenly balanced controls on every narrow viewport. */
@media(max-width:760px){
  body.billi-app>nav.b72-global-nav .b70-mobile-tools{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:8px!important;min-width:0!important;
  }
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-mobile-bell,
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-mobile-avatar-btn{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    display:grid!important;place-items:center!important;padding:0!important;border-radius:11px!important;
  }
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-mobile-bell svg{width:23px!important;height:23px!important}
  body.billi-app>nav.b72-global-nav .b70-mobile-tools .b70-mobile-avatar-btn .b70-avatar{width:40px!important;height:40px!important}
}

/* Invoice mobile header: same control geometry as the standard workspace. */
@media(max-width:760px){
  body.v63-invoice-body .v63-mobile-topbar{
    display:flex!important;align-items:center!important;width:100%!important;
    box-sizing:border-box!important;overflow:visible!important;
  }
  body.v63-invoice-body .v63-mobile-right{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:7px!important;min-width:0!important;
  }
  body.v63-invoice-body .v63-mobile-right .v65-bell-btn,
  body.v63-invoice-body .v63-mobile-right .v65-mobile-avatar-btn{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    display:grid!important;place-items:center!important;padding:0!important;border-radius:11px!important;
  }
  body.v63-invoice-body .v63-mobile-right .v63-avatar{width:40px!important;height:40px!important}
}

/* V101 mobile content rhythm: search is part of the page, not the blue bar. */
@media(max-width:760px){
  body.billi-app>main.container .b70-mobile-searchbar{
    width:100%!important;min-width:0!important;height:48px!important;
    margin:0 0 18px!important;box-sizing:border-box!important;
  }
  body.v63-invoice-body .v63-content .b70-mobile-searchbar{
    width:100%!important;min-width:0!important;height:48px!important;
    margin:0 0 14px!important;box-sizing:border-box!important;
  }
}

/* V101 invoice actions: exact two-column tracks + centered full-width actions. */
@media(max-width:760px){
  body.v63-invoice-body .v63-actions{
    width:100%!important;min-width:0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;margin:0 0 20px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action,
  body.v63-invoice-body .v63-actions>.v63-delete,
  body.v63-invoice-body .v63-actions>.v63-delete .v63-action{
    width:100%!important;min-width:0!important;box-sizing:border-box!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action{
    min-height:78px!important;padding:10px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    text-align:center!important;gap:8px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-return-action,
  body.v63-invoice-body .v63-actions>.v63-delete{grid-column:1/-1!important}
  body.v63-invoice-body .v63-actions>.v63-delete .v63-action{
    min-height:74px!important;display:flex!important;align-items:center!important;
    justify-content:center!important;flex-direction:row!important;text-align:center!important;gap:10px!important;
  }
  body.v63-invoice-body .v63-actions>.v63-action>span:last-child,
  body.v63-invoice-body .v63-actions>.v63-delete .v63-action>span:last-child{
    min-width:0!important;max-width:calc(100% - 42px)!important;text-align:center!important;
  }
}

/* Tablet: preserve the same hierarchy without squeezing controls into tiny tracks. */
@media(min-width:761px) and (max-width:1199px){
  body.billi-app>nav.b72-global-nav{width:216px!important}
  body.billi-app>main.container{margin-left:216px!important;width:calc(100% - 216px)!important;padding-left:24px!important;padding-right:24px!important}
  body.billi-app .b70-topbar{margin-left:216px!important;width:calc(100% - 216px)!important;padding-left:24px!important;padding-right:24px!important}
  body.v63-invoice-body .v63-sidebar{width:216px!important;flex-basis:216px!important}
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  body.v63-invoice-body .v63-actions>.v63-return-action,
  body.v63-invoice-body .v63-actions>.v63-delete{grid-column:1/-1!important}
}

/* V101 Desktop-Site-on-phone fallback: apply the mobile search geometry even
   when Chrome exposes a wide CSS viewport for a real touch phone. */
html.billi-physical-mobile .b70-mobile-searchbar{
  display:flex!important;align-items:center!important;gap:8px!important;
  width:100%!important;min-width:0!important;height:48px!important;
  margin:0 0 18px!important;padding:0 10px!important;
  box-sizing:border-box!important;border:1px solid #dce3ec!important;
  border-radius:13px!important;background:#fff!important;color:#718096!important;
  box-shadow:0 5px 16px rgba(23,32,51,.05)!important;
}
html.billi-physical-mobile .b70-mobile-searchbar button{
  width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important;
  display:grid!important;place-items:center!important;padding:0!important;border:0!important;
  border-radius:8px!important;background:transparent!important;color:#718096!important;
}
html.billi-physical-mobile .b70-mobile-searchbar button svg{width:19px!important;height:19px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html.billi-physical-mobile .b70-mobile-searchbar input{
  min-width:0!important;flex:1 1 auto!important;width:100%!important;height:40px!important;
  padding:0!important;border:0!important;outline:0!important;background:transparent!important;
  color:#172033!important;font:650 13px/1.2 inherit!important;
}
html.billi-physical-mobile .b70-mobile-searchbar input::placeholder{color:#7b8799!important;opacity:1!important}
html.billi-physical-mobile body.v63-invoice-body .v63-content{padding:88px 14px 36px!important}
html.billi-physical-mobile body.v63-invoice-body .b70-mobile-searchbar{margin-bottom:14px!important}

/* ================================================================
   BILLI PRO V102 — INVOICE MOBILE SHELL HARD STOP
   Root-cause repair after V101 field test:
   1) A legacy .v63-app-shell::after drawer scrim could remain visible
      without the drawer being visually present, producing a grey page.
   2) Later touch/tablet CSS could override the physical-mobile fallback
      on Android Chrome Desktop Site and force the invoice into the desktop
      shell on a real phone.
   3) Invoice-specific legacy account-menu positioning could compete with
      the new body-level floating panel.
   ================================================================ */

/* The invoice drawer no longer uses the legacy pseudo-element scrim.
   The sidebar itself is the only drawer surface; this prevents a stuck
   semi-transparent layer from blanking the invoice page. */
body.v63-invoice-body .v63-app-shell.v63-menu-open::after{
  content:none!important;
  display:none!important;
  pointer-events:none!important;
}

/* Canonical floating panels must never inherit old invoice header anchoring. */
body.v63-invoice-body .billi-floating-panel.b70-account-menu,
body.v63-invoice-body .billi-floating-panel.b100-notification-panel{
  position:fixed!important;
  inset:auto!important;
  margin:0!important;
  z-index:10000!important;
  box-sizing:border-box!important;
}

/* Android Chrome Desktop Site on a physical phone: this block intentionally
   comes LAST so no earlier min-width/touch rule can switch the phone back to
   the desktop invoice shell. */
html.billi-physical-mobile body.v63-invoice-body{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-app-shell{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:100vh!important;
  overflow:visible!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-sidebar{
  display:none!important;
  position:fixed!important;
  left:0!important;
  top:68px!important;
  bottom:0!important;
  width:min(320px,88vw)!important;
  height:calc(100dvh - 68px)!important;
  transform:translateX(-105%)!important;
  visibility:hidden!important;
  opacity:1!important;
  z-index:2150!important;
  overflow-y:auto!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-app-shell.v63-menu-open .v63-sidebar{
  display:flex!important;
  transform:translateX(0)!important;
  visibility:visible!important;
  opacity:1!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-desktop-topbar{display:none!important}
html.billi-physical-mobile body.v63-invoice-body .v63-mobile-topbar{
  display:grid!important;
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:0!important;
  width:100%!important;
  height:68px!important;
  min-height:68px!important;
  max-height:68px!important;
  grid-template-columns:48px minmax(max-content,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 16px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  background:#2457d6!important;
  color:#fff!important;
  z-index:2200!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-mobile-menu{
  display:grid!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  place-items:center!important;
  z-index:2300!important;
  pointer-events:auto!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-mobile-brand{
  display:inline-flex!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  align-items:center!important;
  gap:7px!important;
  white-space:nowrap!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff!important;
  z-index:2301!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-mobile-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:max-content!important;
  margin-left:0!important;
  position:relative!important;
  z-index:2302!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-mobile-right .v65-bell-btn,
html.billi-physical-mobile body.v63-invoice-body .v63-mobile-right .v65-mobile-avatar-btn{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  flex:0 0 44px!important;
  margin:0!important;
  padding:0!important;
  pointer-events:auto!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-main{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-content{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:88px 14px 36px!important;
  box-sizing:border-box!important;
  position:relative!important;
  z-index:1!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-actions{
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  margin-bottom:20px!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action,
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-delete{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action:nth-child(1){grid-column:1!important;grid-row:1!important}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action:nth-child(2){grid-column:2!important;grid-row:1!important}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action:nth-child(3){grid-column:1/-1!important;grid-row:2!important}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action:nth-child(4){grid-column:1!important;grid-row:3!important}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action:nth-child(5){grid-column:2!important;grid-row:3!important}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action:nth-child(6){grid-column:1!important;grid-row:4!important}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-action:nth-child(7){grid-column:2!important;grid-row:4!important}
html.billi-physical-mobile body.v63-invoice-body .v63-actions>.v63-delete{grid-column:1/-1!important;grid-row:5!important;display:flex!important}
html.billi-physical-mobile body.v63-invoice-body .v63-action{
  min-height:74px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
}

/* Keep the mobile drawer readable when deliberately opened. */
html.billi-physical-mobile body.v63-invoice-body .v63-app-shell.v63-menu-open .v63-sidebar .v63-side-nav{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
}


/* ================================================================
   BILLI PRO V103 — CANONICAL INVOICE SHELL
   The invoice screen now uses the same canonical workspace shell as
   every standard authenticated page. This deliberately
   removes the legacy invoice-only header/sidebar geometry as a source of
   visual and functional drift.
   ================================================================ */
body.billi-app.v63-invoice-body > main.invoice-page{
  box-sizing:border-box!important;
  width:calc(100% - 214px)!important;
  max-width:none!important;
  margin:0 0 0 214px!important;
  padding:24px 26px 48px!important;
  min-width:0!important;
}
body.billi-app.v63-invoice-body > main.invoice-page > .v63-content{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1320px!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:0!important;
}
body.billi-app.v63-invoice-body .v63-page-head{margin:0 0 14px!important}
body.billi-app.v63-invoice-body .v63-actions{width:100%!important;min-width:0!important}
body.billi-app.v63-invoice-body .v63-invoice-card{width:100%!important;max-width:none!important;box-sizing:border-box!important}

@media(min-width:761px) and (max-width:1199px){
  body.billi-app.v63-invoice-body > main.invoice-page{
    width:calc(100% - 216px)!important;
    margin-left:216px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
}

@media(max-width:760px){
  /* Keep the mobile shell dimensions aligned with the canonical workspace. */
  body.billi-app.v63-invoice-body > main.invoice-page{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:14px 14px 36px!important;
  }
  body.billi-app.v63-invoice-body > main.invoice-page > .v63-content{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  body.billi-app.v63-invoice-body .b70-mobile-searchbar{
    width:100%!important;
    margin:0 0 14px!important;
  }
  body.billi-app.v63-invoice-body .v63-page-head{margin:0 0 10px!important}
  body.billi-app.v63-invoice-body .v63-back{width:100%!important;min-height:46px!important;box-sizing:border-box!important}
  body.billi-app.v63-invoice-body .v63-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;margin-bottom:18px!important}
  body.billi-app.v63-invoice-body .v63-actions>.v63-action,
  body.billi-app.v63-invoice-body .v63-delete,
  body.billi-app.v63-invoice-body .v63-delete .v63-action{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.billi-app.v63-invoice-body .v63-delete{grid-column:1/-1!important}
  body.billi-app.v63-invoice-body .v63-invoice-card{margin:0!important}
}

/* Physical phone + Chrome Desktop Site: never fall back to invoice's legacy
   fixed sidebar. The common BILLI mobile navigation is authoritative. */
html.billi-physical-mobile body.billi-app.v63-invoice-body > main.invoice-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:14px 14px 36px!important;
}
html.billi-physical-mobile body.billi-app.v63-invoice-body > main.invoice-page > .v63-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
html.billi-physical-mobile body.billi-app.v63-invoice-body .v63-page-head{margin-bottom:10px!important}

/* V104 WAIVE-OFF: compact, balanced, responsive financial settlement UI */
.v63-waive-action{border-color:#e8d8a4!important;background:#fffaf0!important;color:#725b13!important}
.v63-waive-action .v63-action-icon{background:#fff2c7!important;color:#725b13!important}
.v63-finance{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.invoice-waive-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#fff6d8;color:#765b00;font-size:11px;font-weight:900}
.waive-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
@media(max-width:900px){.v63-finance{grid-template-columns:repeat(2,minmax(0,1fr))!important}.waive-history-row{grid-template-columns:1fr;gap:10px}}
@media(max-width:520px){.v63-waive-action{grid-column:1/-1}.waive-history-row form,.waive-history-row form .btn{width:100%}.v63-finance{gap:9px!important}}

.invoice-status.status-settled{background:#fff6d8;color:#765b00}
/* V104 invoice action map: Waive-Off is a first-class full-width settlement action. */
@media(max-width:900px){
  body.billi-app.v63-invoice-body .v63-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important}
  body.billi-app.v63-invoice-body .v63-actions>.v63-action,
  body.billi-app.v63-invoice-body .v63-actions>.v63-delete{grid-column:auto!important;grid-row:auto!important;min-width:0!important;max-width:100%!important}
  body.billi-app.v63-invoice-body .v63-actions>.v63-return-action,
  body.billi-app.v63-invoice-body .v63-actions>.v63-waive-action,
  body.billi-app.v63-invoice-body .v63-actions>.v63-delete{grid-column:1/-1!important}
  body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action{width:100%!important;justify-content:center!important}
}
@media(max-width:520px){
  body.billi-app.v63-invoice-body .v63-actions{gap:9px!important}
}

/* =========================================================
   V105 — INVOICE ITEM RESPONSIVE REPAIR
   Final override: item rows remain readable on narrow screens.
   Labels and values use explicit grid columns instead of flex so
   long Product / Service text cannot collapse or disappear.
   ========================================================= */
@media (max-width:900px){
  body.billi-app.v63-invoice-body .v63-items{
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    margin-top:14px!important;
  }
  body.billi-app.v63-invoice-body .v63-items table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
  }
  body.billi-app.v63-invoice-body .v63-items thead{display:none!important}
  body.billi-app.v63-invoice-body .v63-items tbody{display:block!important;width:100%!important}
  body.billi-app.v63-invoice-body .v63-items tr{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:13px 14px!important;
    border:1px solid #e0e7f1!important;
    border-radius:16px!important;
    background:#fbfcfe!important;
    box-sizing:border-box!important;
  }
  body.billi-app.v63-invoice-body .v63-items tr+tr{margin-top:10px!important}
  body.billi-app.v63-invoice-body .v63-items td,
  body.billi-app.v63-invoice-body .v63-items td:nth-child(1),
  body.billi-app.v63-invoice-body .v63-items td:nth-child(6),
  body.billi-app.v63-invoice-body .v63-items td:nth-child(7){
    display:grid!important;
    grid-template-columns:minmax(105px,42%) minmax(0,1fr)!important;
    align-items:start!important;
    justify-content:initial!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:5px 0!important;
    margin:0!important;
    border:0!important;
    text-align:right!important;
    white-space:normal!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.billi-app.v63-invoice-body .v63-items td::before{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    padding-right:10px!important;
    text-align:left!important;
    font-size:10px!important;
    line-height:1.35!important;
    font-weight:900!important;
    letter-spacing:.45px!important;
    color:#7b8799!important;
    content:attr(data-label)!important;
    box-sizing:border-box!important;
  }
  body.billi-app.v63-invoice-body .v63-items td:not(:first-child){
    border-top:1px solid #edf0f4!important;
  }
  body.billi-app.v63-invoice-body .v63-items td:not(:first-child)::before{padding-top:5px!important}
  body.billi-app.v63-invoice-body .v63-items td:not(:first-child){margin-top:0!important}
  body.billi-app.v63-invoice-body .v63-items td > *{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  body.billi-app.v63-invoice-body .v63-items td{
    color:#263143!important;
    font-size:13px!important;
    line-height:1.4!important;
  }
  body.billi-app.v63-invoice-body .v63-items td:nth-child(2){font-weight:800!important}
  body.billi-app.v63-invoice-body .v63-items td:nth-child(3){color:#263143!important}
  body.billi-app.v63-invoice-body .v63-items td:nth-child(6),
  body.billi-app.v63-invoice-body .v63-items td:nth-child(7){white-space:nowrap!important}
  body.billi-app.v63-invoice-body .v63-items td:nth-child(7){font-weight:850!important}
  body.billi-app.v63-invoice-body .v63-items .b71-items-toggle{
    width:100%!important;
    min-height:48px!important;
    margin:0 0 10px!important;
    padding:11px 14px!important;
    border:1px solid #dce5f5!important;
    border-radius:13px!important;
    background:#f5f8ff!important;
    color:#172033!important;
    font:inherit!important;
    font-size:15px!important;
    font-weight:850!important;
    text-align:left!important;
  }
}
@media (max-width:380px){
  body.billi-app.v63-invoice-body .v63-items tr{padding:12px!important}
  body.billi-app.v63-invoice-body .v63-items td{grid-template-columns:minmax(94px,40%) minmax(0,1fr)!important;font-size:12px!important}
  body.billi-app.v63-invoice-body .v63-items td::before{font-size:9px!important}
}

/* =====================================================================
   BILLI PRO V114 — CROSS-DEVICE UX + FUNCTIONAL PARITY AUTHORITY LAYER
   Root-cause pass for 320–1920px layouts, tablet widths and touch phones.
   This layer is intentionally small and component-based so it overrides
   historical CSS without adding another page-specific design system.
   ===================================================================== */

/* Global containment: no component may force the viewport wider than the
   available canvas. Long business/customer text must wrap instead. */
html,body{max-width:100%;overflow-x:clip}
body.billi-app .container,
body.billi-app .card,
body.billi-app .hero,
body.billi-app .grid2,
body.billi-app .stats,
body.billi-app .section-head,
body.billi-app .page-actions,
body.billi-app .dashboard-row,
body.billi-app .customer-card,
body.billi-app .plan-summary{min-width:0;max-width:100%}
body.billi-app .hero>div:first-child{min-width:0}
body.billi-app .hero h1,
body.billi-app .hero p,
body.billi-app .muted,
body.billi-app .dashboard-row-main,
body.billi-app .customer-fields,
body.billi-app .field-value,
body.billi-app .break-anywhere{overflow-wrap:anywhere;word-break:normal}
body.billi-app img{max-width:100%;height:auto}
body.billi-app .btn{max-width:100%;white-space:normal}

/* Missing page-specific geometry found in the audit. */
.landing{background:linear-gradient(180deg,#f5f8ff 0,#f5f7fb 100%)}
.landing-enhanced{padding:54px 0 48px}
.landing-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);align-items:center;gap:48px}
.landing-grid>section{min-width:0}
.landing-grid h1{font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-2.4px;margin:12px 0 18px;max-width:760px}
.landing-copy{font-size:18px;line-height:1.65;max-width:680px;color:#536177}
.landing-actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 17px}
.landing-actions .btn{min-width:155px}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 16px;color:#536177;font-size:13px;font-weight:750}
.preview{min-width:0}
.preview-enhanced{padding:24px;border:1px solid #dce4ef;border-radius:22px;background:#fff;box-shadow:0 22px 55px rgba(23,32,51,.10)}
.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:17px;border-bottom:1px solid #edf0f4}
.preview-bar .logo{font-size:20px}
.preview-status{font-size:11px;font-weight:850;color:#176a3d;background:#eaf8ef;border-radius:999px;padding:6px 9px;white-space:nowrap}
.preview-card{margin-top:15px;padding:17px;border:1px solid #e5eaf1;border-radius:15px;background:#fbfcfe}
.preview-label{font-size:10px;font-weight:900;letter-spacing:1px;color:#7a869b}
.preview-number{font-size:29px;font-weight:950;letter-spacing:-.7px;margin-top:6px}
.preview-row{height:9px;border-radius:999px;background:#e7edf5;margin-top:16px;width:92%}
.preview-row.short{width:62%;margin-top:8px}
.preview-total{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-weight:850}
.preview-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.preview-mini-grid>div{padding:13px;border-radius:13px;background:#f5f7fb;border:1px solid #e7ebf2}
.preview-mini-grid small{display:block;color:#718096;font-weight:750}
.preview-mini-grid strong{display:block;font-size:22px;margin-top:4px}
.marketing-section{padding:72px 0}
.workflow-section,.pricing-section{background:#fff}
.section-heading{max-width:760px;margin:0 auto 30px;text-align:center}
.section-heading h2{font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-1px;margin:8px 0 10px}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.feature-card{min-width:0;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 9px 28px rgba(23,32,51,.045)}
.feature-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eef2ff;color:var(--primary);font-weight:950;margin-bottom:15px}
.feature-card h3,.workflow-step h3{margin:0 0 7px;font-size:17px}
.feature-card p{margin:0;color:#718096;line-height:1.6}
.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.workflow-step{display:flex;gap:14px;min-width:0;padding:21px;border:1px solid var(--line);border-radius:16px;background:#f8fafc}
.workflow-step>span{width:38px;height:38px;min-width:38px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:#fff;font-weight:900}
.workflow-step p{margin:0;line-height:1.55}
.public-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:900px;margin:0 auto}
.public-price-card{min-width:0;padding:26px;border:1px solid #dfe5ee;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(23,32,51,.05)}
.public-price-card.featured{border:2px solid var(--primary);box-shadow:0 15px 38px rgba(36,87,214,.10)}
.public-price-card h3{font-size:32px;margin:8px 0}
.public-price-card h3 span{font-size:14px;color:#718096;font-weight:750}
.public-price-card p{color:#718096}
.public-price-card ul{margin:18px 0;padding-left:19px;line-height:1.9}
.public-price-card .btn{width:100%}
.pricing-note{text-align:center;color:#718096;margin:18px 0 0}
.save-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eaf8ef;color:#176a3d;font-size:11px;font-weight:900}
.cta-section{padding:52px 0;background:#f5f7fb}
.cta-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;border-radius:20px;background:#071a31;color:#fff;box-shadow:0 18px 45px rgba(7,26,49,.16)}
.cta-card h2{font-size:clamp(25px,3.5vw,36px);line-height:1.12;margin:7px 0}
.cta-card p{margin:0;color:#b9c8da}
.site-footer{padding:34px 0;background:#fff;border-top:1px solid var(--line)}
.site-footer>.container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}

/* Invoice creation/edit rows: desktop remains a row, mobile becomes one
   readable field at a time instead of a clipped five-column strip. */
.invoice-simple-form .item-row-wrap{min-width:0;overflow:visible}
.invoice-simple-form .item-head{grid-template-columns:1fr 2fr 1fr 1fr 1.2fr auto}
.invoice-simple-form .item-row{grid-template-columns:1fr 2fr 1fr 1fr 1.2fr auto;align-items:start}
.invoice-simple-form .item-field{min-width:0}
.invoice-simple-form .item-field label{margin-top:0}
.invoice-simple-form .item-field small{display:block;color:#7b8799;font-size:11px;line-height:1.35;margin-top:5px}
.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.form-actions .btn{min-width:130px}
.plan-select-label{display:block;margin:0}

/* Public invoice is customer-facing and must be printable without the
   authenticated workspace chrome or horizontal page overflow. */
.public-invoice-page{background:#f5f7fb}
.public-invoice-toolbar{position:sticky;top:0;z-index:20;padding:12px max(15px,4vw);background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 4px 16px rgba(23,32,51,.05)}
.public-invoice-actions{width:min(1000px,100%);margin:0 auto;display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.public-invoice-container{margin-top:28px}
.public-invoice-card{overflow:hidden}
.public-invoice-page .invoice-business-logo{max-width:180px;max-height:70px;object-fit:contain}
.public-invoice-page .invoice-top{align-items:flex-start}
.public-invoice-page .public-invoice-promo{margin-top:22px}

/* Search/results and reports pages: explicit responsive grids rather than
   relying on historical generic selectors. */
body.search-page .b93-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
body.search-page .b93-search-summary{display:flex;gap:8px;align-items:center;margin:16px 0;color:#718096}
body.search-page .b93-results{align-items:start}
body.reports-page .reports-grid{align-items:start}
body.reports-page .report-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.reports-page .report-quick-ranges{display:flex;gap:8px;flex-wrap:wrap}
body.reports-page .report-status-list{display:grid;gap:9px}

/* Tables: desktop gets stable action columns; touch/tablet gets cards with
   labels. Nothing is allowed to force a 720px page-wide minimum. */
body.billi-app .responsive-table{min-width:0;max-width:100%;overflow-x:auto}
body.billi-app .responsive-table table{min-width:720px}
body.billi-app .responsive-table td,
body.billi-app .responsive-table th{overflow-wrap:anywhere}

@media (min-width:1200px){
  body.billi-app>main.container{padding-left:40px!important;padding-right:40px!important}
}

@media (min-width:761px) and (max-width:1199px){
  body.billi-app .hero{align-items:flex-start}
  body.billi-app .hero .page-actions{flex:0 0 auto;max-width:42%}
  body.billi-app .hero .page-actions .btn{width:auto}
  body.billi-app .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.billi-app .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:28px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workflow-grid{grid-template-columns:1fr}
}

@media (max-width:760px){
  html,body{overflow-x:hidden}
  body.billi-app>main.container{width:100%!important;max-width:100%!important}
  body.billi-app .hero{gap:10px!important;margin-bottom:14px!important}
  body.billi-app .hero h1{font-size:clamp(25px,7vw,32px);letter-spacing:-.8px}
  body.billi-app .hero p{font-size:13px}
  body.billi-app .page-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.billi-app .page-actions .btn{width:100%;min-width:0}
  body.billi-app .card{padding:17px!important}
  body.billi-app .section-head{align-items:flex-start}
  body.billi-app .section-head>div{min-width:0}
  body.billi-app .quick-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.billi-app .billing-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.billi-app .invoice-list-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body.billi-app .invoice-list-actions .btn{width:100%!important;min-width:0!important}

  .landing-enhanced{padding:30px 0 28px}
  .landing-grid{grid-template-columns:1fr;gap:28px}
  .landing-grid h1{font-size:clamp(34px,10vw,48px);letter-spacing:-1.8px}
  .landing-copy{font-size:16px}
  .landing-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .landing-actions .btn{width:100%}
  .preview-enhanced{padding:18px;border-radius:18px}
  .marketing-section{padding:52px 0}
  .feature-grid,.workflow-grid,.public-price-grid{grid-template-columns:1fr}
  .feature-card,.workflow-step,.public-price-card{padding:19px}
  .cta-section{padding:36px 0}
  .cta-card{align-items:stretch;flex-direction:column;padding:23px}
  .cta-card .btn{width:100%}
  .site-footer>.container{align-items:flex-start;flex-direction:column}

  body.search-page .b93-search-row{grid-template-columns:1fr}
  body.search-page .b93-search-row .btn{width:100%}
  body.reports-page .report-filter-grid{grid-template-columns:1fr}

  .public-invoice-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .public-invoice-actions .btn{width:100%;min-width:0}
  .public-invoice-container{margin-top:15px}
  .public-invoice-page .invoice-top{flex-direction:column}
  .public-invoice-page .invoice-meta{text-align:left}

  .invoice-simple-form .item-head{display:none}
  .invoice-simple-form .item-row{display:grid;grid-template-columns:1fr!important;gap:7px!important;padding:14px!important;margin:0!important;border:1px solid #e0e7f1;border-radius:15px;background:#fbfcfe}
  .invoice-simple-form .item-row+.item-row{margin-top:10px!important}
  .invoice-simple-form .item-field{width:100%;min-width:0}
  .invoice-simple-form .item-field label{font-size:12px;margin:4px 0}
  .invoice-simple-form .remove-item{width:100%!important;margin-top:3px}
  .form-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .form-actions .btn{width:100%}
}

@media (max-width:390px){
  body.billi-app .page-actions{grid-template-columns:1fr}
  body.billi-app .quick-action-grid{grid-template-columns:1fr!important}
  body.billi-app .billing-summary{gap:8px!important}
  body.billi-app .billing-summary>div{padding:11px!important}
  .public-invoice-actions{grid-template-columns:1fr}
  .landing-grid h1{font-size:34px}
}

@media print{
  .public-invoice-toolbar{display:none!important}
  body.public-invoice-page{background:#fff!important}
  body.public-invoice-page .public-invoice-container{margin:0!important;padding:0!important}
  body.public-invoice-page .public-invoice-card{box-shadow:none!important;border:0!important}
}

/* V116 — MOBILE TABLE VISIBILITY REPAIR
   Root cause: the later cross-device authority layer restored a 720px table
   minimum after the earlier mobile card rules. On a real phone the left
   label column therefore remained visible while the value column sat beyond
   the viewport. Keep the established desktop/Desktop-Site table unchanged. */
@media (max-width:760px){
  html:not(.billi-desktop-site) body.billi-app .responsive-table{
    overflow:visible!important;
    min-width:0!important;
    max-width:100%!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
    border:0!important;
    border-radius:0!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table thead{display:none!important}
  html:not(.billi-desktop-site) body.billi-app .responsive-table tbody{display:block!important;width:100%!important;min-width:0!important}
  html:not(.billi-desktop-site) body.billi-app .responsive-table tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td{
    display:grid!important;
    grid-template-columns:minmax(88px,40%) minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    gap:10px!important;
    align-items:start!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td::before{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td > *{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"]{display:block!important}
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"] .invoice-list-actions,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"] .trash-actions{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

/* V115 — customer financial summary, preserving the existing BILLI PRO visual language */
.customer-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:14px 0 2px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.customer-summary>div{min-width:0}.customer-summary span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.55px;color:#7a869b;font-weight:900;margin-bottom:3px}.customer-summary strong{display:block;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:1000px){.customer-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.customer-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px}.customer-summary strong{font-size:12px}}


/* V117 — CROSS-DEVICE TABLE AUTHORITY
   Keep the established desktop/tablet presentation intact while making
   every authenticated data table genuinely readable on narrow phones.
   Values must never sit outside the card merely because the desktop
   min-width rule exists earlier in the stylesheet. */
@media (max-width:760px){
  html:not(.billi-desktop-site) body.billi-app .responsive-table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-collapse:separate!important;
    table-layout:auto!important;
    box-sizing:border-box!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > thead{display:none!important}
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tr:first-child{
    display:none!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tbody > tr,
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tr:not(:first-child){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    padding:10px 0!important;
    border-bottom:1px solid #edf0f4!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tbody > tr:last-child,
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tr:last-child{border-bottom:0!important}
  html:not(.billi-desktop-site) body.billi-app .responsive-table td{
    display:grid!important;
    grid-template-columns:minmax(82px,38%) minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:6px 0!important;
    border:0!important;
    text-align:right!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td::before{
    content:attr(data-label)!important;
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td > *{
    min-width:0!important;
    max-width:100%!important;
    width:auto!important;
    box-sizing:border-box!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"]{
    display:block!important;
    padding-top:9px!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"]::before{display:block!important;margin-bottom:7px!important}
  html:not(.billi-desktop-site) body.billi-app .responsive-table .invoice-list-actions,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .trash-actions,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .history-actions,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:8px!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table .invoice-list-actions .btn,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .trash-actions .btn,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .history-actions .btn,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions .btn,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions form,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions select,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions input{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:390px){
  html:not(.billi-desktop-site) body.billi-app .responsive-table td{
    grid-template-columns:minmax(76px,36%) minmax(0,1fr)!important;
    gap:7px!important;
    font-size:13px!important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td::before{font-size:10px!important}
}


/* V118 — WHOLE-SITE RESPONSIVE AUTHORITY
   Final cross-device pass. Mobile/tablet layouts are derived from the same
   content and never depend on a desktop-width table. Desktop and explicit
   Chrome Desktop-Site presentation remain untouched. */
html,body{max-width:100%;}

@media (max-width:760px){
  html:not(.billi-desktop-site),
  html:not(.billi-desktop-site) body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }
  body.billi-app main.container,
  body:not(.v63-invoice-body) main.container{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  body.billi-app .hero,
  body.billi-app .section-head,
  body.billi-app .section-title,
  body.billi-app .customer-card-head,
  body.billi-app .dashboard-row,
  body.billi-app .dashboard-row-main,
  body.billi-app .dashboard-row-side,
  body.billi-app .profile-photo-row,
  body.billi-app .logo-upload-row,
  body.billi-app .report-filter-grid,
  body.billi-app .report-quick-ranges,
  body.billi-app .export-actions,
  body.billi-app .form-actions,
  body.billi-app .history-actions,
  body.billi-app .customer-card-actions{
    min-width:0!important;
    max-width:100%!important;
  }
  body.billi-app .hero>div,
  body.billi-app .section-head>div,
  body.billi-app .section-title>div,
  body.billi-app .customer-card-head>div{
    min-width:0!important;
    max-width:100%!important;
  }
  body.billi-app .hero h1,
  body.billi-app .hero p,
  body.billi-app .section-head h2,
  body.billi-app .section-head p,
  body.billi-app .section-title h2,
  body.billi-app .customer-card strong,
  body.billi-app .field-value,
  body.billi-app .muted,
  body.billi-app .break-anywhere{
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  /* Every ordinary data table becomes a contained record card on phones. */
  .responsive-table,
  body.billi-app .responsive-table,
  body:not(.billi-app) .responsive-table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .responsive-table>table,
  body.billi-app .responsive-table>table,
  body:not(.billi-app) .responsive-table>table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:auto!important;
    border:0!important;
    border-collapse:separate!important;
    box-sizing:border-box!important;
  }
  .responsive-table>table>thead{display:none!important}
  .responsive-table>table>tbody,
  .responsive-table>table>tbody>tr,
  .responsive-table>table>tr:not(:first-child){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .responsive-table>table>tr:first-child{display:none!important}
  .responsive-table>table>tbody>tr,
  .responsive-table>table>tr:not(:first-child){
    padding:10px 0!important;
    margin:0 0 10px!important;
    border:1px solid #e1e7ef!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 7px 20px rgba(23,32,51,.04)!important;
    overflow:visible!important;
  }
  .responsive-table>table>tbody>tr:last-child,
  .responsive-table>table>tr:not(:first-child):last-child{margin-bottom:0!important}
  .responsive-table td{
    display:grid!important;
    grid-template-columns:minmax(78px,36%) minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:7px 12px!important;
    border:0!important;
    text-align:right!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .responsive-table td::before{
    content:attr(data-label)!important;
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:left!important;
    font-size:10px!important;
    line-height:1.25!important;
    font-weight:900!important;
    letter-spacing:.65px!important;
    text-transform:uppercase!important;
    color:#7a869b!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .responsive-table td>*{
    min-width:0!important;
    max-width:100%!important;
    width:auto!important;
    box-sizing:border-box!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .responsive-table td[data-label="Notes"],
  .responsive-table td[data-label="Description"],
  .responsive-table td[data-label="Method / Reference"]{
    text-align:left!important;
  }
  .responsive-table td[data-label="Actions"],
  .responsive-table td[data-label="Action"],
  .responsive-table td[data-label="Account Action"]{
    display:block!important;
    padding:10px 12px 8px!important;
    margin-top:4px!important;
    border-top:1px solid #edf0f4!important;
    text-align:left!important;
  }
  .responsive-table td[data-label="Actions"]::before,
  .responsive-table td[data-label="Action"]::before,
  .responsive-table td[data-label="Account Action"]::before{
    display:block!important;
    margin-bottom:8px!important;
  }
  .responsive-table .invoice-list-actions,
  .responsive-table .history-actions,
  .responsive-table .trash-actions,
  .responsive-table .admin-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .responsive-table .invoice-list-actions .btn,
  .responsive-table .history-actions .btn,
  .responsive-table .trash-actions .btn,
  .responsive-table .admin-actions .btn,
  .responsive-table .admin-actions form,
  .responsive-table .admin-actions select,
  .responsive-table .admin-actions input{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-wrap:anywhere!important;
  }
  .responsive-table td[data-label="Actions"]>.btn,
  .responsive-table td[data-label="Action"]>.btn{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .responsive-table td[data-label="Account Action"] .admin-actions{
    grid-template-columns:1fr!important;
  }

  /* Prevent card padding + child width calculations from creating a second
     horizontal scroll area. */
  body.billi-app .card.responsive-table{overflow:visible!important}
  body.billi-app .card,
  body.billi-app .section,
  body.billi-app .stat,
  body.billi-app .grid2,
  body.billi-app .stats,
  body.billi-app .billing-summary,
  body.billi-app .quick-action-grid,
  body.billi-app .customer-card,
  body.billi-app .export-card,
  body.billi-app .export-note,
  body.billi-app .report-filter,
  body.billi-app .adjustment-form{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Forms: labels, fields and action groups stay inside the card. */
  body.billi-app form,
  body.billi-app form>*{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.billi-app input,
  body.billi-app select,
  body.billi-app textarea,
  body.billi-app .input{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.billi-app textarea{resize:vertical;overflow-wrap:anywhere}
  body.billi-app .history-actions .btn,
  body.billi-app .customer-card-actions .btn,
  body.billi-app .customer-card-actions form,
  body.billi-app .customer-card-actions button{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

  /* Dashboard/customer/export/report cards never retain desktop grid widths. */
  body.billi-app .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  body.billi-app .grid2{grid-template-columns:1fr!important;gap:12px!important}
  body.billi-app .billing-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.billi-app .customer-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.billi-app .export-actions{grid-template-columns:1fr!important}
  body.billi-app .report-filter-grid{grid-template-columns:1fr!important}
  body.billi-app .report-quick-ranges{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.billi-app .report-quick-ranges>span{grid-column:1/-1!important}
  body.billi-app .report-quick-ranges .btn{width:100%!important;min-width:0!important}

  /* Invoice-specific item list and action grid remain readable without
     changing the established desktop invoice appearance. */
  body.v63-invoice-body .v63-content,
  body.v63-invoice-body .v63-invoice-card,
  body.v63-invoice-body .v63-items,
  body.v63-invoice-body .v63-actions,
  body.v63-invoice-body .v63-party,
  body.v63-invoice-body .v63-share-card{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.v63-invoice-body .v63-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.v63-invoice-body .v63-actions>.v63-action{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.v63-invoice-body .v63-items{overflow:visible!important}
  body.v63-invoice-body .v63-items table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.v63-invoice-body .v63-items thead{display:none!important}
  body.v63-invoice-body .v63-items tbody,
  body.v63-invoice-body .v63-items tr{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.v63-invoice-body .v63-items tr{padding:9px 0!important;border-bottom:1px solid #edf0f4!important}
  body.v63-invoice-body .v63-items td{display:grid!important;grid-template-columns:minmax(76px,38%) minmax(0,1fr)!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;text-align:right!important;padding:6px 0!important;white-space:normal!important;overflow:visible!important}
  body.v63-invoice-body .v63-items td::before{display:block!important;content:attr(data-label)!important;text-align:left!important;min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important}
  body.v63-invoice-body .v63-items td>*{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important}
}

@media (max-width:390px){
  body.billi-app .container{padding-left:10px!important;padding-right:10px!important}
  body.billi-app .card{padding:15px!important}
  body.billi-app .stats{grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.billi-app .billing-summary{grid-template-columns:1fr!important}
  body.billi-app .responsive-table td{grid-template-columns:minmax(72px,34%) minmax(0,1fr)!important;gap:7px!important;padding-left:10px!important;padding-right:10px!important;font-size:13px!important}
  body.billi-app .responsive-table td::before{font-size:9px!important}
  body.billi-app .responsive-table .invoice-list-actions,
  body.billi-app .responsive-table .history-actions,
  body.billi-app .responsive-table .trash-actions{grid-template-columns:1fr 1fr!important}
  body.v63-invoice-body .v63-actions{grid-template-columns:1fr!important}
  body.v63-invoice-body .v63-actions>.v63-delete{grid-column:auto!important}
}

@media (min-width:761px) and (max-width:1000px){
  /* Tablet: preserve the desktop information hierarchy, but remove every
     fixed child width that can force horizontal overflow. */
  html,body{max-width:100%!important;overflow-x:hidden!important}
  body.billi-app .container{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  body.billi-app .card,
  body.billi-app .section,
  body.billi-app .grid2,
  body.billi-app .stats,
  body.billi-app .hero{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  body.billi-app .responsive-table{width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important}
  body.billi-app .responsive-table table{min-width:720px!important;max-width:none!important}
  body.billi-app .responsive-table td,
  body.billi-app .responsive-table th{overflow-wrap:anywhere!important}
  body.billi-app .page-actions .btn{min-width:0!important}
  body.billi-app .invoice-list-actions,
  body.billi-app .history-actions,
  body.billi-app .customer-card-actions{min-width:0!important;max-width:100%!important}
  body.billi-app .customer-card-actions .btn{min-width:0!important}
  body.billi-app .report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.billi-app .report-filter-grid .btn{width:100%!important;min-width:0!important}
}

/* V119 — FINAL RESPONSIVE LAYOUT AUTHORITY
   One responsive system for the entire BILLI workspace.  The existing
   desktop presentation remains the source of truth; phone/tablet rules only
   change containment and wrapping so no data or controls can escape a card. */

html, body { max-width:100%; }

@media (max-width:760px) {
  html:not(.billi-desktop-site) body.billi-app,
  html:not(.billi-desktop-site) body.billi-app main,
  html:not(.billi-desktop-site) body.billi-app .container {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  html:not(.billi-desktop-site) body.billi-app .container {
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* Every card and grid child must be shrinkable. */
  html:not(.billi-desktop-site) body.billi-app .card,
  html:not(.billi-desktop-site) body.billi-app .section,
  html:not(.billi-desktop-site) body.billi-app .stat,
  html:not(.billi-desktop-site) body.billi-app .stats,
  html:not(.billi-desktop-site) body.billi-app .grid2,
  html:not(.billi-desktop-site) body.billi-app .customer-card,
  html:not(.billi-desktop-site) body.billi-app .export-card,
  html:not(.billi-desktop-site) body.billi-app .report-filter,
  html:not(.billi-desktop-site) body.billi-app .adjustment-form,
  html:not(.billi-desktop-site) body.billi-app .billing-summary,
  html:not(.billi-desktop-site) body.billi-app .quick-action-grid {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Tables become true record cards.  No desktop table width survives. */
  html:not(.billi-desktop-site) body.billi-app .responsive-table {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:auto !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > thead { display:none !important; }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tbody,
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tbody > tr {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tbody > tr {
    margin:0 0 12px !important;
    padding:10px 0 !important;
    border:1px solid var(--line,#e1e7ef) !important;
    border-radius:15px !important;
    background:#fff !important;
    overflow:hidden !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table > tbody > tr:last-child { margin-bottom:0 !important; }

  html:not(.billi-desktop-site) body.billi-app .responsive-table td {
    display:grid !important;
    grid-template-columns:minmax(78px,36%) minmax(0,1fr) !important;
    gap:8px !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:7px 12px !important;
    margin:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
    text-align:right !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td::before {
    content:attr(data-label) !important;
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:10px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    letter-spacing:.65px !important;
    text-transform:uppercase !important;
    color:#7a869b !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td > * {
    min-width:0 !important;
    max-width:100% !important;
    width:auto !important;
    box-sizing:border-box !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* Long free-form values get their own full-width line. */
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Notes"],
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Description"],
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Reason / Reference"],
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Method / Reference"],
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Details"] {
    grid-template-columns:1fr !important;
    text-align:left !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Notes"]::before,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Description"]::before,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Reason / Reference"]::before,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Method / Reference"]::before,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Details"]::before { margin-bottom:3px !important; }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Notes"] > *,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Description"] > *,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Reason / Reference"] > *,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Method / Reference"] > *,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Details"] > * { text-align:left !important; }

  /* Action rows always occupy the complete card width. */
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"],
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Action"],
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Account Action"] {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:10px 12px 8px !important;
    margin-top:4px !important;
    border-top:1px solid #edf0f4 !important;
    text-align:left !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"]::before,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Action"]::before,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Account Action"]::before {
    display:block !important;
    margin:0 0 8px !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Actions"] > a.btn,
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Action"] > a.btn {
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
    align-items:center !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table .invoice-list-actions,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .history-actions,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .trash-actions,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table .invoice-list-actions > *,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .history-actions > *,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .trash-actions > *,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions > * {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions select,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions input,
  html:not(.billi-desktop-site) body.billi-app .responsive-table .admin-actions form { width:100% !important; }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td[data-label="Account Action"] .admin-actions { grid-template-columns:1fr !important; }

  /* Forms and action groups cannot push the viewport sideways. */
  html:not(.billi-desktop-site) body.billi-app form,
  html:not(.billi-desktop-site) body.billi-app form > *,
  html:not(.billi-desktop-site) body.billi-app input,
  html:not(.billi-desktop-site) body.billi-app select,
  html:not(.billi-desktop-site) body.billi-app textarea,
  html:not(.billi-desktop-site) body.billi-app .input {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app input,
  html:not(.billi-desktop-site) body.billi-app select,
  html:not(.billi-desktop-site) body.billi-app textarea,
  html:not(.billi-desktop-site) body.billi-app .input { width:100% !important; }

  /* Header/search/hero content also wraps instead of overflowing. */
  html:not(.billi-desktop-site) body.billi-app .hero,
  html:not(.billi-desktop-site) body.billi-app .hero > div,
  html:not(.billi-desktop-site) body.billi-app .page-actions,
  html:not(.billi-desktop-site) body.billi-app .section-head,
  html:not(.billi-desktop-site) body.billi-app .section-head > div,
  html:not(.billi-desktop-site) body.billi-app .profile-photo-row,
  html:not(.billi-desktop-site) body.billi-app .logo-upload-row,
  html:not(.billi-desktop-site) body.billi-app .form-actions,
  html:not(.billi-desktop-site) body.billi-app .customer-card-head {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app h1,
  html:not(.billi-desktop-site) body.billi-app h2,
  html:not(.billi-desktop-site) body.billi-app h3,
  html:not(.billi-desktop-site) body.billi-app p,
  html:not(.billi-desktop-site) body.billi-app .muted,
  html:not(.billi-desktop-site) body.billi-app .field-value,
  html:not(.billi-desktop-site) body.billi-app .customer-card strong {
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* Invoice item rows use the same two-column label/value model. */
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-content,
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-invoice-card,
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items,
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-actions,
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-party,
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-share-card {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items table {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items thead { display:none !important; }
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items tbody,
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items tr {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items td {
    display:grid !important;
    grid-template-columns:minmax(78px,38%) minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    text-align:right !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items td::before { overflow-wrap:anywhere !important; }
  html:not(.billi-desktop-site) body.v63-invoice-body .v63-items td > * { min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere !important; word-break:break-word !important; }
}

@media (max-width:390px) {
  html:not(.billi-desktop-site) body.billi-app .container { padding-left:10px !important; padding-right:10px !important; }
  html:not(.billi-desktop-site) body.billi-app .card { padding:14px !important; }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td { grid-template-columns:minmax(72px,34%) minmax(0,1fr) !important; gap:7px !important; padding-left:10px !important; padding-right:10px !important; }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td::before { font-size:9px !important; }
}

@media (min-width:761px) and (max-width:1100px) {
  /* Tablet: retain the established table hierarchy, but contain every cell. */
  html:not(.billi-desktop-site) body.billi-app,
  html:not(.billi-desktop-site) body.billi-app .container,
  html:not(.billi-desktop-site) body.billi-app .card,
  html:not(.billi-desktop-site) body.billi-app .section,
  html:not(.billi-desktop-site) body.billi-app .hero,
  html:not(.billi-desktop-site) body.billi-app .stats,
  html:not(.billi-desktop-site) body.billi-app .grid2,
  html:not(.billi-desktop-site) body.billi-app .responsive-table {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  html:not(.billi-desktop-site) body.billi-app .responsive-table { overflow-x:auto !important; }
  html:not(.billi-desktop-site) body.billi-app .responsive-table > table { min-width:700px !important; width:100% !important; max-width:none !important; table-layout:auto !important; }
  html:not(.billi-desktop-site) body.billi-app .responsive-table td,
  html:not(.billi-desktop-site) body.billi-app .responsive-table th { overflow-wrap:anywhere !important; word-break:break-word !important; }
  html:not(.billi-desktop-site) body.billi-app .page-actions { min-width:0 !important; }
  html:not(.billi-desktop-site) body.billi-app .page-actions .btn { min-width:0 !important; }
}

/* BILLI PRO V125 — INVOICE ITEM CARD SINGLE-BORDER FIX
   Mobile invoice items use a bordered row card. The global table rule also
   adds a table border, which creates the visible double-layer frame. Keep
   the row card border and remove only the redundant table frame on mobile.
*/
@media (max-width:900px){
  body.billi-app.v63-invoice-body .v63-items table{
    border:0!important;
    border-radius:0!important;
  }
}


/* BILLI PRO V127 — FINAL MOBILE INVOICE ITEM SINGLE FRAME
   The invoice item row itself is the only card frame. Remove every
   table/tbody/row frame that can be introduced by legacy responsive layers.
*/
@media (max-width:900px){
  html body.billi-app.v63-invoice-body .v63-items,
  html body.billi-app.v63-invoice-body .v63-items table,
  html body.billi-app.v63-invoice-body .v63-items tbody{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    border-spacing:0!important;
  }
  html body.billi-app.v63-invoice-body .v63-items table{
    border-collapse:collapse!important;
    background:transparent!important;
  }
  html body.billi-app.v63-invoice-body .v63-items tr{
    border:1px solid #e0e7f1!important;
    border-radius:16px!important;
    box-shadow:none!important;
    outline:0!important;
    background:#fbfcfe!important;
    overflow:hidden!important;
  }
  html body.billi-app.v63-invoice-body .v63-items td{
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
  }
}

/* V128: mobile invoice item card has exactly one visual frame. Older responsive
   rules are intentionally overridden here rather than removed, preserving the
   established stylesheet while eliminating inherited outline/shadow layers. */
@media (max-width:650px){
  html body.billi-app.v63-invoice-body .v63-items,
  html body.billi-app.v63-invoice-body .v63-items table,
  html body.billi-app.v63-invoice-body .v63-items tbody{outline:0!important;box-shadow:none!important;border:0!important;background:transparent!important;}
  html body.billi-app.v63-invoice-body .v63-items tr{outline:0!important;box-shadow:none!important;border:1px solid #dce3ec!important;border-radius:12px!important;background:#fff!important;}
}

/* V130: transparent financial reconciliation */
.v63-finance>div,.v63-finance>a{position:relative}
.v63-finance>div small,.v63-finance>a small{display:block;font-size:9px;font-weight:650;line-height:1.25;margin-top:3px;opacity:.72}
.v63-finance .adjusted{background:#f3fbf7;border-color:#c9ead9;color:#18734a}
.v63-finance .adjusted-total{background:#f7f9fc;border-color:#dce4ee;color:#334155}
.v63-finance .net-paid{background:#eef8ff;border-color:#cfe2f5;color:#175b8f}
.v63-finance .due{grid-column:auto}
@media(max-width:900px){
  .v63-finance{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v63-finance .due{grid-column:1/-1!important}
}
@media(max-width:520px){
  .v63-finance{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .v63-finance>div,.v63-finance>a{padding:10px!important;min-height:72px!important}
  .v63-finance span{font-size:9px!important;line-height:1.2!important}
  .v63-finance b{font-size:15px!important;line-height:1.2!important}
  .v63-finance>div small,.v63-finance>a small{font-size:8px!important;line-height:1.2!important}
  .v63-finance .due{grid-column:1/-1!important}
}

/* V131 financial credit presentation */
.v63-finance .credit{background:#eefbf5;border-color:#bfe7d3;color:#176a42}
@media(max-width:520px){.v63-finance .credit{grid-column:1/-1!important}}

/* =========================================================
   V132 — MOBILE FINANCIAL SUMMARY CARD TYPOGRAPHY REPAIR
   Keep every financial card readable: labels, amounts and helper text
   get their own full-width rows instead of competing inside a flex row.
   This final override supersedes legacy V63/V130/V131 finance rules.
   ========================================================= */
@media (max-width:650px){
  html body.billi-app.v63-invoice-body .v63-finance{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    align-items:stretch!important;
  }
  html body.billi-app.v63-invoice-body .v63-finance>div,
  html body.billi-app.v63-invoice-body .v63-finance>a{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    align-content:center!important;
    justify-content:initial!important;
    align-items:start!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    min-height:104px!important;
    box-sizing:border-box!important;
    padding:13px 14px!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:14px!important;
    text-decoration:none!important;
  }
  html body.billi-app.v63-invoice-body .v63-finance>div span,
  html body.billi-app.v63-invoice-body .v63-finance>a span{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:11px!important;
    line-height:1.25!important;
    font-weight:850!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  html body.billi-app.v63-invoice-body .v63-finance>div b,
  html body.billi-app.v63-invoice-body .v63-finance>a b{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:950!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  html body.billi-app.v63-invoice-body .v63-finance>div small,
  html body.billi-app.v63-invoice-body .v63-finance>a small{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:9px!important;
    line-height:1.25!important;
    font-weight:650!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  html body.billi-app.v63-invoice-body .v63-finance .due,
  html body.billi-app.v63-invoice-body .v63-finance .credit{
    grid-column:1/-1!important;
    min-height:94px!important;
  }
}

@media (max-width:380px){
  html body.billi-app.v63-invoice-body .v63-finance{gap:8px!important}
  html body.billi-app.v63-invoice-body .v63-finance>div,
  html body.billi-app.v63-invoice-body .v63-finance>a{padding:12px!important;min-height:100px!important}
  html body.billi-app.v63-invoice-body .v63-finance>div span,
  html body.billi-app.v63-invoice-body .v63-finance>a span{font-size:10px!important}
  html body.billi-app.v63-invoice-body .v63-finance>div b,
  html body.billi-app.v63-invoice-body .v63-finance>a b{font-size:17px!important}
}

/* ================================================================
   BILLI PRO V134 — REAL TOUCH PHONE / DESKTOP-SITE FINAL INVOICE UI
   Some Android Chrome configurations expose a wide CSS viewport even
   though the device is a touch phone. In that mode the old 761–1100px
   tablet rules make the invoice look miniature. This final layer uses
   pointer:coarse as the physical-device signal and restores the same
   readable mobile invoice geometry.
   ================================================================ */
@media (pointer:coarse) and (max-width:1100px){
  html body.billi-app.v63-invoice-body .v63-app-shell{display:block!important;width:100%!important;min-width:0!important;}
  html body.billi-app.v63-invoice-body .v63-sidebar,
  html body.billi-app.v63-invoice-body .v63-desktop-topbar{display:none!important;}
  html body.billi-app.v63-invoice-body .v63-mobile-topbar{display:flex!important;width:100%!important;min-width:0!important;height:68px!important;box-sizing:border-box!important;}
  html body.billi-app.v63-invoice-body .v63-main{display:block!important;width:100%!important;min-width:0!important;margin:0!important;}
  html body.billi-app.v63-invoice-body .v63-content{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:14px 14px 34px!important;box-sizing:border-box!important;}
  html body.billi-app.v63-invoice-body .v63-page-head{display:block!important;margin:0 0 12px!important;}
  html body.billi-app.v63-invoice-body .v63-back{display:flex!important;width:100%!important;min-height:54px!important;justify-content:center!important;box-sizing:border-box!important;font-size:16px!important;padding:12px 16px!important;border-radius:16px!important;}

  html body.billi-app.v63-invoice-body .v63-actions{display:grid!important;width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;margin:0 0 20px!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action,
  html body.billi-app.v63-invoice-body .v63-actions>.v63-delete{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action{min-height:72px!important;padding:10px 8px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;text-align:center!important;overflow:hidden!important;border-radius:15px!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action b,
  html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action b{font-size:14px!important;line-height:1.2!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;}
  html body.billi-app.v63-invoice-body .v63-action small{display:none!important;}
  html body.billi-app.v63-invoice-body .v63-action-icon{width:28px!important;height:28px!important;min-width:28px!important;flex:0 0 28px!important;display:grid!important;place-items:center!important;}
  html body.billi-app.v63-invoice-body .v63-action-icon svg{width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action:nth-child(1){grid-column:1!important;grid-row:1!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action:nth-child(2){grid-column:2!important;grid-row:1!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action:nth-child(3){grid-column:1/-1!important;grid-row:2!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action:nth-child(4){grid-column:1!important;grid-row:3!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action:nth-child(5){grid-column:2!important;grid-row:3!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action:nth-child(6){grid-column:1!important;grid-row:4!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action:nth-child(7){grid-column:2!important;grid-row:4!important;}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-delete{grid-column:1/-1!important;grid-row:5!important;display:flex!important;}
  html body.billi-app.v63-invoice-body .v63-delete .v63-action{width:100%!important;min-height:68px!important;justify-content:center!important;}

  html body.billi-app.v63-invoice-body .v63-invoice-card{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:20px 16px 16px!important;box-sizing:border-box!important;border-radius:18px!important;}
  html body.billi-app.v63-invoice-body .v63-invoice-top{display:block!important;}
  html body.billi-app.v63-invoice-body .v63-business h1{font-size:26px!important;line-height:1.15!important;margin:9px 0 3px!important;}
  html body.billi-app.v63-invoice-body .v63-business p{font-size:13px!important;}
  html body.billi-app.v63-invoice-body .v63-invoice-meta{min-width:0!important;text-align:left!important;margin-top:15px!important;padding-top:13px!important;border-top:1px solid #edf0f4!important;}
  html body.billi-app.v63-invoice-body .v63-invoice-meta h2{font-size:21px!important;}
  html body.billi-app.v63-invoice-body .v63-invoice-meta p{font-size:12px!important;line-height:1.65!important;}
  html body.billi-app.v63-invoice-body .v63-parties{grid-template-columns:1fr!important;gap:8px!important;margin:16px 0 15px!important;}
  html body.billi-app.v63-invoice-body .v63-party{padding:13px!important;font-size:12px!important;min-height:0!important;}

  html body.billi-app.v63-invoice-body .v63-items{width:100%!important;min-width:0!important;overflow:visible!important;margin-top:12px!important;}
  html body.billi-app.v63-invoice-body .v63-items table{display:block!important;width:100%!important;min-width:0!important;border:0!important;border-collapse:collapse!important;background:transparent!important;}
  html body.billi-app.v63-invoice-body .v63-items thead{display:none!important;}
  html body.billi-app.v63-invoice-body .v63-items tbody{display:block!important;width:100%!important;}
  html body.billi-app.v63-invoice-body .v63-items tr{display:block!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:10px 12px!important;margin:0!important;border:1px solid #dce3ec!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important;outline:0!important;overflow:hidden!important;}
  html body.billi-app.v63-invoice-body .v63-items td{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;gap:12px!important;padding:6px 0!important;border:0!important;border-bottom:1px solid #edf0f4!important;text-align:right!important;font-size:13px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;}
  html body.billi-app.v63-invoice-body .v63-items td:last-child{border-bottom:0!important;}
  html body.billi-app.v63-invoice-body .v63-items td::before{content:attr(data-label)!important;display:block!important;flex:0 0 38%!important;text-align:left!important;font-size:10px!important;font-weight:900!important;letter-spacing:.35px!important;color:#7b8799!important;overflow-wrap:anywhere!important;}
  html body.billi-app.v63-invoice-body .v63-items td:nth-child(1){width:100%!important;}
  html body.billi-app.v63-invoice-body .v63-items td:nth-child(6),
  html body.billi-app.v63-invoice-body .v63-items td:nth-child(7){white-space:normal!important;}

  html body.billi-app.v63-invoice-body .v63-totals{width:100%!important;max-width:none!important;margin:12px 0 0!important;}
  html body.billi-app.v63-invoice-body .v63-totals p{font-size:14px!important;line-height:1.35!important;margin:9px 0!important;}
  html body.billi-app.v63-invoice-body .v63-totals h2{font-size:23px!important;line-height:1.25!important;margin:10px 0 0!important;padding-top:12px!important;}

  html body.billi-app.v63-invoice-body .v63-finance{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;width:100%!important;margin-top:16px!important;align-items:stretch!important;}
  html body.billi-app.v63-invoice-body .v63-finance>div,
  html body.billi-app.v63-invoice-body .v63-finance>a{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;align-content:center!important;align-items:start!important;gap:4px!important;width:100%!important;min-width:0!important;min-height:104px!important;box-sizing:border-box!important;margin:0!important;padding:13px 14px!important;border-radius:14px!important;overflow:hidden!important;text-decoration:none!important;}
  html body.billi-app.v63-invoice-body .v63-finance>div span,
  html body.billi-app.v63-invoice-body .v63-finance>a span{display:block!important;width:100%!important;font-size:11px!important;line-height:1.25!important;font-weight:850!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;}
  html body.billi-app.v63-invoice-body .v63-finance>div b,
  html body.billi-app.v63-invoice-body .v63-finance>a b{display:block!important;width:100%!important;font-size:18px!important;line-height:1.2!important;font-weight:950!important;white-space:nowrap!important;overflow:visible!important;}
  html body.billi-app.v63-invoice-body .v63-finance>div small,
  html body.billi-app.v63-invoice-body .v63-finance>a small{display:block!important;width:100%!important;font-size:9px!important;line-height:1.25!important;font-weight:650!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;}
  html body.billi-app.v63-invoice-body .v63-finance .due,
  html body.billi-app.v63-invoice-body .v63-finance .credit{grid-column:1/-1!important;min-height:94px!important;}

  html body.billi-app.v63-invoice-body .v63-notes{grid-template-columns:1fr!important;}
  html body.billi-app.v63-invoice-body .v63-share-card{display:block!important;width:100%!important;box-sizing:border-box!important;}
  html body.billi-app.v63-invoice-body .v63-share-card>div:last-child{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  html body.billi-app.v63-invoice-body .v63-share-card .btn{width:100%!important;min-height:44px!important;font-size:12px!important;}
}

@media (pointer:coarse) and (max-width:380px){
  html body.billi-app.v63-invoice-body .v63-content{padding-left:10px!important;padding-right:10px!important;}
  html body.billi-app.v63-invoice-body .v63-invoice-card{padding-left:13px!important;padding-right:13px!important;}
  html body.billi-app.v63-invoice-body .v63-finance{gap:8px!important;}
  html body.billi-app.v63-invoice-body .v63-finance>div,
  html body.billi-app.v63-invoice-body .v63-finance>a{padding:12px!important;min-height:100px!important;}
  html body.billi-app.v63-invoice-body .v63-finance>div span,
  html body.billi-app.v63-invoice-body .v63-finance>a span{font-size:10px!important;}
  html body.billi-app.v63-invoice-body .v63-finance>div b,
  html body.billi-app.v63-invoice-body .v63-finance>a b{font-size:17px!important;}
}

/* ================================================================
   BILLI PRO V135 — TOUCH VIEWPORT GEOMETRY CORRECTION
   The physical phone can report a wide CSS viewport (Desktop Site /
   zoomed viewport). Earlier rules resized the invoice internals but
   left the desktop container/sidebar geometry in place, making the
   whole page render as a tiny miniature. This layer corrects the
   parent geometry first, then lets the existing mobile invoice rules
   size the children.
   ================================================================ */
@media (pointer:coarse) and (max-width:1100px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;}
  body.billi-app{width:100%!important;max-width:100%!important;min-width:0!important;}
  body.billi-app>nav.b72-global-nav{
    position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;
    width:100%!important;height:68px!important;min-height:68px!important;max-height:68px!important;
    margin:0!important;padding:8px 16px!important;display:flex!important;flex-direction:row!important;
    align-items:center!important;box-sizing:border-box!important;z-index:2000!important;
  }
  body.billi-app>nav.b72-global-nav .menu-toggle{display:grid!important;}
  body.billi-app>nav.b72-global-nav .logo{display:inline-flex!important;}
  body.billi-app>nav.b72-global-nav .navlinks{display:none!important;}
  body.billi-app>nav.b72-global-nav .navlinks.open{display:flex!important;}
  body.billi-app>main.container,
  body.billi-app>main.container.dashboard-page{
    margin:0!important;margin-left:0!important;margin-right:0!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:82px 14px 40px!important;box-sizing:border-box!important;
  }
  body.billi-app.v63-invoice-body>main.container.invoice-page{
    margin:0!important;margin-left:0!important;margin-right:0!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:82px 14px 40px!important;box-sizing:border-box!important;
  }
  body.billi-app.v63-invoice-body .v63-content{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;box-sizing:border-box!important;
  }
  body.billi-app.v63-invoice-body .v63-invoice-card,
  body.billi-app.v63-invoice-body .v63-actions,
  body.billi-app.v63-invoice-body .v63-page-head{
    width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
  }
  body.billi-app.v63-invoice-body .v63-invoice-card{margin-left:0!important;margin-right:0!important;}

  /* Keep touch targets comfortably tappable even when the browser reports
     a desktop-style viewport. */
  body.billi-app .btn{min-height:44px;box-sizing:border-box;}
  body.billi-app input,body.billi-app select,body.billi-app textarea{font-size:16px!important;}
}

@media (pointer:coarse) and (max-width:380px){
  body.billi-app>main.container,
  body.billi-app>main.container.dashboard-page,
  body.billi-app.v63-invoice-body>main.container.invoice-page{padding-left:10px!important;padding-right:10px!important;}
}

/* ================================================================
   BILLI PRO V136 — TOUCH DEVICE / CUSTOMER APP RESPONSIVE HARDENING
   The invoice screen has its own touch layout. This companion layer
   hardens the remaining customer/admin application pages so a touch
   phone never inherits desktop geometry that causes clipping, tiny
   controls, or horizontal overflow.
   ================================================================ */
@media (pointer:coarse) and (max-width:1100px){
  html,body{max-width:100%;overflow-x:hidden!important;}
  body.billi-app:not(.v63-invoice-body)>main.container,
  body.billi-app:not(.v63-invoice-body)>.container{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    min-width:0!important;
  }
  body.billi-app:not(.v63-invoice-body) .container,
  body.billi-app:not(.v63-invoice-body) .card,
  body.billi-app:not(.v63-invoice-body) .hero,
  body.billi-app:not(.v63-invoice-body) .section-head,
  body.billi-app:not(.v63-invoice-body) .section-title,
  body.billi-app:not(.v63-invoice-body) .grid2,
  body.billi-app:not(.v63-invoice-body) .stats,
  body.billi-app:not(.v63-invoice-body) .dashboard-stats{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.billi-app:not(.v63-invoice-body) .hero,
  body.billi-app:not(.v63-invoice-body) .section-head,
  body.billi-app:not(.v63-invoice-body) .section-title{
    overflow:visible!important;
  }
  body.billi-app:not(.v63-invoice-body) .hero h1,
  body.billi-app:not(.v63-invoice-body) h1,
  body.billi-app:not(.v63-invoice-body) h2,
  body.billi-app:not(.v63-invoice-body) h3,
  body.billi-app:not(.v63-invoice-body) p,
  body.billi-app:not(.v63-invoice-body) .muted,
  body.billi-app:not(.v63-invoice-body) .field-value,
  body.billi-app:not(.v63-invoice-body) .break-anywhere{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  body.billi-app:not(.v63-invoice-body) .grid2{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  body.billi-app:not(.v63-invoice-body) .page-actions{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  body.billi-app:not(.v63-invoice-body) .page-actions .btn,
  body.billi-app:not(.v63-invoice-body) .page-actions form,
  body.billi-app:not(.v63-invoice-body) .page-actions form .btn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.billi-app:not(.v63-invoice-body) .btn{
    min-height:46px!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  body.billi-app:not(.v63-invoice-body) input,
  body.billi-app:not(.v63-invoice-body) select,
  body.billi-app:not(.v63-invoice-body) textarea{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    font-size:16px!important;
  }
  body.billi-app:not(.v63-invoice-body) .responsive-table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:visible!important;
    box-sizing:border-box!important;
  }
  body.billi-app:not(.v63-invoice-body) .responsive-table table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }
  body.billi-app:not(.v63-invoice-body) .responsive-table td,
  body.billi-app:not(.v63-invoice-body) .responsive-table th{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}

@media (pointer:coarse) and (max-width:480px){
  body.billi-app:not(.v63-invoice-body)>main.container,
  body.billi-app:not(.v63-invoice-body)>.container{padding-left:12px!important;padding-right:12px!important;}
  body.billi-app:not(.v63-invoice-body) .card{padding:15px!important;}
  body.billi-app:not(.v63-invoice-body) .page-actions{grid-template-columns:1fr!important;gap:8px!important;}
  body.billi-app:not(.v63-invoice-body) .stats,
  body.billi-app:not(.v63-invoice-body) .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
}


/* V137: very narrow touch-device action/table safety. */
@media (max-width:380px){
  .history-actions,.invoice-list-actions,.admin-actions{gap:8px;flex-wrap:wrap}
  .history-actions .btn,.invoice-list-actions .btn,.admin-actions .btn{min-height:42px}
  .responsive-table td,.responsive-table th{overflow-wrap:anywhere}
}


/* ============================================================
   V165 — V150 RESTORE + REFERENCE LEGAL CENTRE
   Only legal/trust presentation is added here. Existing V150
   application, invoice, financial and authentication styling
   remains the baseline.
   ============================================================ */
body.billi-legal-page{background:#f4f6fa!important;color:#172033!important;overflow-x:hidden!important;}
body.billi-legal-page>nav.billi-legal-header{position:sticky!important;top:0!important;z-index:1100!important;height:72px!important;min-height:72px!important;padding:0 max(24px,4.5vw)!important;background:#fff!important;border-bottom:1px solid #e2e7ee!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;}
body.billi-legal-page>nav.billi-legal-header .logo{font-size:22px!important;line-height:1!important;color:#172033!important;}
body.billi-legal-page>nav.billi-legal-header .logo span{font-size:10px!important;padding:5px 8px!important;border-radius:7px!important;background:#172033!important;color:#fff!important;}
body.billi-legal-page>nav.billi-legal-header .menu-toggle{display:inline-flex!important;width:46px!important;height:44px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#172033!important;}
body.billi-legal-page>nav.billi-legal-header .menu-toggle:hover{background:#f3f5f8!important;}
body.billi-legal-page>nav.billi-legal-header .menu-icon{width:28px!important;height:22px!important;display:flex!important;}
body.billi-legal-page>nav.billi-legal-header .menu-icon i{width:28px!important;height:2.5px!important;background:#172033!important;border-radius:99px!important;}
body.billi-legal-page>nav.billi-legal-header .navlinks{position:absolute!important;top:calc(100% + 8px)!important;right:24px!important;left:auto!important;width:min(310px,calc(100vw - 32px))!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;padding:10px!important;background:#fff!important;border:1px solid #dfe5ee!important;border-radius:14px!important;box-shadow:0 20px 50px rgba(23,32,51,.16)!important;}
body.billi-legal-page>nav.billi-legal-header .navlinks.open{display:flex!important;}
body.billi-legal-page>nav.billi-legal-header .navlinks a{display:block!important;margin:0!important;padding:12px 13px!important;border-radius:9px!important;color:#33425b!important;font-size:14px!important;font-weight:800!important;}
body.billi-legal-page>nav.billi-legal-header .navlinks a:hover{background:#eef4ff!important;color:#2457d6!important;}
body.billi-legal-page>nav.billi-legal-header .navlinks a.btn{color:#fff!important;background:#2457d6!important;text-align:center!important;}
body.billi-legal-page .mobile-nav-backdrop{display:none!important;}

body.billi-legal-page .legal-reference{background:#f4f6fa!important;}
body.billi-legal-page .legal-reference-inner{width:min(980px,100%)!important;margin:0 auto!important;padding:22px 34px 0!important;box-sizing:border-box!important;}
body.billi-legal-page .legal-reference-head{margin:0!important;padding:0!important;}
body.billi-legal-page .legal-reference-eyebrow{margin:0 0 12px!important;color:#6f7d92!important;font-size:12px!important;line-height:1.3!important;font-weight:900!important;letter-spacing:1.45px!important;}
body.billi-legal-page .legal-reference-head h1{margin:0 0 10px!important;color:#172033!important;font-size:clamp(38px,5.4vw,50px)!important;line-height:1.05!important;letter-spacing:-1.65px!important;font-weight:950!important;}
body.billi-legal-page .legal-reference-head>p{max-width:780px!important;margin:0!important;color:#5d697c!important;font-size:19px!important;line-height:1.5!important;}
body.billi-legal-page .legal-reference-meta{display:grid!important;grid-template-columns:1fr 1fr!important;margin-top:22px!important;}
body.billi-legal-page .legal-reference-meta-item{display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:5px 18px 5px 0!important;min-width:0!important;}
body.billi-legal-page .legal-reference-meta-item+ .legal-reference-meta-item{border-left:1px solid #d8dee8!important;padding-left:28px!important;}
body.billi-legal-page .legal-reference-icon{width:44px!important;height:44px!important;border-radius:50%!important;background:#e7efff!important;color:#2457d6!important;display:grid!important;place-items:center!important;}
body.billi-legal-page .legal-reference-icon svg{width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
body.billi-legal-page .legal-reference-meta-item small{display:block!important;margin:0 0 3px!important;color:#56647a!important;font-size:13px!important;line-height:1.3!important;}
body.billi-legal-page .legal-reference-meta-item strong{display:block!important;margin:0!important;color:#172033!important;font-size:15px!important;line-height:1.35!important;font-weight:900!important;overflow-wrap:anywhere!important;}

body.billi-legal-page .legal-reference-tabs{display:flex!important;align-items:stretch!important;justify-content:space-between!important;gap:8px!important;margin:20px 0 18px!important;padding:0!important;border-bottom:1px solid #d9e0e9!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
body.billi-legal-page .legal-reference-tabs a{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;margin:0!important;padding:8px 8px 11px!important;color:#667389!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:14px!important;font-weight:800!important;line-height:1.35!important;white-space:nowrap!important;text-decoration:none!important;}
body.billi-legal-page .legal-reference-tabs a.active{color:#2457d6!important;font-weight:900!important;}
body.billi-legal-page .legal-reference-tabs a.active:after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:3px!important;border-radius:4px 4px 0 0!important;background:#2457d6!important;}

body.billi-legal-page .legal-copy{margin:0!important;padding:0!important;}
body.billi-legal-page .legal-copy h2{margin:18px 0 8px!important;color:#172033!important;font-size:25px!important;line-height:1.23!important;letter-spacing:-.45px!important;font-weight:950!important;}
body.billi-legal-page .legal-copy h2:first-child{margin-top:12px!important;}
body.billi-legal-page .legal-copy p,body.billi-legal-page .legal-copy li{margin:0 0 17px!important;color:#253147!important;font-size:16px!important;line-height:1.62!important;}
body.billi-legal-page .legal-copy ul{margin:0 0 18px!important;padding-left:23px!important;}
body.billi-legal-page .legal-copy li{margin-bottom:7px!important;}
body.billi-legal-page .legal-copy a{color:#2457d6!important;font-weight:800!important;}

body.billi-legal-page .legal-overview-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:13px!important;margin:20px 0 22px!important;}
body.billi-legal-page .legal-overview-grid a{display:flex!important;flex-direction:column!important;gap:5px!important;padding:15px!important;background:#fff!important;border:1px solid #dfe5ed!important;border-radius:13px!important;text-decoration:none!important;}
body.billi-legal-page .legal-overview-grid strong{font-size:14px!important;color:#2457d6!important;line-height:1.35!important;}
body.billi-legal-page .legal-overview-grid span{font-size:12px!important;line-height:1.5!important;color:#69768a!important;}
body.billi-legal-page .legal-important{display:grid!important;grid-template-columns:1fr!important;margin:18px 0 22px!important;padding:16px 18px!important;background:#eaf2ff!important;border:1px solid #d5e4ff!important;border-radius:14px!important;}
body.billi-legal-page .legal-important strong{color:#2457d6!important;font-size:15px!important;line-height:1.35!important;}
body.billi-legal-page .legal-important p{margin:4px 0 0!important;color:#334a68!important;font-size:14px!important;line-height:1.55!important;}
body.billi-legal-page .legal-channel-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:16px 0 24px!important;}
body.billi-legal-page .legal-channel-list>div{display:flex!important;flex-direction:column!important;gap:3px!important;padding:13px 14px!important;background:#fff!important;border:1px solid #e0e6ee!important;border-radius:12px!important;min-width:0!important;}
body.billi-legal-page .legal-channel-list b{font-size:13px!important;color:#26334a!important;}
body.billi-legal-page .legal-channel-list a{font-size:12px!important;overflow-wrap:anywhere!important;}

body.billi-legal-page .legal-security-card{display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;gap:13px!important;align-items:center!important;margin:18px 0 14px!important;padding:13px 18px!important;background:#eaf2ff!important;border:1px solid #d5e4ff!important;border-radius:14px!important;}
body.billi-legal-page .legal-security-icon{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#2457d6!important;color:#fff!important;}
body.billi-legal-page .legal-security-icon svg{width:24px!important;height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
body.billi-legal-page .legal-security-card strong{display:block!important;margin:0 0 2px!important;color:#2457d6!important;font-size:15px!important;line-height:1.3!important;}
body.billi-legal-page .legal-security-card p{margin:0!important;color:#334a68!important;font-size:13px!important;line-height:1.55!important;}
body.billi-legal-page .legal-contact-card{display:grid!important;grid-template-columns:52px minmax(0,1fr) auto!important;gap:13px!important;align-items:center!important;margin:0 0 14px!important;padding:14px 17px!important;background:#eaf9f0!important;border:1px solid #cfead9!important;border-radius:14px!important;}
body.billi-legal-page .legal-contact-icon{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#19ae67!important;color:#fff!important;}
body.billi-legal-page .legal-contact-icon svg{width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
body.billi-legal-page .legal-contact-text{min-width:0!important;}
body.billi-legal-page .legal-contact-text strong{display:block!important;margin:0 0 2px!important;color:#172033!important;font-size:15px!important;line-height:1.35!important;}
body.billi-legal-page .legal-contact-text p{margin:0 0 1px!important;color:#526177!important;font-size:13px!important;line-height:1.45!important;}
body.billi-legal-page .legal-contact-text a{display:block!important;color:#2457d6!important;font-size:13px!important;line-height:1.45!important;font-weight:850!important;overflow-wrap:anywhere!important;}
body.billi-legal-page .legal-email-button{width:auto!important;min-width:104px!important;min-height:46px!important;margin:0!important;padding:10px 15px!important;border-radius:10px!important;background:#2457d6!important;color:#fff!important;font-size:13px!important;font-weight:900!important;box-shadow:none!important;}
body.billi-legal-page .legal-transparency-card{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;margin:0 0 18px!important;padding:16px!important;background:#fff!important;border:1px solid #dfe5ed!important;border-radius:14px!important;}
body.billi-legal-page .legal-transparency-icon{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#eef1f5!important;color:#687487!important;font-size:18px!important;font-weight:900!important;}
body.billi-legal-page .legal-transparency-card strong{display:block!important;margin:0 0 4px!important;color:#26334a!important;font-size:14px!important;line-height:1.35!important;}
body.billi-legal-page .legal-transparency-card p{margin:0!important;color:#59677c!important;font-size:13px!important;line-height:1.6!important;}

body.billi-legal-page .legal-reference-footer{margin-top:0!important;padding:18px 0 34px!important;border-top:1px solid #dce2ea!important;}
body.billi-legal-page .legal-footer-links-title{margin:0 0 7px!important;color:#172033!important;font-size:18px!important;line-height:1.3!important;font-weight:950!important;}
body.billi-legal-page .legal-footer-links{display:flex!important;flex-wrap:wrap!important;gap:0!important;align-items:center!important;}
body.billi-legal-page .legal-footer-links a{display:inline!important;color:#315fae!important;font-size:13px!important;line-height:1.9!important;text-decoration:none!important;}
body.billi-legal-page .legal-footer-links a:not(:last-child):after{content:"|"!important;color:#a0a9b7!important;margin:0 11px!important;}
body.billi-legal-page .legal-footer-bottom{display:flex!important;justify-content:space-between!important;gap:20px!important;margin-top:17px!important;padding-top:17px!important;border-top:1px solid #dce2ea!important;color:#4e5d73!important;font-size:13px!important;line-height:1.45!important;}
body.billi-legal-page .legal-footer-bottom strong{display:block!important;color:#172033!important;font-size:14px!important;}
body.billi-legal-page .legal-footer-bottom span{display:block!important;color:#7a8698!important;margin-top:2px!important;}
body.billi-legal-page .legal-footer-bottom>div:last-child{text-align:right!important;}

@media(max-width:760px){
 body.billi-legal-page .legal-reference-inner{padding:22px 24px 0!important;}
 body.billi-legal-page .legal-reference-head h1{font-size:40px!important;}
 body.billi-legal-page .legal-reference-head>p{font-size:18px!important;line-height:1.5!important;}
 body.billi-legal-page .legal-overview-grid{grid-template-columns:1fr 1fr!important;}
 body.billi-legal-page .legal-reference-footer{padding-bottom:28px!important;}
}
@media(max-width:560px){
 body.billi-legal-page>nav.billi-legal-header{padding:0 18px!important;}
 body.billi-legal-page .legal-reference-inner{padding:20px 20px 0!important;}
 body.billi-legal-page .legal-reference-eyebrow{font-size:11px!important;letter-spacing:1.25px!important;}
 body.billi-legal-page .legal-reference-head h1{font-size:34px!important;letter-spacing:-1.15px!important;}
 body.billi-legal-page .legal-reference-head>p{font-size:16px!important;}
 body.billi-legal-page .legal-reference-meta{margin-top:18px!important;}
 body.billi-legal-page .legal-reference-meta-item{grid-template-columns:38px minmax(0,1fr)!important;gap:9px!important;padding-right:8px!important;}
 body.billi-legal-page .legal-reference-meta-item+ .legal-reference-meta-item{padding-left:15px!important;}
 body.billi-legal-page .legal-reference-icon{width:36px!important;height:36px!important;}
 body.billi-legal-page .legal-reference-icon svg{width:19px!important;height:19px!important;}
 body.billi-legal-page .legal-reference-meta-item small{font-size:11px!important;}
 body.billi-legal-page .legal-reference-meta-item strong{font-size:13px!important;}
 body.billi-legal-page .legal-reference-tabs{margin-top:18px!important;gap:0!important;}
 body.billi-legal-page .legal-reference-tabs a{font-size:12px!important;padding:8px 2px 10px!important;}
 body.billi-legal-page .legal-copy h2{font-size:21px!important;line-height:1.25!important;margin-top:17px!important;}
 body.billi-legal-page .legal-copy p,body.billi-legal-page .legal-copy li{font-size:15px!important;line-height:1.65!important;}
 body.billi-legal-page .legal-overview-grid{grid-template-columns:1fr!important;}
 body.billi-legal-page .legal-channel-list{grid-template-columns:1fr!important;}
 body.billi-legal-page .legal-contact-card{grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;padding:14px!important;}
 body.billi-legal-page .legal-contact-icon{width:38px!important;height:38px!important;}
 body.billi-legal-page .legal-email-button{grid-column:2!important;width:100%!important;}
 body.billi-legal-page .legal-security-card{grid-template-columns:42px minmax(0,1fr)!important;padding:12px!important;}
 body.billi-legal-page .legal-security-icon{width:36px!important;height:36px!important;}
 body.billi-legal-page .legal-footer-bottom{align-items:flex-start!important;}
}
@media(max-width:380px){
 body.billi-legal-page .legal-reference-inner{padding-left:16px!important;padding-right:16px!important;}
 body.billi-legal-page .legal-reference-head h1{font-size:31px!important;}
 body.billi-legal-page .legal-reference-tabs a{font-size:11px!important;}
}

/* V166 — Desktop legal/trust correction
   Preserve the V165 mobile/reference presentation. On laptop/desktop,
   restore the V150-style horizontal public navigation and give the legal
   centre a deliberate desktop composition. */
@media (min-width:761px){
  body.billi-legal-page>nav.billi-legal-header{
    position:sticky!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 max(24px,4vw)!important;
    background:rgba(255,255,255,.98)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    border-bottom:1px solid rgba(226,232,240,.95)!important;
    box-shadow:0 5px 24px rgba(23,32,51,.055)!important;
  }
  body.billi-legal-page>nav.billi-legal-header .menu-toggle{display:none!important;}
  body.billi-legal-page>nav.billi-legal-header .navlinks{
    position:static!important;
    width:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  body.billi-legal-page>nav.billi-legal-header .navlinks a{
    display:flex!important;
    align-items:center!important;
    margin:0!important;
    padding:10px 11px!important;
    border-radius:10px!important;
    color:#536177!important;
    font-size:14px!important;
    font-weight:750!important;
    white-space:nowrap!important;
    text-decoration:none!important;
  }
  body.billi-legal-page>nav.billi-legal-header .navlinks a:hover{
    background:#eef2ff!important;
    color:#2457d6!important;
  }
  body.billi-legal-page>nav.billi-legal-header .navlinks a.btn,
  body.billi-legal-page>nav.billi-legal-header .navlinks a.btn:hover{
    color:#fff!important;
    background:#2457d6!important;
  }
  body.billi-legal-page .mobile-nav-backdrop{display:none!important;}

  body.billi-legal-page .legal-reference-inner{
    width:min(1120px,calc(100% - 64px))!important;
    padding:38px 0 0!important;
  }
  body.billi-legal-page .legal-reference-head h1{
    font-size:clamp(42px,4.2vw,56px)!important;
    letter-spacing:-1.8px!important;
  }
  body.billi-legal-page .legal-reference-head>p{
    max-width:820px!important;
    font-size:20px!important;
  }
  body.billi-legal-page .legal-reference-meta{
    max-width:760px!important;
    margin-top:26px!important;
  }
  body.billi-legal-page .legal-reference-tabs{
    margin-top:24px!important;
    margin-bottom:24px!important;
  }
  body.billi-legal-page .legal-reference-tabs a{
    min-height:50px!important;
    padding-left:18px!important;
    padding-right:18px!important;
    font-size:15px!important;
  }
  body.billi-legal-page .legal-copy{
    max-width:900px!important;
  }
  body.billi-legal-page .legal-copy h2{
    font-size:28px!important;
    margin-top:24px!important;
  }
  body.billi-legal-page .legal-copy p,
  body.billi-legal-page .legal-copy li{
    font-size:17px!important;
    line-height:1.68!important;
  }
  body.billi-legal-page .legal-overview-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }
  body.billi-legal-page .legal-channel-list{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.billi-legal-page .legal-security-card,
  body.billi-legal-page .legal-contact-card,
  body.billi-legal-page .legal-transparency-card{
    max-width:900px!important;
  }
  body.billi-legal-page .legal-reference-footer{
    margin-top:8px!important;
  }
}

@media (min-width:761px) and (max-width:1000px){
  body.billi-legal-page>nav.billi-legal-header .navlinks{gap:0!important;}
  body.billi-legal-page>nav.billi-legal-header .navlinks a{padding:8px 7px!important;font-size:13px!important;}
  body.billi-legal-page .legal-reference-inner{width:min(940px,calc(100% - 44px))!important;}
}


/* V168 — Public navigation/link integrity layer.
   V166 is the approved visual baseline. This layer does not redesign the
   application; it prevents public pages reached from the landing page from
   falling back to an older/cached interface and keeps the public shell
   consistent across Home, Legal & Trust Centre, Support, Sign in and
   Account Creation. */
body.landing-page > nav,
body.billi-legal-page > nav {
  width:100%;
  box-sizing:border-box;
}
body.landing-page > nav .navlinks,
body.billi-legal-page > nav .navlinks { box-sizing:border-box; }

/* Public pages use root-level navigation targets; visual treatment remains
   controlled by the existing V166/V150 rules. */
@media (min-width:761px){
  body.billi-legal-page > nav.billi-legal-header .navlinks { visibility:visible; opacity:1; }
}

/* Avoid browser-default oversized/replaced-element behaviour on public media. */
body.landing-page img,
body.billi-legal-page img,
body.auth-page img { max-width:100%; height:auto; }


/* V172 — Structural legal-tab hardening + cache-busted release.
   Legal tabs are intentionally a DIV, not a NAV. This prevents the legacy
   global `nav { position: sticky; backdrop-filter: blur(...) }` rule from
   ever applying to the tab strip. The tabs remain ordinary document flow.
*/
body.billi-legal-page .legal-reference-tabs{
  position:static!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  z-index:auto!important;
  width:100%!important;min-height:0!important;height:auto!important;
  padding:0!important;margin:20px 0 18px!important;
  display:flex!important;align-items:stretch!important;justify-content:space-between!important;
  gap:8px!important;
  background:transparent!important;background-image:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:0!important;border-bottom:1px solid #d9e0e9!important;
  border-radius:0!important;box-shadow:none!important;
  transform:none!important;filter:none!important;opacity:1!important;
  overflow:visible!important;
  isolation:auto!important;
}
body.billi-legal-page .legal-reference-tabs a{
  position:relative!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:48px!important;margin:0!important;padding:8px 8px 11px!important;
  background:transparent!important;background-image:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;filter:none!important;opacity:1!important;
}
body.billi-legal-page>nav.billi-legal-header{
  background:#fff!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* V173 — release asset cache marker. No visual changes. */


/* V174 — Admin state-changing actions and logout hardening. */
.admin-logout-form{display:inline-flex;margin:0;padding:0;align-items:center}
.admin-logout-form .nav-logout-button{font:inherit;color:inherit;background:none;border:0;padding:8px 10px;cursor:pointer}
.admin-logout-form .nav-logout-button:hover{text-decoration:underline}
@media(max-width:760px){.admin-logout-form{width:100%}.admin-logout-form .nav-logout-button{width:100%;text-align:left;padding:12px 0}}


/* V177 — Reusable business defaults and form guidance. */
.billi-defaults-tip{margin-top:12px;padding:11px 13px;border:1px solid #dbe6f7;border-radius:10px;background:#f7faff;color:#536177;font-size:12px;line-height:1.55}
.billi-defaults-tip strong{color:#2457d6}
.form-section textarea + small,.form-section input + small{display:block;margin-top:5px;color:#7a8699;font-size:11px;line-height:1.45}


/* ================================================================
   BILLI PRO V179 — SINGLE-FIELD MOBILE SEARCH
   Remove the native search-input chrome that made one search control
   appear as an outer field plus a second inner field on Android Chrome.
   The wrapper is the only visible field; clear is an explicit control.
   ================================================================ */
@media(max-width:760px){
  body.billi-app>main.container .b70-mobile-searchbar,
  body.v63-invoice-body .v63-content .b70-mobile-searchbar,
  html.billi-physical-mobile .b70-mobile-searchbar{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    height:52px!important;
    margin:0 0 18px!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    border:1px solid #d6dfeb!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(23,32,51,.055)!important;
    overflow:hidden!important;
  }
  .b70-mobile-searchbar .b70-search-submit{
    width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;
    display:grid!important;place-items:center!important;padding:0!important;
    border:0!important;border-radius:9px!important;background:transparent!important;
    color:#718096!important;box-shadow:none!important;outline:0!important;
  }
  .b70-mobile-searchbar .b70-search-submit svg{
    width:20px!important;height:20px!important;display:block!important;
    fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;
    stroke-linecap:round!important;stroke-linejoin:round!important;
  }
  .b70-mobile-searchbar input,
  html.billi-physical-mobile .b70-mobile-searchbar input{
    min-width:0!important;flex:1 1 auto!important;width:auto!important;height:42px!important;
    margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;outline:0!important;
    background:transparent!important;background-image:none!important;
    box-shadow:none!important;
    color:#172033!important;font:600 15px/1.25 inherit!important;
    appearance:none!important;-webkit-appearance:none!important;
  }
  .b70-mobile-searchbar input:focus,
  html.billi-physical-mobile .b70-mobile-searchbar input:focus{
    border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
  }
  .b70-mobile-searchbar input::placeholder{color:#7b8799!important;opacity:1!important}
  .b70-mobile-searchbar input::-webkit-search-decoration,
  .b70-mobile-searchbar input::-webkit-search-cancel-button,
  .b70-mobile-searchbar input::-webkit-search-results-button,
  .b70-mobile-searchbar input::-webkit-search-results-decoration{display:none!important;-webkit-appearance:none!important;appearance:none!important}
  .b70-mobile-searchbar .b70-search-clear{
    width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px!important;
    display:grid!important;place-items:center!important;padding:0!important;
    border:0!important;border-radius:50%!important;background:#f1f4f8!important;
    color:#64748b!important;font:700 20px/1 Arial,sans-serif!important;
    box-shadow:none!important;cursor:pointer!important;
  }
  .b70-mobile-searchbar .b70-search-clear[hidden]{display:none!important}
  .b70-mobile-searchbar .b70-search-clear:active,
  .b70-mobile-searchbar .b70-search-clear:focus-visible{background:#e8eef9!important;color:#2457d6!important}
  .b70-mobile-searchbar:focus-within{
    border-color:#9db4e6!important;
    box-shadow:0 0 0 3px rgba(36,87,214,.08),0 5px 16px rgba(23,32,51,.055)!important;
  }
}
@media(max-width:420px){
  .b70-mobile-searchbar{height:50px!important;margin-bottom:16px!important}
  .b70-mobile-searchbar input{font-size:14px!important}
}

/* V182 — Launch-readiness search readability guard.
   Preserve V181 search behavior; only ensure the complete placeholder can
   render without clipping on narrow screens. */
.b70-topbar-search input,
.b70-mobile-searchbar input,
body.search-page .b93-search-row input{
  min-width:0!important;
  box-sizing:border-box!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
@media(max-width:430px){
  /* V186 — improve mobile search readability while retaining the complete
     agreed placeholder on narrow Android Chrome viewports. */
  .b70-mobile-searchbar input{font-size:15px!important;letter-spacing:-.10px!important}
  .b70-mobile-searchbar input::placeholder{font-size:15px!important;font-weight:600!important;letter-spacing:-.18px!important}
  body.search-page .b93-search-row input{font-size:15px!important;letter-spacing:-.10px!important}
  body.search-page .b93-search-row input::placeholder{font-size:15px!important;font-weight:600!important;letter-spacing:-.18px!important}
}

@media(max-width:380px){
  /* Keep the complete placeholder visible even on the narrowest supported
     phone widths, while staying substantially more readable than V185. */
  .b70-mobile-searchbar input{font-size:14.5px!important;letter-spacing:-.16px!important}
  .b70-mobile-searchbar input::placeholder{font-size:14.5px!important;font-weight:600!important;letter-spacing:-.24px!important}
  body.search-page .b93-search-row input{font-size:14.5px!important;letter-spacing:-.16px!important}
  body.search-page .b93-search-row input::placeholder{font-size:14.5px!important;font-weight:600!important;letter-spacing:-.24px!important}
}

/* V188 — Search result action consistency: every result type exposes the same View affordance. */
.b93-result-actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;flex:0 0 auto;white-space:nowrap}
.b93-result-view{color:#2457d6;font-weight:700;font-size:13px;line-height:1.2}
@media(max-width:760px){.b93-result-actions{min-width:74px}.b93-result-view{font-size:13px}.b93-result-row{gap:10px}}

/* BILLI PRO V197 — Compact, refined customer + admin UI */
.btn{min-height:40px;padding:9px 13px;border-radius:9px;font-size:13px;line-height:1.2;gap:6px;box-shadow:0 3px 10px rgba(36,87,214,.12)}
.btn.small{min-height:34px;padding:7px 10px;font-size:12px;border-radius:8px}
.btn:hover{transform:translateY(-1px)}
.page-actions{gap:7px}
.card{padding:20px;border-radius:15px;box-shadow:0 8px 24px rgba(23,32,51,.045)}
.grid2{gap:14px}
.section-title{margin-bottom:12px}
.section-head{margin-bottom:12px}
.container{margin-top:30px;margin-bottom:30px}
input,select,textarea{padding:10px 12px;border-radius:9px}
label{margin:11px 0;font-size:12px}
.form-section{padding:16px 18px;margin-bottom:14px;border-radius:13px}
.stat{padding:14px;border-radius:12px}
.customer{padding:11px 0}
.quick-action-grid{gap:7px}
.dashboard-row{padding:11px 0}
.invoice-view-actions,.invoice-list-actions{gap:6px}
.table-wrap{border-radius:11px}
.responsive-table td .btn{min-height:36px;padding:7px 10px;font-size:12px}
.price-card{padding:19px;border-radius:14px}
.public-price-card{padding:20px;border-radius:15px}
.feature-card{padding:19px;border-radius:15px}
.workflow-step{padding:16px;border-radius:14px}
.account-billing-card{padding:15px;border-radius:14px;gap:12px}
.payment-box,.form-help-box,.note{padding:13px 14px;border-radius:11px}
.invoice-submit-box{padding:15px;border-radius:12px}

body.billi-app>.container{padding-top:28px;padding-bottom:40px}
body.billi-app .card{padding:20px;border-radius:15px}
body.billi-app .page-actions{gap:7px}
body.billi-app .page-actions .btn{min-width:110px}
body.billi-app .section-title{margin-bottom:12px}
body.billi-app .form-section{padding:16px 18px;margin-bottom:14px}

@media(max-width:760px){
  .container{margin-top:20px;margin-bottom:22px;padding-left:14px;padding-right:14px}
  .card,body.billi-app .card{padding:16px;border-radius:13px}
  .btn{min-height:40px;padding:9px 12px;font-size:13px}
  .btn.small{min-height:36px;padding:8px 10px;font-size:12px}
  .page-actions{gap:7px}
  body.billi-app>.container{padding-top:20px;padding-bottom:30px}
  body.billi-app .page-actions .btn{min-width:0}
  input,select,textarea{padding:10px 11px}
  .form-section,body.billi-app .form-section{padding:14px 15px;margin-bottom:12px}
}
@media(max-width:480px){
  .container{padding-left:12px;padding-right:12px}
  .card,body.billi-app .card{padding:14px;border-radius:12px}
  .btn{min-height:39px;padding:8px 11px;font-size:12.5px}
  .btn.small{min-height:35px;padding:7px 9px;font-size:11.5px}
  .stat{padding:12px}
  .form-section,body.billi-app .form-section{padding:13px 14px}
}

/* V199 — Compact visual refinement across customer + admin interfaces.
   Target: reduce oversized controls/cards while preserving comfortable touch use. */
.btn{min-height:38px!important;padding:8px 11px!important;border-radius:8px!important;font-size:12.5px!important;line-height:1.15!important;gap:5px!important;box-shadow:0 2px 7px rgba(36,87,214,.10)!important}
.btn.small{min-height:32px!important;padding:6px 9px!important;font-size:11.5px!important;border-radius:7px!important}
.page-actions{gap:6px!important}
.card{padding:16px!important;border-radius:13px!important;box-shadow:0 6px 18px rgba(23,32,51,.04)!important}
.form-section{padding:14px 16px!important;margin-bottom:12px!important;border-radius:12px!important}
input,select,textarea{min-height:42px!important;padding:8px 10px!important;border-radius:8px!important}
label{margin:9px 0!important;font-size:12px!important}
.section-title,.section-head{margin-bottom:10px!important}
.stat{padding:12px!important;border-radius:11px!important}
.quick-action-grid{gap:6px!important}
.dashboard-row{padding:9px 0!important}
.table-wrap{border-radius:10px!important}
.responsive-table td .btn{min-height:34px!important;padding:6px 9px!important;font-size:11.5px!important}
.price-card,.feature-card{padding:16px!important;border-radius:13px!important}
.public-price-card{padding:17px!important;border-radius:13px!important}
.workflow-step{padding:14px!important;border-radius:12px!important}
.account-billing-card{padding:13px!important;border-radius:12px!important;gap:10px!important}
.payment-box,.form-help-box,.note{padding:11px 12px!important;border-radius:10px!important}
.invoice-submit-box{padding:13px!important;border-radius:11px!important}

/* Invoice action tiles were the visibly oversized controls in V197. */
.v63-actions{gap:7px!important}
.v63-action{min-height:50px!important;padding:7px 9px!important;border-radius:10px!important;gap:7px!important;box-shadow:0 3px 10px rgba(23,32,51,.035)!important}
.v63-action-icon{font-size:20px!important}
.v63-action-icon svg{width:21px!important;height:21px!important}
.v63-action b{font-size:12.5px!important;line-height:1.12!important;font-weight:850!important}
.v63-action small{font-size:10px!important;line-height:1.2!important;margin-top:2px!important}
.v63-delete .v63-action{min-height:48px!important}
.v63-share-card{padding:12px!important}
.v63-share-card .btn{min-height:36px!important}

body.billi-app>.container{padding-top:22px!important;padding-bottom:30px!important}
body.billi-app .card{padding:16px!important;border-radius:13px!important}
body.billi-app .page-actions .btn{min-width:0!important}
body.billi-app input,body.billi-app select,body.billi-app textarea{min-height:42px!important}
body.billi-app .item-row{padding:11px!important;margin-bottom:8px!important;border-radius:11px!important}
body.billi-app .stats .stat{padding:12px!important}
body.billi-app th{padding:10px!important}
body.billi-app td{padding:11px 10px!important}

@media(max-width:760px){
  .container{margin-top:16px!important;margin-bottom:18px!important;padding-left:12px!important;padding-right:12px!important}
  .card,body.billi-app .card{padding:14px!important;border-radius:12px!important}
  .btn{min-height:38px!important;padding:8px 10px!important;font-size:12px!important}
  .btn.small{min-height:32px!important;padding:6px 8px!important;font-size:11px!important}
  input,select,textarea{min-height:40px!important;padding:8px 10px!important}
  .form-section,body.billi-app .form-section{padding:12px 13px!important;margin-bottom:10px!important}
  body.billi-app>.container{padding-top:16px!important;padding-bottom:24px!important}
  .v63-content{padding:12px 10px 24px!important}
  .v63-actions{gap:6px!important;margin-bottom:12px!important}
  .v63-action{min-height:48px!important;padding:7px 7px!important;border-radius:10px!important;gap:6px!important}
  .v63-action b{font-size:12px!important}
  .v63-action-icon{font-size:19px!important}
  .v63-action-icon svg{width:20px!important;height:20px!important}
  .v63-delete .v63-action{min-height:46px!important}
  .v63-invoice-card{padding:15px 12px 13px!important;border-radius:13px!important}
  .v63-party{min-height:0!important;padding:10px 11px!important}
  .v63-finance>div,.v63-finance>a{min-height:0!important;padding:8px!important}
  .v63-share-card{padding:11px!important}
  .v63-share-card .btn{min-height:36px!important}
}
@media(max-width:420px){
  .v63-action{min-height:46px!important;padding:6px!important}
  .v63-action b{font-size:11.5px!important}
  .v63-action-icon{font-size:18px!important}
  .v63-action-icon svg{width:19px!important;height:19px!important}
  .v63-delete .v63-action{min-height:44px!important}
}


/* V199 — Final compact invoice action controls.
   Higher-specificity overrides the legacy V63 mobile rules without changing markup. */
html body.billi-app.v63-invoice-body .v63-actions{gap:7px!important;margin-bottom:14px!important}
html body.billi-app.v63-invoice-body .v63-actions>.v63-action,
html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action{min-height:46px!important;height:46px!important;max-height:46px!important;padding:6px 8px!important;border-radius:10px!important;gap:6px!important;box-shadow:0 2px 7px rgba(23,32,51,.035)!important}
html body.billi-app.v63-invoice-body .v63-actions>.v63-action b,
html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action b{font-size:12px!important;line-height:1.12!important;font-weight:850!important}
html body.billi-app.v63-invoice-body .v63-actions>.v63-action small,
html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action small{display:none!important}
html body.billi-app.v63-invoice-body .v63-actions>.v63-action .v63-action-icon{font-size:18px!important}
html body.billi-app.v63-invoice-body .v63-actions>.v63-action .v63-action-icon svg{width:19px!important;height:19px!important}
@media(max-width:760px){
  html body.billi-app.v63-invoice-body .v63-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important;margin-bottom:14px!important}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action,
  html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action{min-height:46px!important;height:46px!important;max-height:46px!important;padding:6px 7px!important;border-radius:10px!important}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action b,
  html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action b{font-size:12px!important;line-height:1.1!important}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action .v63-action-icon svg{width:19px!important;height:19px!important}
}
@media(max-width:420px){
  html body.billi-app.v63-invoice-body .v63-actions{gap:6px!important}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action,
  html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action{min-height:44px!important;height:44px!important;max-height:44px!important;padding:5px 6px!important;border-radius:9px!important}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action b,
  html body.billi-app.v63-invoice-body .v63-actions>.v63-delete .v63-action b{font-size:11.5px!important}
  html body.billi-app.v63-invoice-body .v63-actions>.v63-action .v63-action-icon svg{width:18px!important;height:18px!important}
}


/* BILLI PRO V14 — logged-in header brand consistency */
body.billi-app > nav.b72-global-nav .logo {
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
body.billi-app > nav.b72-global-nav .logo span {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  min-width:46px!important;
  height:30px!important;
  padding:0 8px!important;
  border:1px solid #172033!important;
  border-radius:7px!important;
  background:#172033!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.5px!important;
}


/* V15 — one identical text-only BILLI PRO header mark before and after sign-in.
   Keep the app icon for installation/share metadata, not inside the site header. */
.landing-page > nav > .logo,
body.billi-app > nav.b72-global-nav > .logo {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:34px!important;
  height:34px!important;
  margin:0!important;
  padding:0!important;
  font-size:21px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.5px!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.landing-page > nav > .logo img,
.landing-page > nav > .logo picture,
body.billi-app > nav.b72-global-nav > .logo img,
body.billi-app > nav.b72-global-nav > .logo picture {
  display:none!important;
}
.landing-page > nav > .logo span,
body.billi-app > nav.b72-global-nav > .logo span {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  flex:0 0 46px!important;
  width:46px!important;
  min-width:46px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 7px!important;
  border:1px solid #172033!important;
  border-radius:7px!important;
  background:#172033!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.5px!important;
}
@media(max-width:760px) {
  .landing-page > nav > .logo,
  body.billi-app > nav.b72-global-nav > .logo {
    font-size:21px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
  }
  .landing-page > nav > .logo span,
  body.billi-app > nav.b72-global-nav > .logo span {
    flex-basis:46px!important;
    width:46px!important;
    min-width:46px!important;
    height:30px!important;
    min-height:30px!important;
    border:1px solid #172033!important;
    background:#172033!important;
    color:#fff!important;
    font-size:10px!important;
  }
}


/* V16 — make the signed-in mobile header match the public white header.
   Keep the same text-only wordmark and badge dimensions in both states. */
@media(max-width:760px){
  body.billi-app>nav.b72-global-nav{
    background:rgba(255,255,255,.98)!important;
    color:#172033!important;
    border-bottom:1px solid rgba(226,232,240,.95)!important;
    box-shadow:0 5px 24px rgba(23,32,51,.055)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  body.billi-app>nav.b72-global-nav>.logo{
    font-size:21px!important;
    font-weight:950!important;
    line-height:1!important;
    letter-spacing:-.5px!important;
    color:#172033!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    gap:8px!important;
  }
  body.billi-app>nav.b72-global-nav>.logo span{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    padding:0 7px!important;
    border:1px solid #172033!important;
    border-radius:7px!important;
    background:#172033!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.5px!important;
  }
  body.billi-app>nav.b72-global-nav>.menu-toggle{
    color:#172033!important;
  }
  body.billi-app>nav.b72-global-nav .b70-mobile-tools,
  body.billi-app>nav.b72-global-nav .b70-mobile-tools button{
    color:#172033!important;
  }
}


/* V17: force the signed-in mobile workspace header to use the same white
   surface and compact text-only BILLI PRO wordmark as the public header. */
@media (max-width: 1000px) {
  body.billi-app > nav.b72-global-nav,
  body.billi-app > nav.b72-global-nav:has(.logo) {
    background:#fff!important;
    background-image:none!important;
    color:#172033!important;
    border:0!important;
    border-bottom:1px solid #e2e8f0!important;
    box-shadow:0 3px 14px rgba(23,32,51,.045)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body.billi-app > nav.b72-global-nav > .logo {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:auto!important;
    max-width:none!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    margin:0!important;
    color:#172033!important;
    font-size:21px!important;
    font-weight:950!important;
    line-height:1!important;
    letter-spacing:-.5px!important;
    text-decoration:none!important;
    white-space:nowrap!important;
  }
  body.billi-app > nav.b72-global-nav > .logo img,
  body.billi-app > nav.b72-global-nav > .logo picture {
    display:none!important;
  }
  body.billi-app > nav.b72-global-nav > .logo span {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    padding:0 7px!important;
    border:1px solid #172033!important;
    border-radius:7px!important;
    background:#172033!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.5px!important;
  }
  body.billi-app > nav.b72-global-nav > .menu-toggle,
  body.billi-app > nav.b72-global-nav > .menu-toggle .menu-icon,
  body.billi-app > nav.b72-global-nav > .menu-toggle .menu-icon i,
  body.billi-app > nav.b72-global-nav .b70-mobile-tools,
  body.billi-app > nav.b72-global-nav .b70-mobile-tools button {
    color:#172033!important;
  }
}


/* V18: authoritative mobile workspace header surface. The prior white-header
   override could be hidden by a stale stylesheet in the installed PWA. */
@media screen and (max-width: 1000px) {
  html body.billi-app nav.b72-global-nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #172033 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 3px 14px rgba(23,32,51,.045) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html body.billi-app nav.b72-global-nav > a.logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    min-height: 34px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #172033 !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
    white-space: nowrap !important;
  }
  html body.billi-app nav.b72-global-nav > a.logo img,
  html body.billi-app nav.b72-global-nav > a.logo picture { display: none !important; }
  html body.billi-app nav.b72-global-nav > a.logo span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 1px solid #172033 !important;
    border-radius: 7px !important;
    background: #172033 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .5px !important;
  }
  html body.billi-app nav.b72-global-nav > .menu-toggle,
  html body.billi-app nav.b72-global-nav .b70-mobile-tools,
  html body.billi-app nav.b72-global-nav .b70-mobile-tools button { color: #172033 !important; }
  html body.billi-app nav.b72-global-nav .menu-icon i { background: #172033 !important; }
}


/* V19: final mobile header correction for physical-phone mode.
   V99 previously hard-coded the authenticated header blue and its logo larger
   than the public header. Keep the existing logged-in controls/layout, but use
   the same white surface and compact wordmark dimensions as the public header. */
@media screen and (max-width: 1000px) {
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #172033 !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 3px 14px rgba(23,32,51,.045) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav > a.logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #172033 !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav > a.logo img,
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav > a.logo picture {
    display: none !important;
  }
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav > a.logo span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 1px solid #172033 !important;
    border-radius: 7px !important;
    background: #172033 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .5px !important;
  }
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav > .menu-toggle,
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav .b70-mobile-tools,
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav .b70-mobile-tools button {
    color: #172033 !important;
  }
  html.billi-physical-mobile body.billi-app > nav.b72-global-nav .menu-icon i {
    background: #172033 !important;
  }
}


/* V20 — single shared BILLI PRO header wordmark for public and signed-in pages.
   Keep the BILLI text and PRO badge at one fixed, balanced size across mobile/PWA modes. */
.landing-page > nav > a.logo,
body.billi-app > nav.b72-global-nav > a.logo {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin:0!important;
  padding:0!important;
  color:#172033!important;
  font-size:21px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.5px!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.landing-page > nav > a.logo img,
.landing-page > nav > a.logo picture,
body.billi-app > nav.b72-global-nav > a.logo img,
body.billi-app > nav.b72-global-nav > a.logo picture { display:none!important; }
.landing-page > nav > a.logo span,
body.billi-app > nav.b72-global-nav > a.logo span {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  flex:0 0 46px!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0 7px!important;
  border:1px solid #172033!important;
  border-radius:7px!important;
  background:#172033!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.5px!important;
}
@media screen and (max-width:1000px) {
  body.billi-app > nav.b72-global-nav {
    background:#fff!important; background-color:#fff!important; background-image:none!important;
    color:#172033!important; border:0!important; border-bottom:1px solid #e2e8f0!important;
    box-shadow:0 3px 14px rgba(23,32,51,.045)!important;
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  }
  body.billi-app > nav.b72-global-nav > .menu-toggle,
  body.billi-app > nav.b72-global-nav .b70-mobile-tools,
  body.billi-app > nav.b72-global-nav .b70-mobile-tools button { color:#172033!important; }
  body.billi-app > nav.b72-global-nav .menu-icon i { background:#172033!important; }
}


/* V21 — use one image wordmark and one identical hamburger treatment on public and signed-in headers. */
.landing-page > nav > a.logo,
body.billi-app > nav.b72-global-nav > a.logo {
  display:inline-flex!important; align-items:center!important; justify-content:flex-start!important;
  flex:0 0 auto!important; width:auto!important; min-width:0!important; height:42px!important;
  min-height:42px!important; max-height:42px!important; margin:0!important; padding:0!important;
  gap:0!important; color:#172033!important; line-height:1!important; text-decoration:none!important;
  white-space:nowrap!important; overflow:visible!important;
}
.landing-page > nav > a.logo img.billi-header-wordmark,
body.billi-app > nav.b72-global-nav > a.logo img.billi-header-wordmark {
  display:block!important; width:180px!important; height:auto!important; max-width:180px!important;
  max-height:42px!important; min-width:180px!important; object-fit:contain!important;
  object-position:left center!important; flex:0 0 180px!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:0!important; background:transparent!important;
}
.landing-page > nav,
body.billi-app > nav.b72-global-nav {
  background:#fff!important; background-color:#fff!important; background-image:none!important;
  color:#172033!important; border-bottom:1px solid #e2e8f0!important;
  box-shadow:0 3px 14px rgba(23,32,51,.045)!important;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
}
.landing-page > nav > .menu-toggle,
body.billi-app > nav.b72-global-nav > .menu-toggle {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  box-sizing:border-box!important; width:48px!important; height:48px!important; min-width:48px!important;
  min-height:48px!important; padding:0!important; margin:0!important; border:1px solid #d7dfeb!important;
  border-radius:12px!important; background:#fff!important; color:#172033!important;
  box-shadow:0 4px 14px rgba(23,32,51,.08)!important; appearance:none!important;
  -webkit-appearance:none!important; flex:0 0 48px!important; transform:none!important;
}
.landing-page > nav > .menu-toggle .menu-icon,
body.billi-app > nav.b72-global-nav > .menu-toggle .menu-icon {
  display:flex!important; flex-direction:column!important; justify-content:space-between!important;
  width:22px!important; height:18px!important; pointer-events:none!important;
}
.landing-page > nav > .menu-toggle .menu-icon i,
body.billi-app > nav.b72-global-nav > .menu-toggle .menu-icon i {
  display:block!important; width:22px!important; height:2.5px!important; min-height:2.5px!important;
  border:0!important; border-radius:999px!important; background:#172033!important;
  transition:transform .2s ease,opacity .2s ease!important;
}
.landing-page > nav > .menu-toggle.is-open .menu-icon i:nth-child(1),
body.billi-app > nav.b72-global-nav > .menu-toggle.is-open .menu-icon i:nth-child(1) {transform:translateY(7.75px) rotate(45deg)!important}
.landing-page > nav > .menu-toggle.is-open .menu-icon i:nth-child(2),
body.billi-app > nav.b72-global-nav > .menu-toggle.is-open .menu-icon i:nth-child(2) {opacity:0!important}
.landing-page > nav > .menu-toggle.is-open .menu-icon i:nth-child(3),
body.billi-app > nav.b72-global-nav > .menu-toggle.is-open .menu-icon i:nth-child(3) {transform:translateY(-7.75px) rotate(-45deg)!important}
@media(max-width:760px) {
  .landing-page > nav {min-height:68px!important;height:68px!important;padding:8px 16px!important;display:flex!important;align-items:center!important;}
  body.billi-app > nav.b72-global-nav {min-height:68px!important;height:68px!important;max-height:68px!important;padding:8px 16px!important;display:flex!important;align-items:center!important;gap:10px!important;}
  .landing-page > nav > a.logo,
  body.billi-app > nav.b72-global-nav > a.logo {height:42px!important;min-height:42px!important;max-height:42px!important;}
  .landing-page > nav > a.logo img.billi-header-wordmark,
  body.billi-app > nav.b72-global-nav > a.logo img.billi-header-wordmark {width:180px!important;min-width:180px!important;max-width:180px!important;max-height:42px!important;}
  body.billi-app > nav.b72-global-nav > .menu-toggle {order:1!important;}
  body.billi-app > nav.b72-global-nav > a.logo {order:2!important;margin:0!important;}
  .landing-page > nav > .menu-toggle {order:2!important;margin-left:auto!important;}
}


/* BILLI PRO V22 — one identical brand wordmark on landing, workspace and auth pages. */
body.auth-page .auth .logo {
  display:flex!important; align-items:center!important; justify-content:flex-start!important;
  width:100%!important; min-height:42px!important; height:42px!important;
  margin:0 0 16px!important; padding:0!important; line-height:1!important;
  color:transparent!important; background:transparent!important; border:0!important;
}
body.auth-page .auth .logo img.billi-auth-wordmark {
  display:block!important; width:180px!important; height:auto!important;
  max-width:100%!important; max-height:42px!important; object-fit:contain!important;
  object-position:left center!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:0!important; background:transparent!important;
}
@media(max-width:600px){
  body.auth-page .auth .logo { min-height:38px!important; height:38px!important; }
  body.auth-page .auth .logo img.billi-auth-wordmark { width:164px!important; max-height:38px!important; }
}


/* V23 — one proportional BILLI PRO lockup across public, auth, workspace, admin and invoice views. */
.logo img.billi-wordmark-img, .brand img.billi-wordmark-img {display:block!important;width:180px!important;height:auto!important;max-width:100%!important;max-height:42px!important;object-fit:contain!important;object-position:left center!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;flex:0 1 auto!important;}
.invoice-brand-row .logo img.billi-wordmark-img, .v63-brandline .logo img.billi-wordmark-img {width:150px!important;max-height:38px!important;}
@media(max-width:600px){.logo img.billi-wordmark-img,.brand img.billi-wordmark-img{width:164px!important;max-height:38px!important;}}


/* V24 — keep the full wordmark proportional, with size controlled by context. */
/* Main navigation retains its established header size. */
.landing-page > nav > a.logo img.billi-header-wordmark,
body.billi-app > nav.b72-global-nav > a.logo img.billi-header-wordmark {
  display:block!important; width:180px!important; min-width:0!important; max-width:180px!important;
  height:auto!important; max-height:42px!important; object-fit:contain!important;
}
/* Authentication pages always show the complete logo, at a compact form size. */
body.auth-page .auth .logo {
  display:flex!important; visibility:visible!important; opacity:1!important;
  width:100%!important; height:42px!important; min-height:42px!important;
  align-items:center!important; justify-content:flex-start!important;
  margin:0 0 16px!important; padding:0!important; overflow:visible!important;
  background:transparent!important; border:0!important;
}
body.auth-page .auth .logo img.billi-auth-wordmark {
  display:block!important; visibility:visible!important; opacity:1!important;
  width:164px!important; min-width:0!important; max-width:100%!important;
  height:auto!important; max-height:38px!important; object-fit:contain!important;
  object-position:left center!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:0!important; background:transparent!important;
}
/* Marketing preview and footer are content, not navigation: keep their logos smaller. */
.landing-page .preview-bar .logo img.billi-wordmark-img {
  display:block!important; width:118px!important; max-width:100%!important;
  height:auto!important; max-height:28px!important; object-fit:contain!important;
}
.landing-page .site-footer .logo img.billi-header-wordmark {
  display:block!important; width:150px!important; min-width:0!important; max-width:100%!important;
  height:auto!important; max-height:34px!important; object-fit:contain!important;
}
/* Other in-page brand marks stay subordinate to the header. */
.logo img.billi-wordmark-img, .brand img.billi-wordmark-img {
  display:block!important; width:120px!important; min-width:0!important; max-width:100%!important;
  height:auto!important; max-height:30px!important; object-fit:contain!important;
  object-position:left center!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:0!important; background:transparent!important; flex:0 1 auto!important;
}
.invoice-brand-row .logo img.billi-wordmark-img,
.v63-brandline .logo img.billi-wordmark-img {width:120px!important;max-height:30px!important;}
@media(max-width:600px){
  .landing-page > nav > a.logo img.billi-header-wordmark,
  body.billi-app > nav.b72-global-nav > a.logo img.billi-header-wordmark {width:164px!important;max-width:164px!important;max-height:38px!important;}
  body.auth-page .auth .logo {height:38px!important;min-height:38px!important;}
  body.auth-page .auth .logo img.billi-auth-wordmark {width:150px!important;max-height:34px!important;}
  .landing-page .preview-bar .logo img.billi-wordmark-img {width:108px!important;max-height:26px!important;}
  .landing-page .site-footer .logo img.billi-header-wordmark {width:140px!important;max-height:32px!important;}
  .logo img.billi-wordmark-img, .brand img.billi-wordmark-img {width:108px!important;max-height:27px!important;}
}


/* V25 — force the existing full wordmark to remain visible in the signed-in header.
   Earlier legacy rules hid logo images; this final scoped rule wins on workspace pages. */
body.billi-app > nav.b72-global-nav > a.logo {
  display:inline-flex!important; visibility:visible!important; opacity:1!important;
  flex:0 0 auto!important; width:180px!important; min-width:180px!important;
  max-width:180px!important; height:42px!important; min-height:42px!important;
  max-height:42px!important; overflow:visible!important;
}
body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark {
  display:block!important; visibility:visible!important; opacity:1!important;
  width:180px!important; min-width:180px!important; max-width:180px!important;
  height:auto!important; max-height:42px!important; object-fit:contain!important;
  object-position:left center!important; flex:0 0 180px!important;
}
@media(max-width:760px) {
  body.billi-app > nav.b72-global-nav > a.logo {
    width:164px!important; min-width:164px!important; max-width:164px!important;
    height:38px!important; min-height:38px!important; max-height:38px!important;
  }
  body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark {
    width:164px!important; min-width:164px!important; max-width:164px!important;
    max-height:38px!important; flex:0 0 164px!important;
  }
}


/* V26 — full-package footer and legal-header sizing correction.
   Preserve the original proportional wordmark image; only scale it by context. */
body.landing-page footer.site-footer{padding:0!important;background:#fff!important;border-top:1px solid #e2e8f0!important;}
body.landing-page footer.site-footer>.container{width:min(1180px,100%)!important;margin:0 auto!important;padding:24px 20px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,auto)!important;align-items:center!important;gap:18px 28px!important;}
body.landing-page footer.site-footer .logo{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;max-width:100%!important;margin:0!important;padding:0!important;line-height:1!important;white-space:nowrap!important;}
body.landing-page footer.site-footer .logo img.billi-header-wordmark{display:block!important;width:120px!important;min-width:0!important;max-width:100%!important;height:auto!important;max-height:30px!important;object-fit:contain!important;object-position:left center!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;}
body.landing-page footer.site-footer .muted{margin:6px 0 0!important;color:#718096!important;font-size:12px!important;line-height:1.5!important;}
body.landing-page footer.site-footer .footer-links{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-end!important;gap:8px 16px!important;min-width:0!important;font-size:12px!important;line-height:1.5!important;}
body.landing-page footer.site-footer .footer-links a{display:inline-block!important;padding:4px 0!important;color:#536177!important;font-size:12px!important;font-weight:750!important;line-height:1.4!important;white-space:normal!important;text-decoration:none!important;}
body.landing-page footer.site-footer .footer-links a:hover{color:#2457d6!important;text-decoration:underline!important;text-underline-offset:3px!important;}
body.billi-legal-page nav.billi-legal-header>a.logo{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;flex:0 0 auto!important;width:180px!important;min-width:0!important;max-width:180px!important;height:42px!important;overflow:visible!important;}
body.billi-legal-page nav.billi-legal-header>a.logo>img.billi-header-wordmark{display:block!important;width:180px!important;min-width:0!important;max-width:180px!important;height:auto!important;max-height:42px!important;object-fit:contain!important;object-position:left center!important;}
@media(max-width:760px){
 body.landing-page footer.site-footer>.container{grid-template-columns:minmax(0,1fr)!important;gap:13px!important;padding:20px 16px!important;align-items:start!important;}
 body.landing-page footer.site-footer .footer-links{justify-content:flex-start!important;gap:8px 18px!important;padding-top:11px!important;border-top:1px solid #edf0f4!important;}
 body.landing-page footer.site-footer .logo img.billi-header-wordmark{width:108px!important;max-height:27px!important;}
 body.billi-legal-page nav.billi-legal-header>a.logo{width:164px!important;max-width:164px!important;height:38px!important;}
 body.billi-legal-page nav.billi-legal-header>a.logo>img.billi-header-wordmark{width:164px!important;max-width:164px!important;max-height:38px!important;}
}

/* BILLI PRO V27 — signed-in header logo visibility and compact Plans shortcut. */
body.billi-app > nav.b72-global-nav > a.logo,
body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark {
  display:inline-flex!important; visibility:visible!important; opacity:1!important;
}
body.billi-app > nav.b72-global-nav > a.logo {
  flex:0 0 auto!important; width:180px!important; min-width:180px!important;
  max-width:180px!important; height:42px!important; min-height:42px!important;
  max-height:42px!important; overflow:visible!important;
}
body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark {
  display:block!important; width:180px!important; min-width:180px!important;
  max-width:180px!important; height:auto!important; max-height:42px!important;
  object-fit:contain!important; object-position:left center!important;
  flex:0 0 180px!important; border:0!important; border-radius:0!important;
  background:transparent!important; padding:0!important; margin:0!important;
}
body.billi-app > nav.b72-global-nav > a.billi-header-shortcut {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  flex:0 0 42px!important; width:42px!important; min-width:42px!important;
  height:42px!important; min-height:42px!important; box-sizing:border-box!important;
  border:1px solid #d7dfeb!important; border-radius:12px!important;
  background:#f5f8ff!important; color:#2457d6!important; text-decoration:none!important;
  box-shadow:0 3px 10px rgba(23,32,51,.06)!important;
}
body.billi-app > nav.b72-global-nav > a.billi-header-shortcut svg {width:21px!important;height:21px!important;display:block!important;}
body.billi-app > nav.b72-global-nav > a.billi-header-shortcut:focus-visible {outline:3px solid rgba(36,87,214,.28)!important;outline-offset:2px!important;}
@media(max-width:760px){
 body.billi-app > nav.b72-global-nav {gap:8px!important;}
 body.billi-app > nav.b72-global-nav > a.logo {width:164px!important;min-width:164px!important;max-width:164px!important;height:38px!important;min-height:38px!important;max-height:38px!important;}
 body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark {width:164px!important;min-width:164px!important;max-width:164px!important;max-height:38px!important;flex:0 0 164px!important;}
 body.billi-app > nav.b72-global-nav > .menu-toggle {order:1!important;}
 body.billi-app > nav.b72-global-nav > a.logo {order:2!important;}
 body.billi-app > nav.b72-global-nav > a.billi-header-shortcut {order:3!important;margin-left:auto!important;}
}


/* V28 — authoritative authenticated header: wordmark + compact quick actions. */
html body.billi-app > nav.b72-global-nav > a.logo,
html body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark {
  display:inline-flex!important; visibility:visible!important; opacity:1!important;
}
html body.billi-app > nav.b72-global-nav > a.logo { flex:0 0 164px!important; width:164px!important; min-width:164px!important; max-width:164px!important; overflow:visible!important; }
html body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark { display:block!important; width:164px!important; min-width:164px!important; max-width:164px!important; height:auto!important; max-height:38px!important; object-fit:contain!important; object-position:left center!important; border:0!important; border-radius:0!important; background:transparent!important; padding:0!important; margin:0!important; }
html body.billi-app > nav.b72-global-nav > .b70-quick-actions { display:flex!important; align-items:center!important; gap:7px!important; flex:0 0 auto!important; margin-left:auto!important; }
html body.billi-app > nav.b72-global-nav > .b70-quick-actions > .b70-quick-action { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-width:40px!important; min-height:40px!important; padding:0 9px!important; border:1px solid #d7dfeb!important; border-radius:11px!important; background:#f5f8ff!important; color:#2457d6!important; font-size:11px!important; font-weight:800!important; line-height:1!important; text-decoration:none!important; box-shadow:0 3px 10px rgba(23,32,51,.06)!important; }
html body.billi-app > nav.b72-global-nav > .b70-quick-actions > .b70-quick-action svg { display:block!important; width:19px!important; height:19px!important; flex:0 0 19px!important; }
html body.billi-app > nav.b72-global-nav > .b70-quick-actions > .b70-quick-action:hover { background:#eaf0ff!important; border-color:#b9c9f5!important; text-decoration:none!important; }
html body.billi-app > nav.b72-global-nav > a.billi-header-shortcut { flex:0 0 40px!important; width:40px!important; min-width:40px!important; height:40px!important; min-height:40px!important; margin-left:0!important; }
@media(max-width:760px){
 html body.billi-app > nav.b72-global-nav { gap:7px!important; }
 html body.billi-app > nav.b72-global-nav > .menu-toggle { order:1!important; }
 html body.billi-app > nav.b72-global-nav > a.logo { order:2!important; flex:0 0 164px!important; }
 html body.billi-app > nav.b72-global-nav > .b70-quick-actions { order:3!important; margin-left:auto!important; }
 html body.billi-app > nav.b72-global-nav > a.billi-header-shortcut { order:4!important; margin-left:0!important; }
 html body.billi-app > nav.b72-global-nav > .b70-mobile-tools { order:5!important; margin-left:0!important; }
}
@media(max-width:480px){
 html body.billi-app > nav.b72-global-nav > a.logo { flex-basis:126px!important; width:126px!important; min-width:126px!important; max-width:126px!important; }
 html body.billi-app > nav.b72-global-nav > a.logo > img.billi-header-wordmark { width:126px!important; min-width:126px!important; max-width:126px!important; }
 html body.billi-app > nav.b72-global-nav > .b70-quick-actions > .b70-quick-action { min-width:36px!important; min-height:36px!important; padding:0 6px!important; }
 html body.billi-app > nav.b72-global-nav > .b70-quick-actions > .b70-quick-action span { display:none!important; }
}


/* BILLI PRO V29 — compact Facebook-inspired mobile workspace header and icon tabs. */
.billi-mobile-tabbar{display:none}
@media(max-width:760px){
  html body.billi-app>nav.b72-global-nav{
    position:relative!important;z-index:2200!important;box-sizing:border-box!important;
    display:flex!important;flex-flow:row nowrap!important;align-items:center!important;
    gap:5px!important;width:100%!important;height:58px!important;min-height:58px!important;max-height:58px!important;
    padding:7px 10px!important;background:#fff!important;border-bottom:1px solid #e2e8f0!important;
    box-shadow:none!important;overflow:visible!important;
  }
  html body.billi-app>nav.b72-global-nav>.menu-toggle{order:1!important;flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;border-radius:10px!important;box-shadow:none!important;border:1px solid #e2e8f0!important;}
  html body.billi-app>nav.b72-global-nav>a.logo{order:2!important;flex:0 1 124px!important;width:124px!important;min-width:0!important;max-width:124px!important;height:36px!important;min-height:36px!important;max-height:36px!important;margin:0!important;padding:0!important;overflow:hidden!important;}
  html body.billi-app>nav.b72-global-nav>a.logo>img.billi-header-wordmark{display:block!important;width:124px!important;min-width:0!important;max-width:124px!important;height:auto!important;max-height:34px!important;object-fit:contain!important;object-position:left center!important;}
  html body.billi-app>nav.b72-global-nav>.b70-quick-actions{order:3!important;display:flex!important;align-items:center!important;gap:4px!important;flex:0 0 auto!important;margin:0 0 0 auto!important;}
  html body.billi-app>nav.b72-global-nav>.b70-quick-actions>.b70-quick-action{display:inline-flex!important;flex:0 0 34px!important;width:34px!important;min-width:34px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:9px!important;box-shadow:none!important;background:#f5f8ff!important;border:1px solid #dce5f5!important;}
  html body.billi-app>nav.b72-global-nav>.b70-quick-actions>.b70-quick-action svg{width:19px!important;height:19px!important;}
  html body.billi-app>nav.b72-global-nav>.b70-quick-actions>.b70-quick-action span{display:none!important;}
  html body.billi-app>nav.b72-global-nav>a.billi-header-shortcut{display:none!important;}
  html body.billi-app>nav.b72-global-nav>.b70-mobile-tools{order:4!important;display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important;margin:0!important;}
  html body.billi-app>nav.b72-global-nav>.b70-mobile-tools button{width:34px!important;height:36px!important;min-width:34px!important;padding:0!important;border-radius:9px!important;}
  html body.billi-app>nav.b72-global-nav>.b70-mobile-tools .b70-mobile-bell svg{width:20px!important;height:20px!important;}
  html body.billi-app>nav.b72-global-nav>.b70-mobile-tools .b70-avatar{width:30px!important;height:30px!important;font-size:10px!important;}
  html body.billi-app>.billi-mobile-tabbar{
    position:relative!important;z-index:2199!important;display:flex!important;align-items:stretch!important;justify-content:space-around!important;
    width:100%!important;height:54px!important;min-height:54px!important;box-sizing:border-box!important;padding:0 5px!important;
    background:#fff!important;border-bottom:1px solid #dfe5ee!important;box-shadow:0 2px 7px rgba(23,32,51,.04)!important;gap:2px!important;
  }
  html body.billi-app>.billi-mobile-tabbar>.billi-mobile-tab{
    position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:1 1 0!important;min-width:0!important;
    height:54px!important;padding:0 4px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;
    color:#64748b!important;text-decoration:none!important;box-shadow:none!important;
  }
  html body.billi-app>.billi-mobile-tabbar>.billi-mobile-tab .b72-nav-icon{display:grid!important;place-items:center!important;width:40px!important;height:38px!important;flex:0 0 40px!important;border:1px solid transparent!important;border-radius:11px!important;}
  html body.billi-app>.billi-mobile-tabbar>.billi-mobile-tab .b72-nav-icon svg{display:block!important;width:23px!important;height:23px!important;max-width:23px!important;max-height:23px!important;stroke:currentColor!important;stroke-width:1.9!important;}
  html body.billi-app>.billi-mobile-tabbar>.billi-mobile-tab.active{color:#2457d6!important;}
  html body.billi-app>.billi-mobile-tabbar>.billi-mobile-tab.active:after{content:""!important;position:absolute!important;bottom:0!important;left:18%!important;right:18%!important;height:3px!important;border-radius:3px 3px 0 0!important;background:#2457d6!important;}
  html body.billi-app>.billi-mobile-tabbar>.billi-mobile-tab:focus-visible{outline:2px solid #2457d6!important;outline-offset:-3px!important;border-radius:9px!important;}
  /* Keep the existing search row below the new tab strip. */
  html body.billi-app>.b70-topbar{position:relative!important;top:auto!important;}
}
@media(max-width:380px){
  html body.billi-app>nav.b72-global-nav{gap:3px!important;padding-left:7px!important;padding-right:7px!important;}
  html body.billi-app>nav.b72-global-nav>a.logo{flex-basis:108px!important;width:108px!important;max-width:108px!important;}
  html body.billi-app>nav.b72-global-nav>a.logo>img.billi-header-wordmark{width:108px!important;max-width:108px!important;}
  html body.billi-app>nav.b72-global-nav>.b70-quick-actions>.b70-quick-action{flex-basis:32px!important;width:32px!important;min-width:32px!important;}
  html body.billi-app>nav.b72-global-nav>.b70-mobile-tools button{width:31px!important;min-width:31px!important;}
}


/* BILLI PRO V30 — reliable app navigation and compact complete wordmark. */
@media(max-width:760px){
  html body.billi-app>nav.b72-global-nav{gap:6px!important;padding-left:9px!important;padding-right:9px!important;}
  html body.billi-app>nav.b72-global-nav>a.logo{flex:0 1 148px!important;width:148px!important;min-width:0!important;max-width:148px!important;overflow:visible!important;}
  html body.billi-app>nav.b72-global-nav>a.logo>img.billi-header-wordmark{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;max-height:34px!important;object-fit:contain!important;object-position:left center!important;}
  html body.billi-app>nav.b72-global-nav>.b70-quick-actions,
  html body.billi-app>nav.b72-global-nav>a.billi-header-shortcut{display:none!important;}
  html body.billi-app>.billi-mobile-tabbar{display:flex!important;}
}
@media(max-width:380px){
  html body.billi-app>nav.b72-global-nav>a.logo{flex-basis:132px!important;width:132px!important;max-width:132px!important;}
}
@media(display-mode:standalone){
  html body.billi-app>.billi-mobile-tabbar{display:flex!important;}
}


/* BILLI PRO V31 — one header wordmark size and dependable app navigation. */
.landing-page>nav>a.logo,
html body.billi-app>nav.b72-global-nav>a.logo{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  flex:0 0 180px!important;width:180px!important;min-width:180px!important;max-width:180px!important;
  height:42px!important;min-height:42px!important;max-height:42px!important;
  margin:0!important;padding:0!important;overflow:visible!important;white-space:nowrap!important;
}
.landing-page>nav>a.logo>img.billi-header-wordmark,
html body.billi-app>nav.b72-global-nav>a.logo>img.billi-header-wordmark{
  display:block!important;visibility:visible!important;opacity:1!important;
  flex:0 0 180px!important;width:180px!important;min-width:180px!important;max-width:180px!important;
  height:auto!important;max-height:42px!important;object-fit:contain!important;object-position:left center!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
}
/* The compact header contains only the brand, menu, notifications and account.
   Destinations live in the navigation strip/menu, not duplicate header buttons. */
html body.billi-app>nav.b72-global-nav>.b70-quick-actions,
html body.billi-app>nav.b72-global-nav>a.billi-header-shortcut{display:none!important;}
@media(max-width:760px){
  .landing-page>nav>a.logo,
  html body.billi-app>nav.b72-global-nav>a.logo{
    flex:0 0 164px!important;width:164px!important;min-width:164px!important;max-width:164px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
  }
  .landing-page>nav>a.logo>img.billi-header-wordmark,
  html body.billi-app>nav.b72-global-nav>a.logo>img.billi-header-wordmark{
    flex:0 0 164px!important;width:164px!important;min-width:164px!important;max-width:164px!important;max-height:38px!important;
  }
  html body.billi-app>.billi-mobile-tabbar{
    display:flex!important;visibility:visible!important;opacity:1!important;
    position:relative!important;z-index:2199!important;width:100%!important;
    min-height:54px!important;height:54px!important;max-height:54px!important;
    align-items:stretch!important;justify-content:space-around!important;
    padding:0 5px!important;margin:0!important;overflow:visible!important;
    background:#fff!important;border-bottom:1px solid #dfe5ee!important;
  }
  html body.billi-app>.billi-mobile-tabbar>a.billi-mobile-tab{
    display:flex!important;visibility:visible!important;opacity:1!important;
    flex:1 1 0!important;min-width:0!important;height:54px!important;min-height:54px!important;
    align-items:center!important;justify-content:center!important;padding:0 4px!important;
    color:#64748b!important;text-decoration:none!important;
  }
  html body.billi-app>.billi-mobile-tabbar>a.billi-mobile-tab .b72-nav-icon,
  html body.billi-app>.billi-mobile-tabbar>a.billi-mobile-tab .b72-nav-icon svg{
    display:grid!important;visibility:visible!important;opacity:1!important;
  }
  html body.billi-app>.billi-mobile-tabbar>a.billi-mobile-tab.active{color:#2457d6!important;}
}
@media(max-width:380px){
  .landing-page>nav>a.logo,
  html body.billi-app>nav.b72-global-nav>a.logo{flex-basis:148px!important;width:148px!important;min-width:148px!important;max-width:148px!important;}
  .landing-page>nav>a.logo>img.billi-header-wordmark,
  html body.billi-app>nav.b72-global-nav>a.logo>img.billi-header-wordmark{flex-basis:148px!important;width:148px!important;min-width:148px!important;max-width:148px!important;}
}


/* BILLI PRO V37 — FINAL NAVIGATION FIX
   On physical phones, including Chrome Desktop Site, the authenticated
   workspace must use one collapsible drawer, never a permanently visible
   legacy vertical icon rail. The public landing page has a desktop nav row
   and does not need a hamburger alongside its visible links. */
html.billi-physical-mobile body.billi-app > nav.b72-global-nav{
  position:relative!important;
  z-index:2200!important;
}
html.billi-physical-mobile body.billi-app > nav.b72-global-nav > .navlinks{
  display:none!important;
  position:fixed!important;
  left:0!important;
  top:calc(68px + env(safe-area-inset-top, 0px))!important;
  bottom:0!important;
  width:min(320px,86vw)!important;
  max-width:86vw!important;
  height:auto!important;
  max-height:none!important;
  box-sizing:border-box!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:5px!important;
  overflow-y:auto!important;
  padding:12px!important;
  margin:0!important;
  background:#fff!important;
  color:#172033!important;
  border:1px solid #e2e8f0!important;
  border-radius:0 16px 16px 0!important;
  box-shadow:0 18px 45px rgba(15,23,42,.22)!important;
  z-index:2202!important;
}
html.billi-physical-mobile body.billi-app > nav.b72-global-nav > .navlinks.open{
  display:flex!important;
}
html.billi-physical-mobile body.billi-app > nav.b72-global-nav > .navlinks>a{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-height:48px!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  padding:12px 14px!important;
  color:#172033!important;
  background:#fff!important;
  border-radius:10px!important;
}
html.billi-physical-mobile body.billi-app > nav.b72-global-nav > .navlinks>a.active{
  color:#2457d6!important;
  background:#eef2ff!important;
}
html.billi-physical-mobile body.billi-app > nav.b72-global-nav > .mobile-nav-backdrop{
  display:none!important;
  position:fixed!important;
  inset:calc(68px + env(safe-area-inset-top, 0px)) 0 0!important;
  background:rgba(15,23,42,.34)!important;
  z-index:2201!important;
}
html.billi-physical-mobile body.billi-app > nav.b72-global-nav > .mobile-nav-backdrop.open{
  display:block!important;
}
/* Hide any old fixed dark rail on physical phones; the drawer above is canonical. */
html.billi-physical-mobile body.billi-app .legacy-sidebar,
html.billi-physical-mobile body.billi-app .desktop-sidebar,
html.billi-physical-mobile body.billi-app .sidebar:not(.v63-sidebar){
  display:none!important;
}
/* Public landing page: visible desktop links make its hamburger redundant. */
.landing-page > nav > .menu-toggle{
  display:none!important;
}

/* BILLI PRO V38 — remove the persistent legacy dark sidebar on physical phones.
   The current b72-global-nav drawer remains the only navigation surface on phones,
   including Chrome Desktop Site where CSS viewport media queries can report desktop. */
html.billi-physical-mobile body.billi-app .v63-sidebar,
html.billi-physical-mobile body.billi-app aside.v63-sidebar,
html.billi-physical-mobile body.billi-app .v63-desktop-topbar,
html.billi-physical-mobile body.v63-invoice-body .v63-sidebar,
html.billi-physical-mobile body.v63-invoice-body .v63-desktop-topbar {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
html.billi-physical-mobile body.billi-app .v63-app-shell,
html.billi-physical-mobile body.v63-invoice-body .v63-app-shell {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
html.billi-physical-mobile body.billi-app .v63-main,
html.billi-physical-mobile body.v63-invoice-body .v63-main,
html.billi-physical-mobile body.billi-app .v63-content,
html.billi-physical-mobile body.v63-invoice-body .v63-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
}

/* BILLI PRO V39 — Android Chrome Desktop Site navigation correction.
   Do not rely on the JS device class: Chrome Desktop Site can omit it.
   On touch-first devices with a phone/tablet-sized CSS viewport, remove the
   legacy fixed vertical icon rail and let the header hamburger/drawer own nav. */
@media (pointer: coarse) and (max-width: 1100px) {
  html body.billi-app .v63-sidebar,
  html body.v63-invoice-body .v63-sidebar,
  html body.billi-app aside.v63-sidebar,
  html body.billi-app .v63-desktop-topbar,
  html body.v63-invoice-body .v63-desktop-topbar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  html body.billi-app .v63-app-shell,
  html body.v63-invoice-body .v63-app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.billi-app .v63-main,
  html body.v63-invoice-body .v63-main,
  html body.billi-app .v63-content,
  html body.v63-invoice-body .v63-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  html body.billi-app .v63-content,
  html body.v63-invoice-body .v63-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* BILLI PRO V43 — responsive shortcut row, search states and public header cleanup. */
@media (max-width: 1100px) and (pointer: coarse) {
  html body.billi-app > .billi-mobile-tabbar,
  html.billi-physical-mobile body.billi-app > .billi-mobile-tabbar {
    display:flex!important; flex-flow:row nowrap!important; align-items:stretch!important;
    justify-content:space-around!important; gap:0!important; width:100%!important;
    min-width:0!important; height:54px!important; min-height:54px!important; max-height:54px!important;
    margin:0!important; padding:0 4px!important; overflow:hidden!important;
    background:#fff!important; border-top:1px solid #e5eaf2!important; border-bottom:1px solid #dce3ec!important;
    box-sizing:border-box!important;
  }
  html body.billi-app > .billi-mobile-tabbar > a.billi-mobile-tab,
  html.billi-physical-mobile body.billi-app > .billi-mobile-tabbar > a.billi-mobile-tab {
    display:flex!important; flex:1 1 20%!important; width:20%!important; min-width:0!important; max-width:20%!important;
    height:54px!important; min-height:54px!important; padding:0!important; margin:0!important;
    flex-direction:column!important; align-items:center!important; justify-content:center!important;
    overflow:hidden!important; white-space:nowrap!important; font-size:0!important; line-height:0!important;
    text-indent:0!important; gap:0!important; color:#64748b!important; text-decoration:none!important;
  }
  html body.billi-app > .billi-mobile-tabbar > a.billi-mobile-tab .b72-nav-icon,
  html.billi-physical-mobile body.billi-app > .billi-mobile-tabbar > a.billi-mobile-tab .b72-nav-icon {
    display:grid!important; flex:0 0 38px!important; width:38px!important; height:38px!important; margin:0!important; padding:0!important;
    place-items:center!important; font-size:0!important; line-height:0!important;
  }
  html body.billi-app > .billi-mobile-tabbar > a.billi-mobile-tab .b72-nav-icon svg,
  html.billi-physical-mobile body.billi-app > .billi-mobile-tabbar > a.billi-mobile-tab .b72-nav-icon svg {
    display:block!important; width:23px!important; height:23px!important; max-width:23px!important; max-height:23px!important;
  }
  html body.billi-app > .billi-mobile-tabbar > a.billi-mobile-tab.active { color:#2457d6!important; }
}

/* The public marketing header has a compact inline navigation, not an app drawer. */
@media (max-width: 760px) {
  html body.landing-page > nav > .menu-toggle,
  html body.landing-page > nav > .mobile-nav-backdrop { display:none!important; }
  html body.landing-page > nav {
    display:flex!important; flex-flow:row nowrap!important; align-items:center!important;
    gap:10px!important; width:100%!important; box-sizing:border-box!important;
    padding:8px 12px!important; overflow:visible!important;
  }
  html body.landing-page > nav > a.logo {
    flex:0 0 112px!important; width:112px!important; min-width:112px!important; max-width:112px!important;
    margin:0!important; overflow:visible!important;
  }
  html body.landing-page > nav > a.logo img { width:112px!important; max-width:112px!important; height:auto!important; }
  html body.landing-page > nav > .navlinks {
    position:static!important; inset:auto!important; display:flex!important; flex:1 1 auto!important;
    flex-flow:row nowrap!important; align-items:center!important; justify-content:flex-end!important;
    gap:8px!important; width:auto!important; max-width:none!important; height:auto!important; min-height:0!important;
    margin:0!important; padding:0!important; overflow-x:auto!important; overflow-y:hidden!important;
    background:transparent!important; box-shadow:none!important; border:0!important; transform:none!important;
    visibility:visible!important; opacity:1!important; white-space:nowrap!important;
  }
  html body.landing-page > nav > .navlinks > a {
    display:inline-flex!important; flex:0 0 auto!important; padding:5px 0!important; margin:0!important;
    font-size:10px!important; line-height:1.2!important; white-space:nowrap!important;
  }
  html body.landing-page > nav > .navlinks > a.btn { padding:7px 8px!important; font-size:9px!important; }
}
@media (max-width: 420px) {
  html body.landing-page > nav { gap:7px!important; padding-left:8px!important; padding-right:8px!important; }
  html body.landing-page > nav > a.logo { flex-basis:94px!important; width:94px!important; min-width:94px!important; max-width:94px!important; }
  html body.landing-page > nav > a.logo img { width:94px!important; }
  html body.landing-page > nav > .navlinks { gap:7px!important; }
  html body.landing-page > nav > .navlinks > a { font-size:9px!important; }
  html body.landing-page > nav > .navlinks > a[href="/register"] { display:none!important; }
}

/* Search pages: prevent horizontal overflow, cramped controls and oversized gaps. */
body.search-page > nav.b72-global-nav { position:relative!important; }
body.search-page > main.container { box-sizing:border-box!important; width:100%!important; max-width:1120px!important; margin:0 auto!important; }
body.search-page .b93-search-form { box-sizing:border-box!important; width:100%!important; }
body.search-page .b93-search-row { min-width:0!important; }
body.search-page .b93-search-row input { min-width:0!important; max-width:100%!important; }
body.search-page .b93-search-row .btn { min-width:0!important; }
body.search-page .b93-results { align-items:stretch!important; gap:14px!important; }
body.search-page .b93-results > .card { min-width:0!important; box-sizing:border-box!important; }
body.search-page .b93-result-row { min-width:0!important; gap:12px!important; }
body.search-page .b93-result-row > span:first-child { min-width:0!important; overflow-wrap:anywhere!important; }
body.search-page .b93-result-actions { flex:0 0 auto!important; text-align:right!important; }
body.search-page .b93-result-row small { overflow-wrap:anywhere!important; }
@media(max-width:760px) {
  body.search-page > main.container { padding:16px 12px 28px!important; }
  body.search-page .hero { margin:0 0 14px!important; padding:0!important; }
  body.search-page .hero h1 { font-size:clamp(25px,7vw,34px)!important; line-height:1.12!important; margin:5px 0 8px!important; letter-spacing:-.7px!important; }
  body.search-page .hero p { font-size:14px!important; line-height:1.5!important; margin:0!important; }
  body.search-page .b93-search-form { margin:0 0 14px!important; padding:12px!important; }
  body.search-page .b93-search-row { display:flex!important; flex-direction:column!important; gap:9px!important; }
  body.search-page .b93-search-row input { width:100%!important; height:50px!important; font-size:16px!important; }
  body.search-page .b93-search-row .btn { width:100%!important; min-height:48px!important; }
  body.search-page .b93-search-summary { flex-wrap:wrap!important; margin:12px 2px!important; font-size:14px!important; }
  body.search-page .b93-results { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:12px!important; }
  body.search-page .b93-results > .card { width:100%!important; padding:14px!important; }
  body.search-page .b93-result-row { align-items:flex-start!important; padding:12px 0!important; }
  body.search-page .b93-result-row strong { font-size:14px!important; line-height:1.35!important; }
  body.search-page .b93-result-actions b { white-space:nowrap!important; font-size:13px!important; }
}
/* Global search is a fresh search entry point on each non-search page. */
body.billi-app:not(.search-page) .b70-topbar-search input,
body.billi-app:not(.search-page) .b70-mobile-searchbar input { autofill: none; }

/* V44 — compact, fast invoice workflow and stable public header on all screens. */
body.billi-app .invoice-clean-form{padding:14px!important;}
body.billi-app .invoice-clean-form .invoice-simple-section{padding:12px 0!important;margin:0!important;border-bottom:1px solid #e8edf5!important;}
body.billi-app .invoice-clean-form .invoice-simple-section:last-of-type{border-bottom:0!important;}
body.billi-app .invoice-clean-form .invoice-simple-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px!important;}
body.billi-app .invoice-clean-form .invoice-simple-heading h2{font-size:19px!important;line-height:1.2!important;margin:0 0 4px!important;letter-spacing:-.35px!important;}
body.billi-app .invoice-clean-form .invoice-simple-heading p{font-size:12px!important;line-height:1.45!important;margin:0!important;}
body.billi-app .invoice-clean-form .grid2{gap:10px 12px!important;}
body.billi-app .invoice-clean-form .invoice-field{min-width:0!important;gap:4px!important;}
body.billi-app .invoice-clean-form .invoice-field label{font-size:12px!important;line-height:1.25!important;margin:0 0 3px!important;}
body.billi-app .invoice-clean-form .invoice-field small{font-size:10px!important;line-height:1.3!important;margin-top:1px!important;}
body.billi-app .invoice-clean-form input,
body.billi-app .invoice-clean-form select,
body.billi-app .invoice-clean-form textarea{font-size:14px!important;min-height:40px!important;padding:8px 10px!important;border-radius:9px!important;}
body.billi-app .invoice-clean-form textarea{min-height:74px!important;}
body.billi-app .invoice-clean-form .item-row{display:grid!important;grid-template-columns:minmax(160px,2fr) minmax(74px,.65fr) minmax(90px,.8fr) minmax(100px,.9fr) minmax(120px,1fr) auto!important;gap:9px!important;padding:10px!important;margin:0 0 8px!important;background:#f8faff!important;border:1px solid #e1e8f3!important;border-radius:10px!important;}
body.billi-app .invoice-clean-form .item-field{min-width:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;}
body.billi-app .invoice-clean-form .item-field label{display:block!important;font-size:11px!important;font-weight:800!important;margin:0!important;}
body.billi-app .invoice-clean-form .item-field small{display:none!important;}
body.billi-app .invoice-clean-form .item-head{display:none!important;}
body.billi-app .invoice-clean-form .remove-item{align-self:end!important;min-height:36px!important;white-space:nowrap!important;}
body.billi-app .invoice-clean-form .invoice-calculation{margin-top:10px!important;border-radius:11px!important;overflow:hidden!important;}
body.billi-app .invoice-clean-form .invoice-calculation>div{padding:9px 12px!important;font-size:12px!important;}
body.billi-app .invoice-clean-form .invoice-calculation .calc-total{font-size:15px!important;}
body.billi-app .invoice-clean-form .invoice-payment-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
body.billi-app .invoice-clean-form .invoice-payment-notes{grid-column:1/-1!important;}
body.billi-app .invoice-payment-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;background:#edf4ff;border:1px solid #d8e5fb;border-radius:10px;color:#31415b;font-size:12px;}
body.billi-app .invoice-payment-preview strong{font-size:17px;color:#2457d6;white-space:nowrap;}
body.billi-app .invoice-clean-form .invoice-submit-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px!important;}
body.billi-app .invoice-clean-form .invoice-submit-box strong{font-size:15px!important;}
body.billi-app .invoice-clean-form .invoice-submit-box span{font-size:11px!important;line-height:1.4!important;}
body.billi-app .invoice-clean-form .invoice-submit-box .btn{min-height:42px!important;white-space:nowrap!important;}
@media(max-width:760px){
 body.billi-app .invoice-clean-form{padding:12px!important;}
 body.billi-app .invoice-clean-form .invoice-simple-section{padding:10px 0!important;}
 body.billi-app .invoice-clean-form .invoice-simple-heading{margin-bottom:9px!important;}
 body.billi-app .invoice-clean-form .invoice-simple-heading h2{font-size:18px!important;}
 body.billi-app .invoice-clean-form .grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
 body.billi-app .invoice-clean-form .invoice-details-grid .invoice-field:first-child,
 body.billi-app .invoice-clean-form .invoice-details-grid .invoice-field:nth-child(2){grid-column:1/-1!important;}
 body.billi-app .invoice-clean-form .item-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px!important;}
 body.billi-app .invoice-clean-form .item-field:nth-child(2){grid-column:1/-1!important;}
 body.billi-app .invoice-clean-form .item-field label{font-size:11px!important;}
 body.billi-app .invoice-clean-form .item-field input,body.billi-app .invoice-clean-form .item-field select{width:100%!important;min-width:0!important;font-size:14px!important;}
 body.billi-app .invoice-clean-form .remove-item{grid-column:1/-1!important;justify-self:start!important;align-self:auto!important;}
 body.billi-app .invoice-clean-form .invoice-payment-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 body.billi-app .invoice-clean-form .invoice-submit-box{align-items:stretch!important;flex-direction:column!important;}
 body.billi-app .invoice-clean-form .invoice-submit-box .btn{width:100%!important;}
}
@media(max-width:420px){
 body.billi-app .invoice-clean-form .grid2{grid-template-columns:minmax(0,1fr)!important;}
 body.billi-app .invoice-clean-form .invoice-payment-entry-grid{grid-template-columns:minmax(0,1fr)!important;}
 body.billi-app .invoice-clean-form .invoice-payment-notes{grid-column:auto!important;}
 body.billi-app .invoice-clean-form .invoice-details-grid .invoice-field{grid-column:auto!important;}
 body.billi-app .invoice-clean-form .item-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 body.billi-app .invoice-clean-form .invoice-simple-heading{align-items:flex-start!important;}
 body.billi-app .invoice-clean-form .add-item-btn{flex:0 0 auto!important;}
}

/* Public landing header: desktop navigation stays on one line; mobile uses the menu drawer. */
html body.landing-page>nav{position:relative!important;z-index:1000!important;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;width:100%!important;min-height:68px!important;padding:10px clamp(14px,3vw,32px)!important;box-sizing:border-box!important;overflow:visible!important;background:#fff!important;border-bottom:1px solid #e5eaf2!important;box-shadow:0 2px 8px rgba(20,35,60,.04)!important;}
html body.landing-page>nav>a.logo{display:flex!important;align-items:center!important;flex:0 0 150px!important;width:150px!important;min-width:0!important;max-width:150px!important;margin:0!important;padding:0!important;overflow:hidden!important;}
html body.landing-page>nav>a.logo img{display:block!important;width:100%!important;max-width:150px!important;height:auto!important;max-height:44px!important;object-fit:contain!important;}
html body.landing-page>nav>.menu-toggle{display:none!important;}
html body.landing-page>nav>.navlinks{position:static!important;display:flex!important;flex:1 1 auto!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(10px,1.5vw,22px)!important;width:auto!important;max-width:none!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;white-space:nowrap!important;background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important;visibility:visible!important;opacity:1!important;}
html body.landing-page>nav>.navlinks>a{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;margin:0!important;padding:8px 0!important;color:#445064!important;font-size:12px!important;font-weight:750!important;line-height:1.2!important;white-space:nowrap!important;}
html body.landing-page>nav>.navlinks>a.btn,html body.landing-page>nav>.navlinks>.billi-install-button{min-height:38px!important;padding:9px 12px!important;border-radius:9px!important;font-size:11px!important;}
html body.landing-page>nav>.mobile-nav-backdrop{display:none!important;}
@media(min-width:761px) and (max-width:1000px){html body.landing-page>nav{gap:10px!important;padding-left:12px!important;padding-right:12px!important;}html body.landing-page>nav>a.logo{flex-basis:122px!important;width:122px!important;max-width:122px!important;}html body.landing-page>nav>a.logo img{max-width:122px!important;}html body.landing-page>nav>.navlinks{gap:10px!important;}html body.landing-page>nav>.navlinks>a{font-size:10px!important;}html body.landing-page>nav>.navlinks>a.btn,html body.landing-page>nav>.navlinks>.billi-install-button{padding:8px 9px!important;font-size:10px!important;}}
@media(max-width:760px){
 html body.landing-page>nav{position:relative!important;min-height:66px!important;padding:9px 14px!important;gap:12px!important;justify-content:space-between!important;}
 html body.landing-page>nav>a.logo{flex:0 1 148px!important;width:148px!important;max-width:148px!important;min-width:0!important;}
 html body.landing-page>nav>a.logo img{width:100%!important;max-width:148px!important;max-height:43px!important;}
 html body.landing-page>nav>.menu-toggle{display:flex!important;order:2!important;flex:0 0 42px!important;width:42px!important;height:42px!important;align-items:center!important;justify-content:center!important;margin:0 0 0 auto!important;padding:0!important;background:#f5f7fb!important;border:1px solid #dfe6f0!important;border-radius:10px!important;color:#1d2a40!important;}
 html body.landing-page>nav>.menu-toggle .menu-icon{display:flex!important;}
 html body.landing-page>nav>.navlinks{position:absolute!important;top:calc(100% + 6px)!important;left:12px!important;right:12px!important;z-index:1005!important;display:none!important;flex-flow:column nowrap!important;align-items:stretch!important;justify-content:flex-start!important;gap:4px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 100px)!important;overflow-y:auto!important;overflow-x:hidden!important;margin:0!important;padding:10px!important;background:#fff!important;border:1px solid #dce4ef!important;border-radius:14px!important;box-shadow:0 16px 42px rgba(20,35,60,.18)!important;white-space:normal!important;}
 html body.landing-page>nav>.navlinks.open{display:flex!important;}
 html body.landing-page>nav>.navlinks>a{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-height:42px!important;box-sizing:border-box!important;padding:11px 12px!important;margin:0!important;font-size:14px!important;white-space:normal!important;border-radius:9px!important;}
 html body.landing-page>nav>.navlinks>a.btn,html body.landing-page>nav>.navlinks>.billi-install-button{display:flex!important;align-self:stretch!important;width:100%!important;min-height:44px!important;max-width:none!important;margin:3px 0 0!important;padding:12px!important;font-size:13px!important;white-space:normal!important;text-align:center!important;}
 html body.landing-page>nav>.mobile-nav-backdrop{display:none!important;}
}
@media(max-width:380px){html body.landing-page>nav{padding-left:10px!important;padding-right:10px!important;}html body.landing-page>nav>a.logo{flex-basis:126px!important;width:126px!important;max-width:126px!important;}html body.landing-page>nav>a.logo img{max-width:126px!important;}}

/* V45 — fix invoice heading flex collapse and reduce mobile billing friction. */
html body.billi-app .invoice-clean-form,
html body.billi-app .invoice-clean-form *{box-sizing:border-box;}
html body.billi-app .invoice-clean-form .invoice-simple-heading{display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:100%!important;min-width:0!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading>div{display:block!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:100%!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading h2{max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading p{max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading .add-item-btn{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;min-width:104px!important;max-width:none!important;margin:0!important;white-space:nowrap!important;align-items:center!important;justify-content:center!important;padding:10px 14px!important;}
html body.billi-app .invoice-clean-form .item-row-wrap,
html body.billi-app .invoice-clean-form #items{width:100%!important;min-width:0!important;}
html body.billi-app .invoice-clean-form .invoice-field input,
html body.billi-app .invoice-clean-form .invoice-field select,
html body.billi-app .invoice-clean-form .invoice-field textarea,
html body.billi-app .invoice-clean-form .item-field input,
html body.billi-app .invoice-clean-form .item-field select{width:100%!important;max-width:100%!important;min-width:0!important;}
@media(max-width:760px){
 html body.billi-app .invoice-clean-form{padding:12px!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-section{padding:9px 0!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading{align-items:center!important;gap:8px!important;margin-bottom:8px!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading>div{flex:1 1 0!important;min-width:0!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading h2{font-size:17px!important;line-height:1.25!important;letter-spacing:-.2px!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading p{font-size:11px!important;line-height:1.35!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading .add-item-btn{flex:0 0 auto!important;width:auto!important;min-width:96px!important;padding:9px 10px!important;font-size:12px!important;}
 html body.billi-app .invoice-clean-form .invoice-field{gap:3px!important;margin-bottom:7px!important;}
 html body.billi-app .invoice-clean-form .invoice-field label{font-size:12px!important;margin-bottom:2px!important;}
 html body.billi-app .invoice-clean-form .invoice-field input,
 html body.billi-app .invoice-clean-form .invoice-field select{min-height:40px!important;padding:7px 9px!important;font-size:14px!important;}
 html body.billi-app .invoice-clean-form .invoice-field small{font-size:10px!important;line-height:1.25!important;margin-top:2px!important;}
 html body.billi-app .invoice-clean-form .item-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:9px!important;margin-bottom:7px!important;}
 html body.billi-app .invoice-clean-form .item-field{min-width:0!important;width:100%!important;}
 html body.billi-app .invoice-clean-form .item-field:nth-child(2){grid-column:1/-1!important;}
 html body.billi-app .invoice-clean-form .item-field small{display:none!important;}
 html body.billi-app .invoice-clean-form .item-field label{font-size:11px!important;line-height:1.2!important;}
 html body.billi-app .invoice-clean-form .item-field input,
 html body.billi-app .invoice-clean-form .item-field select{min-height:39px!important;padding:7px 8px!important;font-size:14px!important;}
 html body.billi-app .invoice-clean-form .remove-item{min-height:35px!important;padding:7px 10px!important;font-size:12px!important;}
 html body.billi-app .invoice-clean-form .invoice-calculation>div{padding:8px 10px!important;}
 html body.billi-app .invoice-clean-form .invoice-payment-preview{margin-top:7px!important;padding:9px 10px!important;}
 html body.billi-app .invoice-clean-form .invoice-payment-entry-grid{gap:8px!important;}
 html body.billi-app .invoice-clean-form .invoice-submit-box{margin-top:9px!important;padding:11px!important;}
}
@media(max-width:420px){
 html body.billi-app .invoice-clean-form .invoice-simple-heading{align-items:center!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading .add-item-btn{min-width:88px!important;}
 html body.billi-app .invoice-clean-form .grid2,
 html body.billi-app .invoice-clean-form .invoice-payment-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 html body.billi-app .invoice-clean-form .invoice-payment-notes{grid-column:1/-1!important;}
 html body.billi-app .invoice-clean-form .invoice-details-grid .invoice-field:first-child,
 html body.billi-app .invoice-clean-form .invoice-details-grid .invoice-field:nth-child(2){grid-column:1/-1!important;}
}


/* BILLI PRO V46 — public header/logo/menu polish and compact invoice workflow. */
html body.landing-page > nav > a.logo {
  display:flex!important; flex:0 0 190px!important; width:190px!important; min-width:190px!important; max-width:190px!important;
  min-height:44px!important; align-items:center!important; justify-content:flex-start!important; overflow:visible!important;
  padding:0!important; margin:0!important; box-sizing:border-box!important;
}
html body.landing-page > nav > a.logo > img.billi-header-wordmark {
  display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; height:auto!important;
  max-height:44px!important; object-fit:contain!important; object-position:left center!important; flex:0 1 auto!important;
}
html body.landing-page > nav > .navlinks > a.btn,
html body.landing-page > nav > .navlinks > .billi-install-button {
  background:#2457d6!important; border:1px solid #2457d6!important; color:#fff!important;
  -webkit-text-fill-color:#fff!important; text-decoration:none!important; font-weight:800!important;
  box-shadow:0 4px 12px rgba(36,87,214,.16)!important;
}
html body.landing-page > nav > .navlinks > a.btn:hover,
html body.landing-page > nav > .navlinks > .billi-install-button:hover {background:#1945b4!important;border-color:#1945b4!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
html body.landing-page > nav > .menu-toggle {box-sizing:border-box!important;}
@media (min-width:1101px) {
  html body.landing-page > nav {gap:clamp(18px,2.4vw,34px)!important;}
  html body.landing-page > nav > .menu-toggle {display:none!important;}
  html body.landing-page > nav > .navlinks {display:flex!important;position:static!important;flex:1 1 auto!important;min-width:0!important;justify-content:flex-end!important;gap:clamp(14px,1.7vw,25px)!important;overflow:visible!important;}
  html body.landing-page > nav > .navlinks > a {font-size:13px!important;}
  html body.landing-page > nav > .navlinks > a.btn,
  html body.landing-page > nav > .navlinks > .billi-install-button {min-height:40px!important;padding:10px 13px!important;font-size:12px!important;}
  html body.landing-page > nav > .mobile-nav-backdrop {display:none!important;}
}
@media (max-width:1100px) {
  html body.landing-page > nav {position:relative!important;z-index:2200!important;min-height:68px!important;padding:10px 16px!important;gap:12px!important;overflow:visible!important;}
  html body.landing-page > nav > a.logo {flex:0 1 178px!important;width:178px!important;min-width:0!important;max-width:178px!important;}
  html body.landing-page > nav > a.logo > img.billi-header-wordmark {width:100%!important;max-width:100%!important;max-height:43px!important;}
  html body.landing-page > nav > .menu-toggle {display:flex!important;flex:0 0 48px!important;width:48px!important;height:48px!important;min-width:48px!important;align-items:center!important;justify-content:center!important;margin-left:auto!important;border:1px solid #dbe4f0!important;border-radius:12px!important;background:#f2f6ff!important;color:#172033!important;}
  html body.landing-page > nav > .navlinks {display:none!important;position:fixed!important;top:78px!important;left:12px!important;right:12px!important;z-index:2202!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 96px)!important;overflow-y:auto!important;overflow-x:hidden!important;flex-flow:column nowrap!important;align-items:stretch!important;justify-content:flex-start!important;gap:5px!important;padding:12px!important;margin:0!important;background:#fff!important;border:1px solid #dce5f1!important;border-radius:16px!important;box-shadow:0 18px 48px rgba(17,32,58,.22)!important;white-space:normal!important;}
  html body.landing-page > nav > .navlinks.open {display:flex!important;}
  html body.landing-page > nav > .navlinks > a {display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-height:44px!important;box-sizing:border-box!important;padding:12px 14px!important;margin:0!important;border-radius:10px!important;font-size:15px!important;line-height:1.25!important;color:#334155!important;white-space:normal!important;}
  html body.landing-page > nav > .navlinks > a.btn,
  html body.landing-page > nav > .navlinks > .billi-install-button {display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:48px!important;margin:4px 0 0!important;padding:13px 14px!important;border-radius:11px!important;text-align:center!important;font-size:15px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;white-space:normal!important;}
  html body.landing-page > nav > .mobile-nav-backdrop {display:none!important;position:fixed!important;inset:68px 0 0!important;z-index:2201!important;background:rgba(18,31,54,.34)!important;backdrop-filter:blur(2px)!important;}
  html body.landing-page > nav > .mobile-nav-backdrop.open {display:block!important;}
  html body.menu-open.landing-page .landing-actions {visibility:hidden!important;}
}
@media (max-width:390px) {
  html body.landing-page > nav {padding-left:12px!important;padding-right:12px!important;gap:8px!important;}
  html body.landing-page > nav > a.logo {flex-basis:158px!important;width:158px!important;max-width:158px!important;}
  html body.landing-page > nav > .menu-toggle {flex-basis:44px!important;width:44px!important;min-width:44px!important;height:44px!important;}
}

/* Keep invoice fields readable and aligned without the tall, oversized card layout. */
html body.billi-app .invoice-clean-form {padding:20px!important;border:1px solid #dce5f1!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 28px rgba(23,32,51,.05)!important;}
html body.billi-app .invoice-clean-form .invoice-simple-section {min-width:0!important;padding:16px 0!important;margin:0!important;border-bottom:1px solid #e8edf5!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading {display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:12px!important;width:100%!important;min-width:0!important;margin:0 0 12px!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading>div {display:block!important;min-width:0!important;width:auto!important;max-width:100%!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading h2 {margin:0 0 4px!important;font-size:20px!important;line-height:1.25!important;letter-spacing:-.35px!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading p {margin:0!important;font-size:13px!important;line-height:1.45!important;overflow-wrap:break-word!important;}
html body.billi-app .invoice-clean-form .grid2 {gap:12px!important;}
html body.billi-app .invoice-clean-form .invoice-field {min-width:0!important;gap:4px!important;margin:0 0 10px!important;}
html body.billi-app .invoice-clean-form .invoice-field label,
html body.billi-app .invoice-clean-form .item-field label {margin:0 0 2px!important;font-size:13px!important;line-height:1.3!important;font-weight:750!important;color:#344256!important;}
html body.billi-app .invoice-clean-form .invoice-field input,
html body.billi-app .invoice-clean-form .invoice-field select,
html body.billi-app .invoice-clean-form .invoice-field textarea,
html body.billi-app .invoice-clean-form .item-field input,
html body.billi-app .invoice-clean-form .item-field select {width:100%!important;min-width:0!important;max-width:100%!important;min-height:42px!important;padding:9px 11px!important;border:1px solid #d5dfed!important;border-radius:10px!important;background:#fff!important;color:#172033!important;font-size:14px!important;line-height:1.35!important;box-shadow:none!important;}
html body.billi-app .invoice-clean-form .invoice-field textarea {min-height:84px!important;}
html body.billi-app .invoice-clean-form .invoice-field small,
html body.billi-app .invoice-clean-form .item-field small {font-size:11px!important;line-height:1.3!important;color:#758197!important;margin:2px 0 0!important;}
html body.billi-app .invoice-clean-form .item-row-wrap,
html body.billi-app .invoice-clean-form #items {width:100%!important;min-width:0!important;}
html body.billi-app .invoice-clean-form .item-row {display:grid!important;grid-template-columns:minmax(0,1.6fr) minmax(88px,.7fr) minmax(88px,.8fr)!important;gap:10px!important;align-items:start!important;padding:13px!important;margin:0 0 10px!important;border:1px solid #dce5f1!important;border-radius:13px!important;background:#f7f9ff!important;}
html body.billi-app .invoice-clean-form .item-field {min-width:0!important;width:100%!important;}
html body.billi-app .invoice-clean-form .item-field:nth-child(1) {grid-column:1/2!important;}
html body.billi-app .invoice-clean-form .item-field:nth-child(2) {grid-column:1/-1!important;}
html body.billi-app .invoice-clean-form .item-field:nth-child(3) {grid-column:1/2!important;}
html body.billi-app .invoice-clean-form .item-field:nth-child(4) {grid-column:2/3!important;}
html body.billi-app .invoice-clean-form .item-field:nth-child(5) {grid-column:3/4!important;}
html body.billi-app .invoice-clean-form .remove-item {grid-column:1/-1!important;justify-self:start!important;min-height:34px!important;padding:7px 11px!important;border-radius:9px!important;}
html body.billi-app .invoice-clean-form .invoice-simple-heading .add-item-btn {display:inline-flex!important;align-items:center!important;justify-content:center!important;justify-self:end!important;align-self:start!important;flex:0 0 auto!important;width:auto!important;min-width:104px!important;max-width:100%!important;min-height:40px!important;padding:9px 13px!important;border:1px solid #d6e3ff!important;border-radius:10px!important;background:#edf3ff!important;color:#2457d6!important;font-weight:800!important;white-space:nowrap!important;}
html body.billi-app .invoice-clean-form .invoice-calculation {overflow:hidden!important;border:1px solid #dce5f1!important;border-radius:13px!important;}
html body.billi-app .invoice-clean-form .invoice-calculation>div {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:10px 13px!important;border-bottom:1px solid #edf0f5!important;}
html body.billi-app .invoice-clean-form .invoice-calculation .calc-total {background:#edf3ff!important;color:#2457d6!important;}
html body.billi-app .invoice-clean-form .invoice-payment-preview {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-top:10px!important;padding:12px 14px!important;border:1px solid #d6e3ff!important;border-radius:12px!important;background:#edf3ff!important;color:#334155!important;}
html body.billi-app .invoice-clean-form .invoice-payment-preview strong {color:#2457d6!important;white-space:nowrap!important;}
html body.billi-app .invoice-clean-form .invoice-submit-box {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin-top:14px!important;padding:16px!important;border:1px solid #d6e3ff!important;border-radius:14px!important;background:#f2f6ff!important;}
html body.billi-app .invoice-clean-form .invoice-submit-box>div {display:flex!important;flex-direction:column!important;gap:4px!important;}
html body.billi-app .invoice-clean-form .invoice-submit-box .btn {min-height:46px!important;padding:12px 18px!important;border-radius:10px!important;background:#2457d6!important;color:#fff!important;font-weight:850!important;white-space:nowrap!important;}
html body.billi-app .invoice-clean-form .invoice-optional-details {padding:0!important;}
html body.billi-app .invoice-clean-form .invoice-optional-details>summary {display:flex!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;justify-content:space-between!important;cursor:pointer!important;list-style:none!important;padding:12px 0!important;margin:0!important;}
html body.billi-app .invoice-clean-form .invoice-optional-details>summary::-webkit-details-marker {display:none!important;}
html body.billi-app .invoice-clean-form .invoice-optional-title {display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;}
html body.billi-app .invoice-clean-form .invoice-optional-title strong {font-size:17px!important;color:#172033!important;}
html body.billi-app .invoice-clean-form .invoice-optional-title small {font-size:12px!important;color:#758197!important;}
html body.billi-app .invoice-clean-form .invoice-optional-chevron {display:inline-flex!important;align-items:center!important;justify-content:center!important;width:32px!important;height:32px!important;border-radius:9px!important;background:#edf3ff!important;color:#2457d6!important;font-size:20px!important;font-weight:700!important;}
html body.billi-app .invoice-clean-form .invoice-optional-details[open] .invoice-optional-chevron {font-size:0!important;}
html body.billi-app .invoice-clean-form .invoice-optional-details[open] .invoice-optional-chevron:before {content:'−';font-size:22px!important;}
@media (max-width:760px) {
 html body.billi-app .invoice-clean-form {padding:12px!important;border-radius:14px!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-section {padding:12px 0!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;margin-bottom:9px!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading>div {width:100%!important;min-width:0!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading h2 {font-size:18px!important;line-height:1.25!important;overflow-wrap:normal!important;word-break:normal!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading p {font-size:12px!important;line-height:1.4!important;}
 html body.billi-app .invoice-clean-form .invoice-simple-heading .add-item-btn {justify-self:start!important;min-width:0!important;min-height:38px!important;padding:8px 13px!important;font-size:13px!important;}
 html body.billi-app .invoice-clean-form .invoice-field {margin-bottom:8px!important;}
 html body.billi-app .invoice-clean-form .invoice-field label,
 html body.billi-app .invoice-clean-form .item-field label {font-size:12px!important;}
 html body.billi-app .invoice-clean-form .invoice-field input,
 html body.billi-app .invoice-clean-form .invoice-field select,
 html body.billi-app .invoice-clean-form .invoice-field textarea,
 html body.billi-app .invoice-clean-form .item-field input,
 html body.billi-app .invoice-clean-form .item-field select {min-height:40px!important;padding:8px 10px!important;font-size:14px!important;border-radius:9px!important;}
 html body.billi-app .invoice-clean-form .invoice-field small,
 html body.billi-app .invoice-clean-form .item-field small {display:none!important;}
 html body.billi-app .invoice-clean-form .item-row {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px!important;margin-bottom:8px!important;border-radius:11px!important;}
 html body.billi-app .invoice-clean-form .item-field:nth-child(1) {grid-column:1/-1!important;}
 html body.billi-app .invoice-clean-form .item-field:nth-child(2) {grid-column:1/-1!important;}
 html body.billi-app .invoice-clean-form .item-field:nth-child(3) {grid-column:1/2!important;}
 html body.billi-app .invoice-clean-form .item-field:nth-child(4) {grid-column:2/3!important;}
 html body.billi-app .invoice-clean-form .item-field:nth-child(5) {grid-column:1/-1!important;}
 html body.billi-app .invoice-clean-form .remove-item {grid-column:1/-1!important;justify-self:stretch!important;min-height:34px!important;}
 html body.billi-app .invoice-clean-form .invoice-details-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
 html body.billi-app .invoice-clean-form .invoice-details-grid .invoice-field:first-child,
 html body.billi-app .invoice-clean-form .invoice-details-grid .invoice-field:nth-child(2) {grid-column:1/-1!important;}
 html body.billi-app .invoice-clean-form .invoice-price-controls,
 html body.billi-app .invoice-clean-form .invoice-payment-entry-grid,
 html body.billi-app .invoice-clean-form .invoice-notes-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
 html body.billi-app .invoice-clean-form .invoice-payment-notes {grid-column:1/-1!important;}
 html body.billi-app .invoice-clean-form .invoice-calculation>div {padding:8px 10px!important;font-size:13px!important;}
 html body.billi-app .invoice-clean-form .invoice-calculation .calc-total {font-size:15px!important;}
 html body.billi-app .invoice-clean-form .invoice-payment-preview {padding:10px!important;font-size:12px!important;}
 html body.billi-app .invoice-clean-form .invoice-submit-box {display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin-top:10px!important;padding:12px!important;}
 html body.billi-app .invoice-clean-form .invoice-submit-box .btn {width:100%!important;min-height:46px!important;white-space:normal!important;}
 html body.billi-app .invoice-clean-form .invoice-optional-title strong {font-size:15px!important;}
}
@media (max-width:380px) {
 html body.billi-app .invoice-clean-form .invoice-details-grid,
 html body.billi-app .invoice-clean-form .invoice-price-controls,
 html body.billi-app .invoice-clean-form .invoice-payment-entry-grid,
 html body.billi-app .invoice-clean-form .invoice-notes-grid {grid-template-columns:minmax(0,1fr)!important;}
 html body.billi-app .invoice-clean-form .invoice-payment-notes {grid-column:auto!important;}
}


/* BILLI PRO V48 — final public-header wordmark visibility fix.
   The existing /assets/icons/billi-wordmark.png is retained; no image is replaced.
   Allow the complete wordmark to size naturally and prevent flex/nav clipping. */
html body.landing-page > nav {
  overflow: visible !important;
}
html body.landing-page > nav > a.logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 100px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
html body.landing-page > nav > a.logo > img.billi-header-wordmark {
  display: block !important;
  flex: 0 1 auto !important;
  width: clamp(164px, 23vw, 230px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 100px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  clip-path: none !important;
  transform: none !important;
}
@media (max-width: 760px) {
  html body.landing-page > nav > a.logo {
    max-width: calc(100vw - 104px) !important;
  }
  html body.landing-page > nav > a.logo > img.billi-header-wordmark {
    width: min(220px, calc(100vw - 104px)) !important;
    max-width: calc(100vw - 104px) !important;
  }
}


/* BILLI PRO public header correction — normal Android and Chrome Desktop-site modes.
   The existing wordmark asset is unchanged. Android Desktop site can report a wide
   CSS viewport on a narrow physical phone, so the JS-detected physical-mobile class
   is used in addition to ordinary viewport breakpoints. */
html.billi-physical-mobile body.landing-page > nav {
  display:flex !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:2200 !important;
  width:100% !important;
  min-height:88px !important;
  height:auto !important;
  padding:10px 14px !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:space-between !important;
  overflow:visible !important;
}
html.billi-physical-mobile body.landing-page > nav > a.logo {
  display:inline-flex !important;
  flex:0 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:calc(100% - 76px) !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
html.billi-physical-mobile body.landing-page > nav > a.logo > img.billi-header-wordmark {
  display:block !important;
  flex:0 1 auto !important;
  width:clamp(220px, 36vw, 350px) !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  clip-path:none !important;
  transform:none !important;
}
html.billi-physical-mobile body.landing-page > nav > .menu-toggle {
  display:flex !important;
  flex:0 0 60px !important;
  width:60px !important;
  min-width:60px !important;
  height:60px !important;
  min-height:60px !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #dbe4f0 !important;
  border-radius:14px !important;
  background:#f5f7fb !important;
  color:#172033 !important;
  box-sizing:border-box !important;
}
html.billi-physical-mobile body.landing-page > nav > .menu-toggle .menu-icon {
  display:flex !important;
  width:30px !important;
  height:23px !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}
html.billi-physical-mobile body.landing-page > nav > .menu-toggle .menu-icon i {
  display:block !important;
  width:30px !important;
  height:3px !important;
  background:#172033 !important;
  border-radius:999px !important;
  opacity:1;
  transform:none;
}
html.billi-physical-mobile body.landing-page > nav > .menu-toggle.is-open .menu-icon i:nth-child(1) {
  transform:translateY(10px) rotate(45deg) !important;
}
html.billi-physical-mobile body.landing-page > nav > .menu-toggle.is-open .menu-icon i:nth-child(2) {
  opacity:0 !important;
}
html.billi-physical-mobile body.landing-page > nav > .menu-toggle.is-open .menu-icon i:nth-child(3) {
  transform:translateY(-10px) rotate(-45deg) !important;
}
html.billi-physical-mobile body.landing-page > nav > .navlinks {
  display:none !important;
  position:fixed !important;
  top:calc(env(safe-area-inset-top, 0px) + 188px) !important;
  left:12px !important;
  right:12px !important;
  z-index:2202 !important;
  width:auto !important;
  max-width:none !important;
  max-height:calc(100dvh - 210px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  flex-flow:column nowrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:5px !important;
  margin:0 !important;
  padding:12px !important;
  background:#fff !important;
  border:1px solid #dce5f1 !important;
  border-radius:16px !important;
  box-shadow:0 18px 48px rgba(17,32,58,.22) !important;
  white-space:normal !important;
}
html.billi-physical-mobile body.landing-page > nav > .navlinks.open {
  display:flex !important;
}
html.billi-physical-mobile body.landing-page > nav > .navlinks > a {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:52px !important;
  box-sizing:border-box !important;
  padding:13px 14px !important;
  margin:0 !important;
  border-radius:10px !important;
  font-size:16px !important;
  line-height:1.25 !important;
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  white-space:normal !important;
}
html.billi-physical-mobile body.landing-page > nav > .navlinks > a.btn,
html.billi-physical-mobile body.landing-page > nav > .navlinks > .billi-install-button {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:56px !important;
  margin:5px 0 0 !important;
  padding:14px 16px !important;
  border:1px solid #2457d6 !important;
  border-radius:11px !important;
  background:#2457d6 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:normal !important;
  opacity:1 !important;
}
html.billi-physical-mobile body.landing-page > nav > .mobile-nav-backdrop {
  display:none !important;
  position:fixed !important;
  inset:calc(env(safe-area-inset-top, 0px) + 176px) 0 0 !important;
  z-index:2201 !important;
  background:rgba(18,31,54,.34) !important;
  backdrop-filter:blur(2px) !important;
}
html.billi-physical-mobile body.landing-page > nav > .mobile-nav-backdrop.open {
  display:block !important;
}
/* In ordinary narrow mobile view, retain the same menu/button corrections but
   scale the header back to a phone-sized logo and button. */
@media (max-width:760px) {
  html body.landing-page > nav > .navlinks > a.btn,
  html body.landing-page > nav > .navlinks > .billi-install-button {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:#2457d6 !important;
    border-color:#2457d6 !important;
    opacity:1 !important;
  }
  html body.landing-page > nav > .menu-toggle .menu-icon i {
    background:#172033 !important;
  }
}