:root{--bg:#f3f6fb;--surface:#fff;--surface2:#f8fafc;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--brand:#0f4cbd;--brand2:#1677ff;--brand-soft:#eaf2ff;--ok:#07875d;--ok-soft:#e8f8f2;--warn:#a86400;--warn-soft:#fff6df;--danger:#c93636;--danger-soft:#fff0f0;--shadow-sm:0 4px 14px rgba(15,23,42,.05);--shadow:0 14px 40px rgba(15,23,42,.09);--radius:20px}
*{box-sizing:border-box}html{background:var(--bg);-webkit-text-size-adjust:100%}body.customer-app{margin:0;background:radial-gradient(circle at top right,#e8f1ff 0,transparent 28rem),var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.app-shell{width:min(100%,820px);margin:0 auto;padding:0 18px 104px}.app-head{position:sticky;top:0;z-index:20;margin:0 -4px;background:rgba(243,246,251,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:15px 4px 11px;display:flex;align-items:center;justify-content:space-between}.app-brand{display:flex;align-items:center;gap:11px;font-weight:850;letter-spacing:-.02em}.app-brand small{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.02em;margin-top:1px}.app-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 8px 20px rgba(15,76,189,.25)}.icon-btn{border:1px solid var(--line);background:rgba(255,255,255,.88);border-radius:12px;padding:9px 12px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:800;box-shadow:var(--shadow-sm)}.hello{margin:16px 1px 15px}.hello h1{margin:0;font-size:27px;line-height:1.15;letter-spacing:-.045em}.hello p{margin:7px 0 0;color:var(--muted);font-size:13px}.subtle-id{font-variant-numeric:tabular-nums}.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0c3b91 0%,#0f61d8 62%,#1783ff 100%);color:#fff;border-radius:26px;padding:24px;box-shadow:0 18px 42px rgba(15,76,189,.25)}.hero:after{content:"";position:absolute;right:-55px;top:-80px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.09)}.hero-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;opacity:.78;font-weight:800}.amount{font-size:37px;line-height:1;font-weight:900;letter-spacing:-.055em;margin:9px 0 8px;font-variant-numeric:tabular-nums}.due-line{font-size:13px;opacity:.92}.status-pill{align-self:flex-start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:7px 10px;border-radius:999px;font-size:11px;font-weight:850;text-transform:capitalize}.hero-actions{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.hero-btn{display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;padding:12px 14px;font-size:12px;font-weight:850;text-align:center;text-decoration:none}.hero-btn.primary{background:#fff;color:#0f4cbd;box-shadow:0 5px 16px rgba(3,25,69,.15)}.hero-btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}.hero-btn svg,.quick svg,.nav-ico svg{width:18px;height:18px;stroke:currentColor}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0 4px}.quick{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:17px;padding:14px 8px 12px;text-decoration:none;color:var(--ink);text-align:center;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease}.quick:active{transform:scale(.98)}.quick-icon{width:36px;height:36px;margin:0 auto 7px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}.quick span{font-size:10.5px;font-weight:800;color:#526174}.section{margin-top:20px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:0 2px 10px}.section-title h2{font-size:15px;letter-spacing:-.02em;margin:0}.section-title a{font-size:11px;color:var(--brand);text-decoration:none;font-weight:850}.cardx{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}.info-row{padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line)}.info-row:last-child{border-bottom:0}.info-row span{color:var(--muted);font-size:12.5px}.info-row strong{font-size:12.5px;text-align:right;font-weight:800}.list-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s ease}.list-item:last-child{border-bottom:0}.list-item[href]:hover{background:#fbfdff}.list-icon{width:42px;height:42px;border-radius:13px;background:var(--brand-soft);display:grid;place-items:center;font-weight:900;color:var(--brand);flex:0 0 auto;font-size:12px}.list-icon.ok{background:var(--ok-soft);color:var(--ok)}.list-main{min-width:0;flex:1}.list-main strong{display:block;font-size:13.5px}.list-main small{display:block;color:var(--muted);font-size:11.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-main small.wrap{white-space:normal;line-height:1.45}.list-side{text-align:right;flex:0 0 auto}.list-side strong{font-size:12.5px;font-variant-numeric:tabular-nums}.list-side small{font-size:10.5px}.badge-x{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:9.5px;font-weight:850;text-transform:capitalize;background:#eef2f7;color:#526174}.badge-x.paid,.badge-x.resolved,.badge-x.active{background:var(--ok-soft);color:#087453}.badge-x.unpaid,.badge-x.open,.badge-x.suspended,.badge-x.inactive{background:var(--danger-soft);color:#b52b2b}.badge-x.partial,.badge-x.in_progress,.badge-x.pending{background:var(--warn-soft);color:#925d00}.empty{padding:30px 18px;color:var(--muted);text-align:center;font-size:12.5px}.empty strong{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}.bottom-nav{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));width:min(780px,calc(100% - 24px));background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 16px 40px rgba(15,23,42,.16);border-radius:20px;display:grid;grid-template-columns:repeat(4,1fr);padding:7px}.bottom-nav a{text-decoration:none;color:var(--muted);text-align:center;padding:7px 4px 6px;border-radius:13px;font-size:9.5px;font-weight:850;display:flex;flex-direction:column;align-items:center;gap:3px}.nav-ico{width:28px;height:25px;display:grid;place-items:center}.bottom-nav a.active{background:var(--brand-soft);color:var(--brand)}.form-card{background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:20px;padding:19px;box-shadow:var(--shadow-sm)}.fieldx{margin-bottom:15px}.fieldx label{display:block;font-size:11.5px;font-weight:850;margin-bottom:7px}.fieldx select,.fieldx textarea,.fieldx input{width:100%;border:1px solid #d8e0eb;border-radius:13px;padding:12px 13px;font:inherit;font-size:13px;background:#fff;color:var(--ink);outline:none;transition:border-color .16s,box-shadow .16s}.fieldx select:focus,.fieldx textarea:focus,.fieldx input:focus{border-color:#7aa9ee;box-shadow:0 0 0 3px rgba(22,119,255,.1)}.fieldx textarea{min-height:125px;resize:vertical;line-height:1.5}.field-help{color:var(--muted);font-size:10.5px;margin-top:6px}.btnx{width:100%;border:0;border-radius:13px;padding:13px 15px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:850;font:inherit;font-size:13px;cursor:pointer;box-shadow:0 9px 20px rgba(15,76,189,.18)}.alertx{padding:12px 14px;border-radius:13px;margin-bottom:12px;font-size:12.5px;border:1px solid transparent}.alertx.success{background:var(--ok-soft);color:#086744;border-color:#c9efdf}.alertx.error{background:var(--danger-soft);color:#a62d2d;border-color:#ffd8d8}.page-title{display:flex;align-items:center;gap:10px;margin:12px 1px 17px}.back-btn{width:35px;height:35px;border:1px solid var(--line);border-radius:11px;background:#fff;display:grid;place-items:center;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}.back-btn svg{width:17px;height:17px}.page-title h1{font-size:22px;letter-spacing:-.035em;margin:0}.page-title p{margin:4px 0 0;color:var(--muted);font-size:11.5px}.install-tip{display:none;margin:12px 0;padding:11px 13px;border:1px solid #cfe0ff;border-radius:13px;background:#eef5ff;color:#174f9b;font-size:11.5px}.install-tip.show{display:flex;justify-content:space-between;align-items:center;gap:12px}.install-tip button{border:0;background:var(--brand);color:#fff;border-radius:9px;padding:7px 10px;font-weight:850}.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0 0}.metric{padding:12px;background:#fff;border:1px solid var(--line);border-radius:15px}.metric span{display:block;color:var(--muted);font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}.metric strong{display:block;margin-top:5px;font-size:13px}.secure-note{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:10.5px;margin-top:16px}.secure-note svg{width:13px;height:13px}.auth-wrap.customer-auth{min-height:100vh;background:radial-gradient(circle at 80% 10%,#dceaff 0,transparent 25rem),linear-gradient(180deg,#eef4fc,#f8fafc);padding:30px 16px;display:grid;place-items:center}.customer-auth .auth-card{width:min(100%,430px);background:#fff;border-radius:26px;border:1px solid var(--line);padding:28px;box-shadow:0 24px 65px rgba(15,23,42,.13)}.customer-auth .brand{display:flex;align-items:center;gap:10px;font-weight:900}.customer-auth .brand .mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px rgba(15,76,189,.23)}.customer-auth h1{font-size:28px;letter-spacing:-.045em;margin:24px 0 7px}.customer-auth .sub{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 22px}.auth-field{margin-bottom:14px}.auth-field label{display:block;font-size:11.5px;font-weight:850;margin-bottom:7px}.auth-input-wrap{position:relative}.auth-field input{width:100%;height:46px;border:1px solid #d8e0eb;border-radius:13px;padding:0 13px;font:inherit;font-size:13px;outline:none}.auth-field input:focus{border-color:#7aa9ee;box-shadow:0 0 0 3px rgba(22,119,255,.1)}.auth-submit{width:100%;height:46px;border:0;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font:inherit;font-size:13px;font-weight:850;cursor:pointer;box-shadow:0 10px 22px rgba(15,76,189,.2)}.auth-foot{text-align:center;color:var(--muted);font-size:10.5px;margin-top:17px}.auth-divider{height:1px;background:var(--line);margin:20px 0}.receipt{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow-sm)}.receipt-logo{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--line)}.receipt-logo h2{margin:0;font-size:17px}.big-paid{padding:25px 0;text-align:center}.big-paid span{display:block;color:var(--muted);font-size:11px}.big-paid strong{display:block;font-size:34px;letter-spacing:-.045em;margin-top:5px}.paid-check{width:48px;height:48px;margin:0 auto 10px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}.paid-check svg{width:23px;height:23px}.receipt-actions{display:flex;gap:10px;margin-top:14px}.receipt-actions a,.receipt-actions button{flex:1;border:0;border-radius:12px;padding:12px;text-align:center;text-decoration:none;font:inherit;font-size:12px;font-weight:850;background:var(--brand);color:#fff}.receipt-actions a{background:var(--brand-soft);color:var(--brand)}
@media(max-width:560px){.app-shell{padding-left:14px;padding-right:14px}.quick-grid{gap:7px}.quick{padding:12px 4px 10px}.quick span{font-size:9.5px}.hero{padding:21px;border-radius:22px}.amount{font-size:33px}.hello h1{font-size:24px}.metric-strip{grid-template-columns:1fr 1fr}.metric:last-child{grid-column:1/-1}.customer-auth .auth-card{padding:23px}}
@media(min-width:700px){.hero{padding:28px}.quick{padding:15px}.list-item{padding:15px 17px}}
@media print{body.customer-app{background:#fff}.app-head,.page-title,.receipt-actions,.bottom-nav,.install-tip{display:none!important}.app-shell{max-width:none;padding:0}.receipt,.cardx{border:0;box-shadow:none}}

/* Professional billing & invoice module */
.badge-x.overdue{background:var(--danger-soft);color:#b42323}.bill-hero .status-pill{white-space:nowrap}.bill-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0 18px}.bill-summary{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 14px;box-shadow:var(--shadow-sm)}.bill-summary span{display:block;color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.055em;font-weight:800}.bill-summary strong{display:block;margin-top:6px;font-size:14px;letter-spacing:-.015em}.bill-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:5px;background:#e8edf5;border-radius:15px;margin:4px 0 16px}.bill-tabs a{text-decoration:none;color:#64748b;text-align:center;border-radius:11px;padding:9px 7px;font-size:10.5px;font-weight:850}.bill-tabs a span{opacity:.68;margin-left:3px}.bill-tabs a.active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(15,23,42,.08)}.bill-list-section{margin-top:0}.bill-list-item{align-items:center}.bill-due-line{margin-top:2px!important}.bill-list-side{min-width:86px}.bill-list-side .badge-x{margin-top:6px}.bill-list-side strong{font-size:13px}
.invoice-shell{width:min(100%,920px);padding-bottom:40px}.invoice-app-head{position:relative;background:transparent;padding-bottom:4px}.invoice-toolbar{display:flex;align-items:center;justify-content:space-between;margin:10px 1px 14px}.invoice-toolbar-actions{display:flex;gap:8px}.invoice-tool-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:11px;padding:9px 12px;font:inherit;font-size:10.5px;font-weight:850;box-shadow:var(--shadow-sm);cursor:pointer}.invoice-tool-btn svg{width:15px;height:15px}.invoice-paper{background:#fff;border:1px solid #dfe6ef;border-radius:24px;box-shadow:0 18px 52px rgba(15,23,42,.10);overflow:hidden}.invoice-paper-head{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;padding:28px 30px 24px;border-bottom:1px solid var(--line)}.invoice-company{display:flex;gap:13px;align-items:flex-start}.invoice-brand-mark{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center;font-size:21px;font-weight:900;box-shadow:0 9px 22px rgba(15,76,189,.22);flex:0 0 auto}.invoice-company h1{margin:1px 0 5px;font-size:17px;letter-spacing:-.025em}.invoice-company p{margin:2px 0;color:var(--muted);font-size:10.5px;line-height:1.45;max-width:360px}.invoice-doc-id{text-align:right}.invoice-doc-id>span{display:block;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.16em}.invoice-doc-id>strong{display:block;font-size:16px;margin:4px 0 9px;letter-spacing:-.015em}.invoice-state{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:9px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.045em;background:#eef2f7;color:#526174}.invoice-state.paid{background:var(--ok-soft);color:var(--ok)}.invoice-state.partial{background:var(--warn-soft);color:#925d00}.invoice-state.unpaid,.invoice-state.overdue{background:var(--danger-soft);color:#b52b2b}.invoice-balance-panel{margin:22px 30px 0;padding:19px 20px;border-radius:17px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#edf4ff,#f8fbff);border:1px solid #d9e7ff}.invoice-balance-panel>div:first-child>span{display:block;color:#45607f;font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.invoice-balance-panel>div:first-child>strong{display:block;font-size:28px;letter-spacing:-.045em;margin:6px 0 5px}.invoice-balance-panel>div:first-child>small{display:block;color:#60758d;font-size:10.5px}.invoice-balance-panel.paid{background:linear-gradient(135deg,#ebfaf4,#f8fffc);border-color:#caeedf}.invoice-balance-panel.overdue{background:linear-gradient(135deg,#fff0f0,#fff9f9);border-color:#ffd9d9}.invoice-state-icon{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:0 5px 14px rgba(15,23,42,.07)}.invoice-balance-panel.paid .invoice-state-icon{color:var(--ok)}.invoice-balance-panel.overdue .invoice-state-icon{color:var(--danger)}.invoice-state-icon svg{width:22px;height:22px}.invoice-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:22px 30px 0;border:1px solid var(--line);border-radius:15px;overflow:hidden}.invoice-meta-grid>div{padding:12px 13px;border-right:1px solid var(--line);min-width:0}.invoice-meta-grid>div:last-child{border-right:0}.invoice-meta-grid span,.invoice-party-card>span,.invoice-note>span{display:block;color:var(--muted);font-size:8.5px;text-transform:uppercase;letter-spacing:.075em;font-weight:850}.invoice-meta-grid strong{display:block;margin-top:5px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.invoice-mono{font-variant-numeric:tabular-nums}.invoice-party-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 30px 0}.invoice-party-card{border:1px solid var(--line);border-radius:15px;padding:15px}.invoice-party-card h2{margin:7px 0 5px;font-size:13.5px}.invoice-party-card p{margin:3px 0;color:var(--muted);font-size:10.5px;line-height:1.45}.invoice-lines{margin:25px 30px 0}.invoice-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.075em;font-weight:900;color:#475569;margin-bottom:9px}.invoice-line{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line);font-size:11.5px}.invoice-line>span b{display:block;font-size:12px}.invoice-line>span small{display:block;color:var(--muted);font-size:9.5px;margin-top:4px}.invoice-line>strong{font-variant-numeric:tabular-nums}.invoice-line-head{padding:8px 2px;color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.055em}.invoice-line.adjustment{color:#526174}.invoice-total-box{width:min(100%,365px);margin:18px 30px 0 auto;padding:17px 18px;background:#f8fafc;border:1px solid var(--line);border-radius:16px}.invoice-total-box>div{display:flex;justify-content:space-between;gap:20px;padding:5px 0;font-size:11px}.invoice-total-box>div span{color:var(--muted)}.invoice-total-box strong{font-variant-numeric:tabular-nums}.invoice-paid-value{color:var(--ok)}.invoice-total-box .invoice-grand{margin-top:7px;padding-top:12px;border-top:1px solid #d7dee8;font-size:14px}.invoice-total-box .invoice-grand span{color:var(--ink);font-weight:800}.invoice-total-box .invoice-grand strong{font-size:16px}.invoice-note{margin:20px 30px 0;padding:14px 15px;border-radius:14px;background:#f8fafc;border:1px solid var(--line)}.invoice-note p{margin:7px 0 0;font-size:10.5px;line-height:1.55;color:#475569}.invoice-payments{margin:24px 30px 0}.invoice-empty-payment{padding:15px;border:1px dashed #cfd8e4;border-radius:13px;color:var(--muted);font-size:10.5px;text-align:center}.invoice-payment-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}.invoice-payment-row:last-child{border-bottom:0}.invoice-payment-icon{width:34px;height:34px;border-radius:11px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}.invoice-payment-icon svg{width:16px;height:16px}.invoice-payment-row>div:nth-child(2) strong{display:block;font-size:11.5px}.invoice-payment-row>div:nth-child(2) small{display:block;color:var(--muted);font-size:9.5px;margin-top:3px}.invoice-payment-row>span{color:var(--brand);font-size:9.5px;font-weight:850}.invoice-paper-foot{margin-top:25px;padding:18px 30px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:flex-end;background:#fbfcfe}.invoice-paper-foot strong{display:block;font-size:10.5px}.invoice-paper-foot span{display:block;color:var(--muted);font-size:9px;margin-top:4px}.invoice-foot-id{text-align:right;color:var(--muted);font-size:8.5px;line-height:1.55;font-variant-numeric:tabular-nums}.invoice-mobile-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:13px}.invoice-primary-action,.invoice-secondary-action{border-radius:12px;padding:11px 14px;text-decoration:none;font-size:10.5px;font-weight:850}.invoice-primary-action{background:var(--brand);color:#fff}.invoice-secondary-action{background:#fff;border:1px solid var(--line);color:var(--brand)}
@media(max-width:620px){.bill-summary-grid{grid-template-columns:1fr 1fr}.bill-summary:last-child{grid-column:1/-1}.invoice-shell{padding-left:12px;padding-right:12px}.invoice-paper{border-radius:20px}.invoice-paper-head{padding:21px 18px 18px;gap:12px}.invoice-brand-mark{width:42px;height:42px;border-radius:13px}.invoice-company h1{font-size:14px}.invoice-company p{font-size:9px;max-width:180px}.invoice-doc-id>strong{font-size:13px}.invoice-balance-panel{margin:16px 18px 0;padding:16px}.invoice-balance-panel>div:first-child>strong{font-size:24px}.invoice-meta-grid{grid-template-columns:1fr 1fr;margin:15px 18px 0}.invoice-meta-grid>div{border-bottom:1px solid var(--line)}.invoice-meta-grid>div:nth-child(2){border-right:0}.invoice-meta-grid>div:nth-child(3),.invoice-meta-grid>div:nth-child(4){border-bottom:0}.invoice-party-grid{grid-template-columns:1fr;margin:10px 18px 0}.invoice-lines,.invoice-payments{margin-left:18px;margin-right:18px}.invoice-total-box{width:auto;margin:15px 18px 0}.invoice-note{margin:16px 18px 0}.invoice-paper-foot{padding:16px 18px 18px}.invoice-toolbar-actions .invoice-tool-btn span{display:none}.invoice-tool-btn{padding:9px 10px}.invoice-mobile-actions{justify-content:stretch}.invoice-primary-action,.invoice-secondary-action{flex:1;text-align:center}.invoice-payment-row>span{display:none}}
@media print{@page{size:A4;margin:11mm}html,body.customer-app.invoice-app-page{background:#fff!important}.invoice-app-page .app-head,.invoice-app-page .invoice-toolbar,.invoice-app-page .invoice-mobile-actions{display:none!important}.invoice-app-page .app-shell{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}.invoice-paper{border:0!important;border-radius:0!important;box-shadow:none!important}.invoice-paper-head{padding:0 0 18px}.invoice-balance-panel{margin-left:0;margin-right:0}.invoice-meta-grid{margin-left:0;margin-right:0}.invoice-party-grid{margin-left:0;margin-right:0}.invoice-lines,.invoice-payments{margin-left:0;margin-right:0}.invoice-total-box{margin-right:0}.invoice-note{margin-left:0;margin-right:0}.invoice-paper-foot{padding-left:0;padding-right:0;background:#fff}.invoice-payment-row{break-inside:avoid}.invoice-state,.invoice-balance-panel,.invoice-payment-icon{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* Customer connection health */
.health-live-note{font-size:10px;color:var(--muted);font-weight:750}.health-card{background:linear-gradient(145deg,#fff,#f8fbff);border:1px solid #dce6f4;border-radius:20px;padding:17px;box-shadow:var(--shadow-sm);overflow:hidden}.health-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.health-state-wrap{display:flex;align-items:center;gap:12px;min-width:0}.health-icon{width:43px;height:43px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}.health-icon svg{width:23px;height:23px;stroke:currentColor}.health-kicker{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:850}.health-state{display:block;margin-top:3px;font-size:15px;letter-spacing:-.02em}.health-state-wrap small{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}.health-dot{width:11px;height:11px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:#94a3b8;box-shadow:0 0 0 5px rgba(148,163,184,.12)}.health-dot.online{background:var(--ok);box-shadow:0 0 0 5px rgba(7,135,93,.12)}.health-dot.offline{background:var(--danger);box-shadow:0 0 0 5px rgba(201,54,54,.10)}.health-dot.unavailable{background:#d49324;box-shadow:0 0 0 5px rgba(212,147,36,.11)}.health-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.health-kpis>div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 12px;min-width:0}.health-kpis span{display:block;color:var(--muted);font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:850}.health-kpis strong{display:block;margin-top:5px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.health-chart-wrap{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px}.health-chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.health-chart-head>span{font-size:10px;font-weight:850}.health-legend{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:8px}.health-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px}.health-legend i.down{background:#2d67d2}.health-legend i.up{background:#7b61d9}.health-chart{display:block;width:100%;height:125px}.health-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;color:var(--muted);font-size:9px}.health-foot a{color:var(--brand);font-weight:850;text-decoration:none;white-space:nowrap}@media(max-width:520px){.health-kpis{grid-template-columns:1fr 1fr}.health-kpis>div:first-child{grid-column:1/-1}.health-chart{height:110px}.health-foot{align-items:flex-start;flex-direction:column;gap:6px}}

.front-complaint{margin:15px 0 8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}.add-complaint-btn{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;text-decoration:none;font-size:12px;font-weight:900;padding:12px 16px;border-radius:13px;white-space:nowrap}.front-complaint span{font-size:11px;color:var(--muted);font-weight:700}.service-alert{margin:10px 0 12px;padding:14px 15px;border-radius:16px;background:#fff7e7;border:1px solid #f3d79a;display:flex;justify-content:space-between;gap:12px;color:#704900}.service-alert strong{display:block;font-size:13px}.service-alert p{margin:4px 0;font-size:11.5px;line-height:1.45}.service-alert small{font-size:10.5px;font-weight:800}.service-alert>span{align-self:flex-start;background:#fff;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:850;white-space:nowrap}@media(max-width:560px){.front-complaint{align-items:stretch;flex-direction:column}.add-complaint-btn{text-align:center}.service-alert{flex-direction:column}}

/* SMARTOLT-CUSTOMER-FIBER-CSS-V1 */
.fiber-card{background:linear-gradient(145deg,#fff,#f8fbff);border:1px solid #dce6f4;border-radius:20px;padding:17px;box-shadow:var(--shadow-sm)}
.fiber-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.fiber-state-wrap{display:flex;align-items:center;gap:12px;min-width:0}.fiber-icon{width:43px;height:43px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:22px;font-weight:900}.fiber-state{display:block;margin-top:3px;font-size:15px;letter-spacing:-.02em}.fiber-state-wrap small{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}.fiber-dot{width:11px;height:11px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:#94a3b8;box-shadow:0 0 0 5px rgba(148,163,184,.12)}.fiber-dot.good,.fiber-dot.online{background:var(--ok);box-shadow:0 0 0 5px rgba(7,135,93,.12)}.fiber-dot.fair{background:#d49324;box-shadow:0 0 0 5px rgba(212,147,36,.11)}.fiber-dot.weak{background:#e67e22;box-shadow:0 0 0 5px rgba(230,126,34,.11)}.fiber-dot.critical,.fiber-dot.offline{background:var(--danger);box-shadow:0 0 0 5px rgba(201,54,54,.10)}.fiber-dot.unavailable,.fiber-dot.unknown,.fiber-dot.checking{background:#94a3b8;box-shadow:0 0 0 5px rgba(148,163,184,.12)}.fiber-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.fiber-kpis>div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 12px;min-width:0}.fiber-kpis span{display:block;color:var(--muted);font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:850}.fiber-kpis strong{display:block;margin-top:5px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.fiber-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;color:var(--muted);font-size:9px}.fiber-foot a{color:var(--brand);font-weight:850;text-decoration:none;white-space:nowrap}@media(max-width:520px){.fiber-kpis{grid-template-columns:1fr 1fr}.fiber-kpis>div:first-child{grid-column:1/-1}.fiber-foot{align-items:flex-start;flex-direction:column;gap:6px}}


/* PORTAL-LITE-SYSTEM-FONT-V1 */
html,body,button,input,select,textarea{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
}

/* PORTAL-LITE-ON-DEMAND-HEALTH-V1 */
.health-foot-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.health-refresh-btn{
    border:0;
    border-radius:9px;
    padding:8px 11px;
    background:#eef4ff;
    color:#2563eb;
    font:inherit;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.health-refresh-btn:disabled{
    opacity:.6;
    cursor:default;
}
@media(max-width:520px){
    .health-foot-actions{
        width:100%;
        justify-content:space-between;
    }
}

/* PORTAL-LITE-V2 */
.portal-lite-metrics .metric{
    min-width:0;
}
.portal-lite-metrics .metric strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.portal-lite-metrics .metric small{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(max-width:520px){
    .portal-lite-metrics{
        gap:7px;
    }
    .portal-lite-metrics .metric{
        padding:11px 9px;
    }
    .portal-lite-metrics .metric strong{
        font-size:12px;
    }
}

/* ==================================================
   NAYANET CUSTOMER APP — PROFESSIONAL LITE V1
   ================================================== */

:root{
    --app-blue:#175cd3;
    --app-blue-dark:#123b7a;
    --app-blue-soft:#eef4ff;
    --app-purple:#6941c6;
    --app-green:#067647;
    --app-red:#b42318;
    --app-amber:#b54708;

    --app-bg:#f5f7fb;
    --app-card:#ffffff;
    --app-text:#101828;
    --app-muted:#667085;
    --app-line:#e4e7ec;

    --app-radius:16px;
    --app-shadow:0 4px 16px rgba(16,24,40,.055);
}

html{
    background:var(--app-bg);
}

body.customer-app{
    background:var(--app-bg);
    color:var(--app-text);
    -webkit-font-smoothing:antialiased;
}

.app-shell{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding-bottom:92px;
}

/* ---------- TOP APP BAR ---------- */

.app-head{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 4px 12px;
}

.app-brand{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:14px;
    font-weight:850;
    color:var(--app-text);
}

.app-brand small{
    display:block;
    margin-top:2px;
    font-size:9.5px;
    line-height:1.3;
    font-weight:650;
    color:var(--app-muted);
}

.app-mark{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#175cd3,#3448c5);
    color:#fff;
    font-size:18px;
    font-weight:900;
    box-shadow:0 5px 12px rgba(23,92,211,.18);
}

/* ---------- PAGE TITLE ---------- */

.page-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:5px 0 17px;
}

.page-title h1{
    margin:0;
    font-size:21px;
    line-height:1.15;
    letter-spacing:-.035em;
    color:var(--app-text);
}

.page-title p{
    margin:4px 0 0;
    color:var(--app-muted);
    font-size:10.5px;
    line-height:1.45;
}

.back-btn{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--app-line);
    color:#344054;
    box-shadow:0 2px 5px rgba(16,24,40,.03);
}

.back-btn svg{
    width:18px;
    height:18px;
}

/* ---------- COMMON CARDS ---------- */

.cardx,
.form-card,
.bill-summary,
.metric,
.fiber-card{
    border-color:var(--app-line)!important;
    box-shadow:var(--app-shadow)!important;
}

.cardx{
    overflow:hidden;
    border-radius:var(--app-radius);
    background:var(--app-card);
}

.section{
    margin-top:19px;
}

.section-title{
    margin-bottom:9px;
}

.section-title h2{
    margin:0;
    font-size:13px;
    font-weight:850;
    letter-spacing:-.015em;
    color:#1d2939;
}

/* ---------- HERO ---------- */

.hero{
    border-radius:18px!important;
    box-shadow:0 8px 24px rgba(18,59,122,.12)!important;
}

.hero .amount{
    letter-spacing:-.045em;
}

/* ---------- LISTS ---------- */

.list-item{
    min-height:67px;
    padding:12px 14px;
    transition:background .15s ease;
}

.list-item:active{
    background:#f8fafc;
}

.list-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:11px;
}

.list-main{
    min-width:0;
}

.list-main strong{
    font-size:11.5px;
    line-height:1.35;
    color:#1d2939;
}

.list-main small{
    font-size:9.5px;
    line-height:1.45;
    color:var(--app-muted);
}

.list-side{
    flex:0 0 auto;
    text-align:right;
}

.list-side strong{
    font-size:11.5px;
}

/* ---------- BUTTONS / FORMS ---------- */

.btnx,
.auth-submit{
    min-height:44px;
    border-radius:11px!important;
    font-weight:850!important;
    box-shadow:none!important;
}

.fieldx label,
.auth-field label{
    font-size:10px;
    font-weight:800;
    color:#344054;
}

.fieldx input,
.fieldx select,
.fieldx textarea,
.auth-field input{
    border:1px solid #d0d5dd!important;
    border-radius:11px!important;
    background:#fff!important;
    box-shadow:none!important;
}

.fieldx input:focus,
.fieldx select:focus,
.fieldx textarea:focus,
.auth-field input:focus{
    border-color:#84adff!important;
    outline:3px solid #eef4ff!important;
}

/* ---------- STATUS BADGES ---------- */

.badge-x,
.status-pill{
    font-weight:800;
    letter-spacing:.01em;
}

/* ---------- BOTTOM NAV ---------- */

.bottom-nav{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:min(100%,760px);
    min-height:67px;
    padding:
        6px
        10px
        calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    border-top:1px solid #e4e7ec;
    box-shadow:0 -5px 20px rgba(16,24,40,.045);
    backdrop-filter:blur(12px);
    z-index:100;
}

.bottom-nav a{
    min-height:50px;
    border-radius:11px;
    color:#667085;
    font-size:9px;
    font-weight:750;
}

.bottom-nav a.active{
    color:var(--app-blue);
    background:var(--app-blue-soft);
}

.nav-ico{
    margin-bottom:2px;
}

.nav-ico svg{
    width:19px;
    height:19px;
}

/* ---------- AUTH / LOGIN ---------- */

.customer-auth{
    background:
        radial-gradient(circle at 50% -15%,#e7efff 0,transparent 42%),
        #f6f8fc;
}

.customer-auth .auth-card{
    border:1px solid var(--app-line);
    border-radius:22px;
    box-shadow:0 14px 45px rgba(16,24,40,.08);
}

.customer-auth .brand .mark{
    background:linear-gradient(145deg,#175cd3,#3448c5);
    box-shadow:0 6px 14px rgba(23,92,211,.20);
}

.customer-auth h1{
    letter-spacing:-.04em;
}

.secure-note{
    color:var(--app-muted);
}

/* ---------- EMPTY STATES ---------- */

.empty{
    padding:30px 18px!important;
    color:var(--app-muted);
}

.empty strong{
    color:#344054;
    margin-bottom:4px;
}

/* ---------- MOBILE ---------- */

@media(max-width:780px){
    .app-shell{
        padding-left:14px;
        padding-right:14px;
    }
}

@media(max-width:520px){
    .app-shell{
        padding-left:12px;
        padding-right:12px;
    }

    .app-head{
        min-height:57px;
    }

    .app-mark{
        width:35px;
        height:35px;
        border-radius:11px;
    }

    .page-title{
        margin-bottom:14px;
    }

    .page-title h1{
        font-size:19px;
    }

    .hero{
        border-radius:16px!important;
    }

    .section{
        margin-top:16px;
    }

    .list-item{
        padding:11px 12px;
    }
}

/* ==================================================
   HOME PROFESSIONAL V2
   ================================================== */

.portal-services{
    margin-top:18px;
}

.portal-services-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:10px;
}

.portal-services-title > div{
    min-width:0;
}

.portal-services-title small{
    display:block;
    margin-top:2px;
    color:#98a2b3;
    font-size:9.5px;
    font-weight:650;
}

.portal-service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.portal-service{
    min-width:0;
    min-height:112px;
    padding:13px 9px 11px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
    text-decoration:none;

    background:#fff;
    border:1px solid #e4e7ec;
    border-radius:15px;

    box-shadow:0 3px 12px rgba(16,24,40,.04);

    transition:
        transform .12s ease,
        border-color .12s ease,
        box-shadow .12s ease;
}

.portal-service:active{
    transform:scale(.98);
}

.portal-service-icon{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    margin-bottom:8px;
    border-radius:12px;
}

.portal-service-icon svg{
    width:20px;
    height:20px;
    stroke:currentColor;
}

.portal-service-icon.blue{
    background:#eef4ff;
    color:#175cd3;
}

.portal-service-icon.green{
    background:#ecfdf3;
    color:#067647;
}

.portal-service-icon.purple{
    background:#f4f3ff;
    color:#6941c6;
}

.portal-service-icon.amber{
    background:#fffaeb;
    color:#b54708;
}

.portal-service-icon.red{
    background:#fef3f2;
    color:#b42318;
}

.portal-service-icon.whatsapp{
    background:#ecfdf3;
    color:#079455;
}

.portal-service strong{
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#1d2939;
    font-size:10.8px;
    line-height:1.3;
    font-weight:850;
}

.portal-service small{
    display:block;
    width:100%;
    margin-top:3px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#98a2b3;
    font-size:8.7px;
    line-height:1.25;
    font-weight:650;
}

/* More polished customer greeting */
.hello{
    margin:3px 0 14px;
}

.hello h1{
    margin-bottom:3px;
    font-size:21px;
    line-height:1.15;
    letter-spacing:-.04em;
}

.hello p{
    margin:0;
    color:#667085;
    font-size:10px;
}

/* Compact account metrics */
.portal-lite-metrics{
    margin-top:10px;
}

.portal-lite-metrics .metric{
    border-radius:13px!important;
}

/* Keep diagnostic cards visually secondary */
.health-section,
.fiber-section{
    margin-top:18px;
}

/* Professional section rhythm */
#customerWallet{
    margin-top:18px;
}

#invoices{
    margin-top:18px;
}

@media(max-width:380px){
    .portal-service-grid{
        gap:7px;
    }

    .portal-service{
        min-height:104px;
        padding:11px 6px 9px;
    }

    .portal-service-icon{
        width:36px;
        height:36px;
    }

    .portal-service strong{
        font-size:10px;
    }

    .portal-service small{
        font-size:8px;
    }
}

/* CUSTOMER PACKAGE CHANGE SERVICE V1 */

.portal-service-icon.package{
    background:#eef4ff;
    color:#3538cd;
}

.package-change-service{
    position:relative;
}

.package-change-service .request-pending{
    color:#b54708;
    font-weight:800;
}

.package-change-service .request-overdue{
    color:#b42318;
    font-weight:850;
}

.package-change-service:has(.request-pending)::after,
.package-change-service:has(.request-overdue)::after{
    content:"";
    position:absolute;
    top:9px;
    right:9px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#f79009;
}

.package-change-service:has(.request-overdue)::after{
    background:#d92d20;
}