*{box-sizing:border-box} :root{--blue:#2458c6;--deep:#183d8d;--ink:#1b2434;--muted:#78859a;--line:#e5eaf2;--bg:#f5f7fb;--white:#fff;--shadow:0 8px 28px #19315b0b}body{margin:0;background:var(--bg);color:var(--ink);font:13px Poppins,Arial,sans-serif}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:white;border-right:1px solid var(--line);padding:20px 15px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:10px;padding:3px 7px 26px;font-weight:600;font-size:15px}.brand b,.wordmark b{color:var(--blue)}.brand small{display:block;font-size:9px;letter-spacing:1.5px;color:#98a2b2;margin-top:4px}.monogram{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#3670dc,#1a4299);display:grid;place-items:center;color:white;font-weight:700;box-shadow:0 7px 16px #2458c624}.monogram.sm{width:38px;height:38px;font-size:12px;border-radius:11px}.nav-label{padding:0 12px 12px;color:#9ca6b5;letter-spacing:1.5px;font-size:10px}.sidebar nav{display:grid;gap:5px}.nav-link{padding:12px;border-radius:9px;display:flex;align-items:center;gap:12px;color:#69758a;font-weight:500}.nav-link i{width:20px;text-align:center;font-size:18px;font-style:normal}.nav-link.active,.nav-link:hover{background:#edf3ff;color:var(--blue)}.side-bottom{margin-top:auto;display:grid;gap:5px;padding:10px 4px;color:#526078;font-size:11px}.side-bottom>small{color:var(--muted)}.help{background:#f5f7fc;border:1px solid #edf0f6;padding:12px;border-radius:10px;margin-bottom:12px}.help p{color:var(--muted);line-height:1.7;margin:6px 0 0;font-size:10px}.logout{padding-top:10px;color:var(--blue)}.main{margin-left:248px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:68px;background:#fffffff2;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:10}.topbar em{font-style:normal;color:#bcc4d0;padding:0 8px}.topbar b{font-weight:600}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eaf0ff;color:var(--blue);font-weight:700}.menu{display:none}.content{padding:30px;max-width:1600px;width:100%;margin:auto;flex:1}.heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.heading h1{font-size:26px;letter-spacing:-.8px;margin:8px 0 6px;font-weight:600}.heading p,.panel>p,.panel-title p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}.blue{color:var(--blue);font-size:10px;letter-spacing:1.5px;font-weight:600}.btn{border:1px solid transparent;border-radius:8px;padding:11px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600;white-space:nowrap}.btn.primary{background:var(--blue);color:white;box-shadow:0 5px 12px #2458c622}.btn.primary:hover{background:var(--deep)}.btn.secondary{background:white;border-color:#dfe5ef;color:#4b5870}.btn.full{width:100%;margin-top:16px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.stat,.panel{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.stat{padding:19px}.stat>div{display:flex;justify-content:space-between;align-items:center;color:#748096}.stat i{font-style:normal;background:#edf3ff;color:var(--blue);border-radius:9px;width:34px;height:34px;display:grid;place-items:center;font-size:17px}.stat strong{display:block;font-size:25px;letter-spacing:-.6px;margin:12px 0 5px}.stat small{color:#9aa4b4;font-size:10px}.columns{display:grid;grid-template-columns:1.1fr .9fr;gap:17px}.panel{padding:21px;margin-bottom:18px;min-width:0}.panel h2{font-size:15px;margin:0 0 6px}.quick{display:flex;flex-direction:column;gap:4px;border-top:1px solid #eef1f6;padding:15px 0;color:var(--blue);text-align:right}.quick:first-of-type{margin-top:12px}.quick b,.quick small{text-align:left}.quick b{font-size:12px;color:#27344a}.quick small{font-size:10px;color:var(--muted)}.setup{padding-left:20px;line-height:2.2;color:#64728a;font-size:11px}.setup code,.safety code{background:#edf3ff;color:var(--blue);padding:2px 5px;border-radius:4px}.safety{background:#f9fbff;border-color:#dfe8fa}.safety p{color:#69768c;line-height:1.8;margin:7px 0 0;font-size:11px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.pill{background:#f0f3f8;color:#68758a;border-radius:6px;padding:5px 8px;font-size:10px}.table-wrap{overflow:auto;width:100%;border:1px solid #edf0f5;border-radius:9px}table{width:100%;border-collapse:collapse;min-width:760px;font-size:11px}th,td{padding:12px 13px;border-bottom:1px solid #edf0f5;text-align:left;white-space:nowrap}th{background:#f7f9fc;color:#778398;font-size:10px;font-weight:600}td{color:#4c5970}td b{color:#26344a}tbody tr:last-child td{border-bottom:0}.empty{text-align:center!important;padding:45px 12px;color:#8b96a8}.empty small{display:block;margin:7px}.text-link{color:var(--blue);font-weight:600}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.form-grid label,form label{display:block;font-size:11px;font-weight:600;color:#48556c;margin-bottom:7px}.form-grid input,.form-grid select,.login-form input,.invoice-table input,.invoice-table select,.setup-form input{width:100%;height:41px;border:1px solid #dfe5ee;border-radius:8px;padding:0 10px;background:white;color:#25334a;outline:none}.form-grid input:focus,.form-grid select:focus,input:focus,select:focus{border-color:#8caaf0;box-shadow:0 0 0 3px #2458c614}.invoice-table{min-width:940px}.invoice-table select{min-width:170px}.invoice-table input{min-width:80px;height:35px}.invoice-table td{padding:8px}.batch{min-width:135px;color:#758198;font-size:10px}.remove{border:0;border-radius:7px;background:#fff0f0;color:#c34343;width:28px;height:28px;font-size:18px}.totals{width:min(330px,100%);margin:20px 0 0 auto;display:grid;gap:11px;color:#758096;font-size:11px}.totals>div{display:flex;justify-content:space-between}.totals b{color:#344057}.totals .grand{border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:#1c2a40}.totals .grand b{color:var(--blue);font-size:19px}.notice{background:#fffaf0;border:1px solid #f4e7c8;color:#87672c;border-radius:8px;padding:11px 12px;font-size:10px;line-height:1.8;margin-top:16px}.actions{display:flex;justify-content:flex-end;margin:0 0 22px}.alert{padding:12px;border-radius:8px;margin-bottom:16px;font-size:12px}.alert.error{background:#fff0f0;color:#a33a3a;border:1px solid #f5d6d6}.alert.success{background:#eaf8f0;color:#197346}footer{padding:16px 30px;border-top:1px solid var(--line);font-size:10px;color:#98a2b2}footer span{float:right}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 12% 8%,#e4ecff,transparent 38%),#f5f7fb}.login-box{width:min(930px,100%);min-height:550px;display:grid;grid-template-columns:1fr .9fr;background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 25px 90px #253e701b}.login-art{padding:50px;background:linear-gradient(145deg,#173b87,#2458c6 70%,#4d7ddd);color:white;display:flex;flex-direction:column;align-items:flex-start}.login-art .monogram{background:#ffffff1b;border:1px solid #ffffff4d;margin-bottom:40px}.login-art small{font-size:10px;letter-spacing:1.5px;color:#d1deff}.login-art h1{font-size:36px;line-height:1.3;margin:15px 0}.login-art h1 span{color:#cad9ff}.login-art p{font-size:12px;line-height:1.9;color:#dce6ff;max-width:300px}.login-form{padding:48px 42px;display:flex;flex-direction:column;justify-content:center}.wordmark{font-size:19px;font-weight:600;margin-bottom:38px}.login-form h2{font-size:26px;margin:10px 0 8px}.login-form>p{color:var(--muted);font-size:12px;margin:0 0 20px}.login-form label{margin:15px 0 7px}.login-form input{height:45px}.fine{margin-top:24px;text-align:center;color:#9aa4b4;font-size:10px}.setup-form{width:min(460px,100%);padding:30px;background:white;border:1px solid var(--line);border-radius:16px}.setup-form p{font-size:12px;color:var(--muted);line-height:1.7}.setup-form input{margin-bottom:12px}.mobile-nav{display:none}.print-page{background:#e9edf4;padding:22px}.print-actions{max-width:1120px;margin:0 auto 15px;display:flex;gap:8px;justify-content:flex-end}.paper{max-width:1120px;background:white;margin:auto;padding:32px;box-shadow:0 8px 35px #1d2e4c15}.paper header{display:flex;justify-content:space-between;border-bottom:2px solid var(--blue);padding-bottom:16px}.paper header p{font-size:10px;color:#69758a}.paper .wordmark{margin:0;font-size:22px}.paper .right{text-align:right}.paper h1{font-size:20px;color:var(--blue);margin:0 0 8px}.billto{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px 0}.billto small{font-size:9px;letter-spacing:1.3px;color:#7c899e}.billto h3{font-size:12px}.billto p{font-size:10px;color:#68758a;margin:4px 0}.paper .table-wrap{border:0}.paper table{min-width:0;font-size:8px}.paper th,.paper td{padding:7px 5px}.paper-totals{width:min(320px,100%);margin:18px 0 18px auto}.paper-totals p,.paper-totals h2{display:flex;justify-content:space-between;font-size:11px}.paper-totals p{color:#657188}.paper-totals h2{font-size:14px;color:var(--blue);border-top:1px solid var(--line);padding-top:12px}.paper .notice{margin-top:16px}.paper footer{padding:20px 0 0;border:0}.mobile-nav{display:none}@media(max-width:1050px){.sidebar{width:220px}.main{margin-left:220px}.content{padding:24px 20px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.columns{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{transform:translateX(-100%);transition:.2s;width:270px;box-shadow:10px 0 30px #1233}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.topbar{height:58px;padding:0 14px}.menu{display:block;border:0;background:transparent;font-size:20px;margin-right:10px}.topbar>span:first-of-type{margin-right:auto;font-size:11px}.content{padding:22px 13px 92px}.heading{align-items:flex-start;flex-direction:column}.heading h1{font-size:23px}.stats{gap:9px}.stat{padding:13px}.stat strong{font-size:21px}.stat i{width:29px;height:29px}.panel{padding:15px;border-radius:12px}.form-grid{grid-template-columns:1fr}.actions{position:sticky;bottom:68px;background:#f5f7fb;padding:10px 0;z-index:5}.actions .btn{width:100%}.mobile-nav{display:flex;position:fixed;inset:auto 0 0;height:62px;background:white;border-top:1px solid var(--line);justify-content:space-around;align-items:center;z-index:15}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#78859b;font-size:19px}.mobile-nav small{font-size:9px}.login-box{grid-template-columns:1fr;min-height:0}.login-art{display:none}.login-form{padding:32px 25px}.wordmark{margin-bottom:28px}.print-page{padding:0}.print-actions{padding:10px;position:sticky;top:0;background:#e9edf4;z-index:5}.paper{padding:14px;box-shadow:none}.paper header{gap:8px}.paper .wordmark{font-size:16px}.paper h1{font-size:15px}.billto{gap:10px}.paper table{font-size:7px}.paper th,.paper td{padding:5px 3px}footer{padding:14px}footer span{float:none;display:block;margin-top:5px}}@media print{@page{size:A4 landscape;margin:9mm}.print-page{padding:0;background:white}.print-actions{display:none}.paper{max-width:none;padding:0;box-shadow:none}.paper table{font-size:8px}.paper th,.paper td{padding:6px 4px}.paper header{padding-bottom:10px}.billto{padding:10px 0}}
/* App settings and install experience */
:root{--accent:#e879a9}.install-top{display:none;border:1px solid #d8e3fa;background:#edf3ff;color:var(--blue);border-radius:8px;padding:8px 10px;font-weight:600;font-size:11px}.install-top.available{display:inline-flex}.settings-form{max-width:1000px}.settings-section{padding:4px 0 24px;margin-bottom:22px;border-bottom:1px solid var(--line)}.settings-section h2{font-size:16px;margin:0 0 5px}.settings-section>p{font-size:11px;color:var(--muted);line-height:1.7;margin:0 0 14px}.colour-input{display:flex;align-items:center;gap:10px}.colour-input input[type=color]{width:52px;height:38px;padding:3px;border:1px solid var(--line);border-radius:8px;background:white}.colour-input code{font-size:11px;color:var(--muted)}.preview-panel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:20px}.preview-panel>span{font-weight:600;margin-right:auto}.preview-button{border:0;border-radius:8px;padding:10px 13px;color:white;font-weight:600}.preview-card{padding:11px 14px;border:1px solid var(--line);border-radius:9px;background:white}.current-logo{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;margin-top:16px}.current-logo img{max-width:160px;max-height:60px;object-fit:contain}.check-row{display:flex!important;align-items:center;gap:10px;font-size:12px!important;margin:12px 0!important}.check-row input{width:17px;height:17px;accent-color:var(--blue)}.install-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.muted{font-size:10px;color:var(--muted);line-height:1.7}.settings-save{display:flex;justify-content:flex-end}.install-modal{display:none;position:fixed;inset:0;background:#101a2bbd;z-index:100;align-items:center;justify-content:center;padding:20px}.install-modal.show{display:flex}.install-card{position:relative;width:min(390px,100%);background:white;color:#1b2434;border-radius:20px;padding:28px;box-shadow:0 25px 80px #0004;text-align:center}.install-card h2{font-size:21px;margin:13px 0 8px}.install-card p{font-size:12px;color:#69758a;line-height:1.8}.install-icon{width:64px;height:64px;border-radius:17px;margin:auto;background:linear-gradient(145deg,#3670dc,#1a4299);display:grid;place-items:center;color:white;font-size:19px;font-weight:700}.install-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#78859a;font-size:25px}.install-help{font-size:10px!important;margin-top:12px!important}.brand-logo{display:block}.mobile-nav a:last-child{display:flex}@media(max-width:700px){.install-top{display:inline-flex;margin-left:auto;margin-right:8px;padding:7px 8px;font-size:10px}.topbar>span:first-of-type{margin-right:8px}.topbar .avatar{flex-shrink:0}.settings-save .btn{width:100%}.preview-panel{align-items:flex-start;flex-direction:column}.install-card{padding:26px 22px}}
.login-logo{max-width:180px;max-height:85px;object-fit:contain;margin-bottom:40px}.sidebar .nav-link.active,.sidebar .nav-link:hover{background:color-mix(in srgb,var(--blue) 10%,white);color:var(--blue)}.btn.primary{background:var(--blue)}

/* Install modal: desktop and mobile responsive layout */
.install-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,36px);overflow-y:auto;overscroll-behavior:contain;background:rgba(12,22,42,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.install-modal.show{display:flex}
.install-card{width:min(440px,calc(100vw - 32px));max-width:100%;max-height:calc(100dvh - 32px);overflow-y:auto;position:relative;margin:auto;padding:clamp(22px,4vw,34px);border:1px solid rgba(255,255,255,.75);border-radius:22px;background:#fff;color:#1b2434;box-shadow:0 28px 90px rgba(0,0,0,.28);text-align:center;animation:installModalIn .18s ease-out}
.install-card h2{font-size:clamp(19px,2vw,23px);line-height:1.35;margin:15px 0 8px;overflow-wrap:anywhere}
.install-card p{font-size:13px;line-height:1.7;margin:8px 0;color:#69758a}
.install-card .install-icon{width:66px;height:66px;flex-shrink:0}
.install-card .btn.full{min-height:46px;margin-top:16px}
.install-close{width:36px;height:36px;display:grid;place-items:center;right:10px;top:10px;border-radius:10px;font-size:26px;line-height:1}
.install-close:hover{background:#f0f3f8;color:#1b2434}
@keyframes installModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){.install-modal{align-items:center;padding:16px}.install-card{width:min(420px,100%);max-height:calc(100dvh - 32px);padding:25px 20px;border-radius:18px}.install-card h2{font-size:20px}.install-card p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.install-card{animation:none}}

/* Desktop installation is available only from Settings; header shortcut is mobile-only. */
.install-top,.install-top.available{display:none!important}
@media(max-width:700px){.install-top.available{display:inline-flex!important}}
/* Billing register filters and compact mobile controls */
.register-filters{display:grid;grid-template-columns:minmax(220px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto auto;gap:12px;align-items:end;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.register-filters label{display:block;font-size:11px;font-weight:600;color:#48556c;margin-bottom:7px}
.register-filters input{width:100%;height:41px;border:1px solid #dfe5ee;border-radius:8px;padding:0 10px;background:white;color:#25334a;min-width:0}
.register-filters .btn{height:41px}
@media(max-width:900px){.register-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.register-filters>div:first-of-type{grid-column:1/-1}}
@media(max-width:700px){.register-filters{grid-template-columns:1fr 1fr;gap:10px}.register-filters>div:first-of-type{grid-column:1/-1}.register-filters .btn{width:100%;padding:10px 8px}.invoice-table{min-width:900px}.panel-title{align-items:flex-start}.paper{overflow:hidden}.paper .table-wrap{overflow:visible}.paper table{table-layout:fixed;width:100%;word-break:break-word}.paper th,.paper td{white-space:normal;overflow-wrap:anywhere}.paper th:nth-child(2),.paper td:nth-child(2){width:19%}.paper th:nth-child(3),.paper td:nth-child(3),.paper th:nth-child(4),.paper td:nth-child(4){width:8%}}
@media print{.register-filters{display:none}}