:root{--ink:#172033;--muted:#64748b;--line:#dbe3ef;--panel:#fff;--bg:#f5f7fb;--accent:#0f766e;--blue:#2563eb;--danger:#b91c1c;--warn:#b45309;--ok:#047857}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}a{color:var(--blue);text-decoration:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:#152238;color:#fff;padding:22px;overflow:auto}.sidebar h1{font-size:21px;margin:0 0 22px}.sidebar nav{display:grid;gap:7px}.sidebar a{color:#dce7f5;padding:11px 12px;border-radius:8px}.sidebar a:hover{background:#223550}
.main{margin-left:248px;padding:26px}.main-auth{min-height:100vh;display:grid;place-items:center;padding:20px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.page-head p{margin:0 0 4px;color:var(--muted);font-weight:800;text-transform:uppercase;font-size:12px}.page-head h2{margin:0;font-size:30px;letter-spacing:0}
.button,button{border:0;background:var(--accent);color:#fff;padding:11px 15px;border-radius:8px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px}.button.secondary,button.secondary{background:#e8eef7;color:#172033}.button.danger,button.danger{background:var(--danger)}.button.blue{background:var(--blue)}button:disabled{opacity:.45;cursor:not-allowed}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.actions form{margin:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.stats article,.panel,.invoice-paper,.login-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.05)}.stats span{display:block;color:var(--muted);font-size:13px}.stats strong{font-size:27px}
.grid{display:grid;gap:14px}.two{grid-template-columns:minmax(280px,.6fr) 1fr}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.four{grid-template-columns:repeat(4,minmax(0,1fr))}.item-row{grid-template-columns:1fr 90px 130px 90px 50px}
table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-size:12px;text-transform:uppercase}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff}.badge{background:#e6f4f1;color:#0f766e;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;text-transform:capitalize}.badge.paid,.badge.sent{background:#dcfce7;color:#166534}.badge.overdue,.badge.failed{background:#fee2e2;color:#991b1b}.badge.draft,.badge.skipped{background:#f1f5f9;color:#475569}.badge.partial,.badge.partially_paid,.badge.pending{background:#fef3c7;color:#92400e}
.form{display:grid;gap:12px}.form h3,.panel h3{margin:0 0 8px}label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:800}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px;background:#fff;color:var(--ink)}textarea{min-height:88px}.check{display:flex;gap:9px;align-items:center;color:var(--ink);font-weight:700}.check input{width:auto}.hint{color:var(--muted);font-size:12px}.alert{padding:11px;border-radius:8px;background:#fee2e2;color:var(--danger)}.success{padding:11px;border-radius:8px;background:#dcfce7;color:#166534}.empty{color:var(--muted);padding:20px;text-align:center}
.login-card{width:min(440px,calc(100vw - 30px));display:grid;gap:14px}.login-card h1{margin:0}.invoice-paper{max-width:940px;margin:0 auto 18px}.invoice-top{display:flex;justify-content:space-between;border-bottom:2px solid var(--line);padding-bottom:18px;margin-bottom:18px}.invoice-top h2{margin:0;font-size:38px}.bill-to{margin-bottom:18px}.bill-to span{color:var(--muted);font-weight:800}.bill-to h3{margin:4px 0}.bill-to p{margin:3px 0;color:var(--muted)}.totals{max-width:340px;margin:18px 0 0 auto}.totals p{display:flex;justify-content:space-between;margin:8px 0}.totals .grand{font-size:20px;border-top:2px solid var(--line);padding-top:12px}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:12px;overflow:auto}.kanban-col{background:#eef3f8;border:1px solid var(--line);border-radius:8px;padding:10px;min-height:260px}.task-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;margin:10px 0}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.filters input,.filters select{max-width:230px}
@media (max-width:900px){.sidebar{position:static;width:auto}.main{margin-left:0;padding:16px}.stats,.two,.three,.four,.item-row{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.kanban{grid-template-columns:1fr}.invoice-top{display:grid;gap:12px}}
@media print{.no-print,.sidebar{display:none!important}.main{margin:0;padding:0;background:#fff}.invoice-paper{border:0;box-shadow:none;max-width:none}}
.front{background:#f6f8fb}.front-nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,72px);background:#fff;border-bottom:1px solid var(--line)}.front-nav strong{font-size:22px}.front-nav a{font-weight:800}.front-hero{min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.65fr);gap:36px;align-items:center;padding:clamp(28px,6vw,78px)}.front-hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;margin:0 0 18px;letter-spacing:0}.front-hero p{font-size:18px;line-height:1.7;color:var(--muted);max-width:760px}.eyebrow{font-size:12px!important;text-transform:uppercase;font-weight:900;color:var(--accent)!important;letter-spacing:0}.front-preview{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:0 24px 70px rgba(15,23,42,.12);display:grid;gap:12px}.mini-stat{background:#172033;color:#fff;border-radius:8px;padding:18px}.mini-stat span{display:block;color:#cbd5e1}.mini-stat strong{font-size:30px}.mini-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:8px;padding:13px}.front-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 clamp(18px,6vw,78px) 56px}.front-features article{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px}.front-features h3{margin:0 0 8px}.front-features p{color:var(--muted);line-height:1.6;margin:0}
@media(max-width:900px){.front-hero,.front-features{grid-template-columns:1fr}.front-hero{min-height:auto}.front-hero h1{font-size:38px}}

/* Smart Invoice System inspired admin theme */
.sis-app{background:#eef1f5;color:#263238;font-family:"Open Sans","Segoe UI",Arial,sans-serif}
.sis-app .sidebar{display:none}
.sis-navbar{position:fixed;z-index:50;top:0;left:0;right:0;height:56px;background:#1f2b3a;color:#fff;display:flex;align-items:center;padding:0 18px;box-shadow:0 1px 4px rgba(0,0,0,.24)}
.sis-brand{height:56px;display:flex;align-items:center;gap:10px;color:#fff!important;min-width:230px}.sis-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:4px;background:#3a4657;font-size:12px;font-weight:900}.sis-brand strong{font-size:17px}
.sis-menu{display:flex;align-items:center;height:56px;gap:2px;flex:1}.sis-menu>a,.sis-dropdown>a,.sis-user>a{color:#dce3ec!important;padding:19px 12px 18px;display:block;font-size:13px}.sis-menu>a:hover,.sis-dropdown:hover>a,.sis-user>a:hover{background:#2d3b4d;color:#fff!important}
.sis-dropdown{position:relative;height:56px}.sis-dropdown-menu{display:none;position:absolute;top:56px;left:0;min-width:210px;background:#fff;border:1px solid #d8dee8;box-shadow:0 8px 24px rgba(15,23,42,.18);padding:6px 0}.sis-dropdown:hover .sis-dropdown-menu{display:block}.sis-dropdown-menu a{display:block;color:#263238!important;padding:9px 14px;font-size:13px}.sis-dropdown-menu a:hover{background:#f3f6fa}
.sis-user{margin-left:auto}.sis-app .main{margin:0;padding:76px 18px 28px}.sis-app .page-head{background:#fff;border:1px solid #d8dee8;border-radius:0;min-height:66px;margin:-2px 0 16px;padding:0 15px;box-shadow:0 1px 2px rgba(15,23,42,.05)}.sis-app .page-head.pos-sticky{position:sticky;top:56px;z-index:20}.sis-app .page-head p{font-size:12px;color:#8b98a7;text-transform:none;margin:0}.sis-app .page-head h2{font-size:22px;font-weight:500;color:#263238;margin:3px 0 0}.sis-title-actions{display:flex;align-items:center;gap:6px;min-height:64px}.btn-link-icon{border:0;background:transparent!important;color:#607080!important;display:grid;place-items:center;gap:0;padding:6px 10px;text-align:center;text-decoration:none!important;min-width:54px}.btn-link-icon span{font-size:24px;line-height:22px;font-weight:700}.btn-link-icon small{font-size:11px}.btn-link-icon.success span{color:#2e9f58}.btn-link-icon:hover{background:#f4f6f9!important;color:#263238!important}
.sis-app .panel,.sis-app .sis-card,.sis-app .table-wrap{background:#fff;border:1px solid #d8dee8;border-radius:0;box-shadow:0 1px 2px rgba(15,23,42,.05);padding:16px}.sis-app .panel h3{font-size:16px;font-weight:600;margin:0 0 14px;color:#344054}.sis-app .form{gap:14px}.sis-form label:not(.check){grid-template-columns:160px minmax(0,1fr);align-items:center;color:#52606d;font-size:13px;font-weight:600}.sis-form label:not(.check) input,.sis-form label:not(.check) select,.sis-form label:not(.check) textarea{grid-column:2}.sis-app input,.sis-app select,.sis-app textarea{border-radius:2px;border:1px solid #cfd7e3;min-height:34px;padding:7px 9px;font-size:13px}.sis-app textarea{min-height:82px}.sis-app .check{font-size:13px;color:#344054}.sis-app .button,.sis-app button{border-radius:2px;min-height:34px;padding:8px 12px;font-size:13px;background:#3f8ed8}.sis-app .button.secondary,.sis-app button.secondary{background:#f8fafc;color:#344054;border:1px solid #cfd7e3}.sis-app .button.blue,.sis-app button.blue{background:#337ab7}
.sis-app table{font-size:13px}.sis-app th{background:#f7f9fb;color:#667085;border-bottom:1px solid #d8dee8;padding:9px 10px}.sis-app td{padding:9px 10px;border-bottom:1px solid #e5ebf2}.sis-app tr:hover td{background:#fbfcfe}.sis-app .badge{border-radius:2px;text-transform:uppercase;padding:4px 7px;font-size:11px}.pure-checkbox{width:28px;text-align:center}.pure-checkbox input{width:14px;height:14px;min-height:0}.sis-bottom-actions{border-top:1px solid #d8dee8;padding-top:14px}.sis-app .grid.two{gap:16px}.sis-app .stats article{border-radius:0}
@media(max-width:900px){.sis-navbar{position:static;height:auto;align-items:flex-start;flex-wrap:wrap;padding:10px}.sis-brand{height:auto;min-width:100%}.sis-menu{height:auto;flex-wrap:wrap}.sis-dropdown{height:auto}.sis-menu>a,.sis-dropdown>a,.sis-user>a{padding:9px}.sis-dropdown-menu{position:static;box-shadow:none}.sis-app .main{padding:14px}.sis-app .page-head.pos-sticky{top:0}.sis-form label:not(.check){grid-template-columns:1fr}.sis-form label:not(.check) input,.sis-form label:not(.check) select,.sis-form label:not(.check) textarea{grid-column:1}}
.invoice-builder{padding:0!important}.sis-section{border-bottom:1px solid #d8dee8;padding:18px}.sis-section:last-child{border-bottom:0}.sis-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.sis-section-head h3{margin:0!important;font-size:17px!important;color:#263238}.sis-section-head span{color:#8b98a7;font-size:12px}.sis-fields{display:grid;gap:12px}.sis-fields.two-col{grid-template-columns:1fr 1fr}.sis-fields label.wide{grid-column:1/-1}.quick-customer{margin-top:14px;border:1px dashed #b8c4d2;background:#fbfcfe;padding:14px}.quick-customer h4{margin:0 0 12px;font-size:14px;color:#344054}.invoice-items-table{border:1px solid #d8dee8}.invoice-items-head,.invoice-item-row{display:grid;grid-template-columns:minmax(260px,1fr) 90px 150px 110px;gap:0}.invoice-items-head span{background:#f7f9fb;color:#667085;border-bottom:1px solid #d8dee8;padding:9px 10px;font-size:12px;font-weight:700;text-transform:uppercase}.invoice-item-row{border-bottom:1px solid #e5ebf2}.invoice-item-row:last-child{border-bottom:0}.invoice-item-row input,.invoice-item-row select{border:0!important;border-right:1px solid #e5ebf2!important;border-radius:0!important}.invoice-item-row select{border-right:0!important}.sis-form .sis-section label:not(.check){grid-template-columns:150px minmax(0,1fr)}.sis-form .sis-fields.two-col label:not(.check){grid-template-columns:135px minmax(0,1fr)}
@media(max-width:900px){.sis-fields.two-col{grid-template-columns:1fr}.invoice-items-head{display:none}.invoice-item-row{grid-template-columns:1fr}.invoice-item-row input,.invoice-item-row select{border-right:0!important;border-bottom:1px solid #e5ebf2!important}.sis-form .sis-section label:not(.check),.sis-form .sis-fields.two-col label:not(.check){grid-template-columns:1fr}}