*{box-sizing:border-box}body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:linear-gradient(135deg,#f5f3ff,#eaf7ff 50%,#fff4ea);color:#2d3436;min-height:100vh}
.top .muted{margin-left:auto;color:#fff;opacity:.85;font-size:13px}

.side{position:fixed;top:60px;bottom:0;left:0;width:220px;background:#fff;padding:14px;box-shadow:2px 0 12px #0001;z-index:9;transition:.25s}.side a{display:block;padding:11px 14px;margin-bottom:6px;border-radius:10px;color:#2d3436;text-decoration:none;font-weight:500}.side a:hover{background:linear-gradient(90deg,#a29bfe33,#74b9ff33)}
main{margin:60px 0 0 220px;padding:20px}h2{color:#4834d4}
.card{background:#fff;border-radius:16px;padding:16px;margin-bottom:18px;box-shadow:0 4px 18px #6c5ce71a}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}.stat{border-radius:16px;padding:18px;color:#fff}.stat h3{margin:6px 0 0;font-size:26px}
.s0{background:linear-gradient(135deg,#6c5ce7,#a29bfe)}.s1{background:linear-gradient(135deg,#ff7675,#fab1a0)}.s2{background:linear-gradient(135deg,#00b894,#55efc4)}.s3{background:linear-gradient(135deg,#0984e3,#74b9ff)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
label{display:block;font-size:13px;margin:6px 0 4px;color:#636e72}input,select{width:100%;padding:10px;border:1px solid #dfe6e9;border-radius:10px;font-size:15px;background:#fff}input:focus,select:focus{outline:2px solid #a29bfe}
.btn{display:inline-block;background:linear-gradient(90deg,#6c5ce7,#0984e3);color:#fff;border:0;padding:11px 20px;border-radius:10px;cursor:pointer;font-size:15px;text-decoration:none}.btn.sm{padding:7px 12px;font-size:13px}.btn.red{background:linear-gradient(90deg,#ff7675,#d63031)}
.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px;text-align:left;border-bottom:1px solid #f1f2f6;white-space:nowrap}th{background:#f5f3ff;color:#4834d4}
.alert{background:#ffeaa7;padding:12px;border-radius:10px;margin-bottom:14px}.low{color:#d63031;font-weight:bold}.inl{display:flex;gap:6px}.muted{color:#636e72}
.irow{display:grid;grid-template-columns:1fr 100px 44px;gap:8px;margin-bottom:8px}.tot{text-align:right;margin-top:14px}
.loginbg{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#a29bfe,#74b9ff,#ffeaa7)}.login{width:92%;max-width:380px;padding:26px}.login .btn{width:100%;margin-top:16px}
@media(max-width:800px){.burger{display:block}.side{transform:translateX(-100%)}body.open .side{transform:none}main{margin-left:0;padding:14px}.irow{grid-template-columns:1fr 70px 40px}}
@media print{.adslider,.top,.side,.noprint,.alert{display:none!important}main{margin:0}body{background:#fff}}
.top .muted{display:none}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
.blogo{width:34px;height:34px;border-radius:10px;object-fit:cover;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.pmenu{margin-left:auto;position:relative}.avatar{width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:linear-gradient(135deg,#fd79a8,#fdcb6e);color:#fff;font-weight:700;font-size:17px;cursor:pointer;overflow:hidden;padding:0}.avatar img{width:100%;height:100%;object-fit:cover}
.dd{display:none;position:absolute;right:0;top:50px;width:235px;background:#fff;border-radius:14px;box-shadow:0 10px 30px #0003;overflow:hidden;color:#2d3436}.dd.show{display:block}.dd a{display:block;padding:12px 16px;color:#2d3436;text-decoration:none}.dd a:hover{background:#f5f3ff}.dd a.red{color:#d63031}.dd-h{padding:14px 16px;background:linear-gradient(135deg,#a29bfe33,#74b9ff33)}.dd-h small{display:block;color:#636e72}
.impbar{background:#2d3436;color:#ffeaa7;padding:9px 14px;border-radius:10px;margin-bottom:14px}.impbar a{color:#fff;margin-left:10px;font-weight:bold}
.hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,#6c5ce7,#0984e3 55%,#00cec9);color:#fff;border-radius:20px;padding:22px;margin-bottom:18px;box-shadow:0 8px 24px #6c5ce744}.hero h2{color:#fff;margin:2px 0}.hero img,.hero .hl{width:72px;height:72px;border-radius:18px;background:#fff;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:34px}.hero .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.hero .btn{background:#fff;color:#6c5ce7;font-weight:600}
.s4{background:linear-gradient(135deg,#e84393,#fd79a8)}.s5{background:linear-gradient(135deg,#e17055,#fdcb6e)}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.bars{display:flex;align-items:flex-end;gap:8px;height:170px}.bar{flex:1;text-align:center;font-size:11px;color:#636e72;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.bar i{display:block;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#6c5ce7,#74b9ff);min-height:3px;margin:2px 0}
.li{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px dashed #eee}.pill{background:#ffeaea;color:#d63031;padding:2px 10px;border-radius:20px;font-size:12px}
.bp{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.bp img{width:90px;height:90px;border-radius:18px;object-fit:cover;border:1px solid #eee}
@media(max-width:800px){.two{grid-template-columns:1fr}.hero .acts{margin-left:0}}

.top{position:fixed;top:0;left:0;right:0;height:60px;background:#fff;color:#2d3436;display:flex;align-items:center;gap:12px;padding:0 16px;z-index:10;box-shadow:0 2px 14px #6c5ce71f;border-bottom:1px solid #eee}
.burger{display:none;background:#f5f3ff;border:0;color:#6c5ce7;font-size:22px;width:40px;height:40px;border-radius:10px;cursor:pointer;flex:none}
.brand b{color:#2d3436}.avatar{border-color:#a29bfe;box-shadow:0 2px 8px #6c5ce744}.dd{top:52px}
.adslider{position:relative;overflow:hidden;border-radius:18px;margin-bottom:18px;box-shadow:0 6px 20px #6c5ce733}
.adtrack{display:flex;transition:transform .6s ease}
.ad{flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 26px 26px;min-height:135px;color:#fff;text-decoration:none;position:relative;overflow:hidden}
.ad:before{content:"";position:absolute;right:-40px;top:-50px;width:190px;height:190px;border-radius:50%;background:#ffffff22}
.adtxt{display:flex;flex-direction:column;gap:6px;z-index:1}.adtxt b{font-size:22px}.adtxt small{font-size:14px;opacity:.95}
.adtxt em{align-self:flex-start;font-style:normal;background:#fff;color:#2d3436;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;margin-top:4px}
.adico{font-size:60px;z-index:1}
.addots{position:absolute;bottom:8px;left:0;right:0;text-align:center}.addots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff8;margin:0 3px;cursor:pointer;transition:.3s}.addots i.on{background:#fff;width:22px;border-radius:6px}
@media(max-width:800px){.burger{display:block}}
@media(max-width:600px){.ad{padding:16px 16px 24px;min-height:140px}.adtxt b{font-size:17px}.adtxt small{font-size:12.5px}.adico{font-size:40px}.top{padding:0 10px}}

/* ===== v4: invoice rows, print A4, whatsapp ===== */
.irow{grid-template-columns:1fr 90px 110px 100px 44px;align-items:center}.irow b.ramt{text-align:right}.ihead{font-size:12px;color:#636e72;font-weight:600}
.payrow{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}.payrow label{margin:0}.payrow input{width:140px}
.btn.wa{background:linear-gradient(90deg,#25d366,#128c7e)}.stat small{display:block}
@media(max-width:800px){.irow{grid-template-columns:1fr 70px 90px;}.irow .ramt{grid-column:1/3}.ihead{display:none}}
@media print{.top,.side,.noprint,.impbar,.alert,.adslider,.burger{display:none!important}main{margin:0!important;padding:0!important}body{background:#fff!important}.card{box-shadow:none;padding:0}.scroll{overflow:visible}}

/* ===== v4 fix: invoice/statement alignment (th,td left override) ===== */
.invbox td[align=right],.invbox th[align=right]{text-align:right}
.invbox td[align=center],.invbox th[align=center]{text-align:center}
.invbox td[align=left],.invbox th[align=left]{text-align:left}
.invbox td{white-space:normal}
/* ===== v5: nav badge, scroll menu, statements page-break, reminders, recycle bin ===== */
.side{overflow-y:auto}.nbadge{display:inline-block;background:#d63031;color:#fff;border-radius:20px;padding:1px 8px;font-size:12px;margin-left:4px}
.stmtpg{margin-bottom:18px}@media print{.stmtpg{page-break-after:always;margin:0}.stmtpg:last-child{page-break-after:auto}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tabs a{padding:8px 14px;border-radius:20px;background:#fff;color:#2d3436;text-decoration:none;box-shadow:0 2px 8px #6c5ce71a;font-size:14px}.tabs a.on{background:linear-gradient(90deg,#6c5ce7,#0984e3);color:#fff}
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600}.tag.od{background:#ffeaea;color:#d63031}.tag.td{background:#fff3cd;color:#b7791f}.tag.pn{background:#eef2ff;color:#4834d4}.tag.ok{background:#e6fff3;color:#00875a}
.inl form{margin:0}.btn.gr{background:linear-gradient(90deg,#00b894,#00cec9)}.btn.gy{background:#b2bec3;color:#2d3436}

/* ===== v5.1: print me extra blank page fix ===== */
@media print{
 html,body{height:auto!important;min-height:0!important;margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important}
 main{margin:0!important;padding:0!important;min-height:0!important}
 .scroll{overflow:visible!important}
 .invbox{margin:0 auto!important;box-shadow:none!important}
 .invbox>p:last-child{margin:0!important}
 .noprint,.top,.side,.adslider,.impbar,.alert,.burger{display:none!important;height:0!important;margin:0!important;padding:0!important}
}

/* ===== v6: register / forgot popup ===== */
.login.wide{max-width:460px}.alinks{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:14px;flex-wrap:wrap}.alinks a{color:#6c5ce7;text-decoration:none;font-weight:600}
.modalbg{position:fixed;inset:0;background:rgba(20,16,50,.65);display:flex;align-items:center;justify-content:center;padding:16px;z-index:999}
.modal{background:#fff;border-radius:16px;max-width:430px;width:100%;padding:24px;box-shadow:0 20px 60px #0005;text-align:center}
.modal h2{margin:0 0 6px;color:#00875a}.modal .cred{background:#faf9ff;border:1px solid #e5e1ff;border-radius:10px;padding:10px 14px;margin:10px 0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal .cred small{display:block;color:#888}.modal .cred b{font-size:18px;letter-spacing:1px;word-break:break-all}.modal .cp{border:0;background:#eef2ff;color:#4834d4;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px}
.modal .note{font-size:13px;color:#555;margin:8px 0}.modal .warn{background:#fff3cd;color:#8a6d00;border-radius:8px;padding:8px;font-size:13px;margin:8px 0}
