*{box-sizing:border-box}
body{margin:0;background:#f4f7fb;color:#13223b;font:15px Arial,sans-serif}
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:#0b284f;color:#d6e4f5;padding:28px 20px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:18px;margin:0 8px 38px}
.brand b{background:#2279eb;border-radius:12px;padding:12px}
.brand span{display:block;color:#69b3ff;font-size:13px}
.sidebar nav{display:grid;gap:7px}
.sidebar nav a{color:#aabdd3;text-decoration:none;padding:13px;border-radius:10px}
.sidebar nav a.active,.sidebar nav a:hover{background:#173d6a;color:#fff}
.side-total{margin-top:auto;border:1px solid #244a76;background:#102f55;border-radius:13px;padding:16px}
.side-total small{font-size:10px;color:#77a9df}
.side-total strong{display:block;color:#fff;font-size:20px;margin:8px 0}
.side-total span{color:#93aac4;font-size:12px}
main{margin-left:240px;padding:34px 42px;max-width:1500px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
header small{color:#78879a;letter-spacing:1px}
h1{font-size:28px;margin:8px 0}
header p,p{color:#718096;margin:6px 0}
.primary{border:0;background:#1769e0;color:#fff;border-radius:10px;padding:13px 18px;cursor:pointer;box-shadow:0 8px 22px #1769e02b}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:18px}
.metrics>div,.panel{background:#fff;border:1px solid #e3eaf2;border-radius:16px;box-shadow:0 5px 22px #19395d08}
.metrics>div{display:flex;gap:14px;padding:19px}
.metrics i{font-style:normal;border-radius:13px;padding:14px;font-size:21px;height:48px}
.blue{background:#e7f1ff;color:#1769e0}
.amber{background:#fff2db;color:#d78308}
.green{background:#e4f8ed;color:#199257}
.metrics span{color:#748399}
.metrics strong{display:block;color:#13223b;font-size:20px;margin:5px 0}
.metrics small{font-size:12px}
.charts{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:18px}
.panel{padding:20px}
.panel h2{font-size:16px;margin:0}
.panel>p{font-size:12px}
.bar{display:grid;grid-template-columns:140px 1fr 90px;gap:10px;align-items:center;margin-top:14px;font-size:12px}
.bar div{height:9px;background:#edf3fa;border-radius:8px}
.bar i{display:block;height:100%;background:#2477e7;border-radius:8px}
.bar b{text-align:right;font-weight:normal}
.donut{width:125px;height:125px;border-radius:50%;background:conic-gradient(#f2a12b 0 70%,#24a36a 70%);display:grid;place-items:center;margin:13px auto;border:18px solid #fff;outline:1px solid #edf1f5}
.donut div{background:#fff;width:75px;height:75px;border-radius:50%;display:grid;place-items:center}
.donut strong{font-size:20px}
.donut small{color:#8291a2}
.legend{display:flex;justify-content:center;gap:20px;font-size:12px}
.legend span{display:flex;gap:5px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%}
.bills{padding:0}
.panel-head{padding:20px 22px;border-bottom:1px solid #edf1f5;display:flex;justify-content:space-between}
.panel-head input{border:1px solid #dfe6ef;border-radius:9px;padding:9px 12px}
.bill{display:grid;grid-template-columns:32px 1fr 80px 105px;gap:10px;align-items:center;padding:17px 22px;border-bottom:1px solid #edf1f5}
.check{width:24px;height:24px;border:1px solid #cbd6e2;border-radius:8px;background:#fff;color:#fff}
.check.paid{background:#26a768;border-color:#26a768}
.bill small,.bill time{color:#8795a6;font-size:12px;display:block;margin-top:4px}
.bill-amount{text-align:right}
.bill-amount em{display:inline-block;font-style:normal;font-size:11px;padding:3px 7px;border-radius:15px;margin-top:4px}
.bill-amount em.pending{background:#fff2dc;color:#bd6d00}
.bill-amount em.paid{background:#e5f8ed;color:#13834b}
.modal{display:none;position:fixed;inset:0;background:#061a3180;align-items:center;justify-content:center;padding:15px}
.modal.show{display:flex}
.modal-card{background:#fff;width:560px;max-width:100%;border-radius:18px;padding:25px;position:relative}
.close{position:absolute;right:17px;top:13px;border:0;background:none;font-size:25px}
.modal-card input[type=file]{display:none}
.drop{border:1.5px dashed #aac3df;background:#f7fbff;border-radius:13px;height:120px;display:grid;place-items:center;text-align:center;padding:15px;margin:16px 0;cursor:pointer}
.drop span{font-size:27px;color:#1769e0}
.drop small{color:#718096}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid label{font-size:12px;color:#485c73}
.grid .wide{grid-column:1/-1}
.grid input{display:block;width:100%;margin-top:5px;height:40px;border:1px solid #d9e2ee;border-radius:8px;padding:9px}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.actions>button:first-child{border:1px solid #d9e2ee;background:#fff;padding:11px;border-radius:8px}
.notice{background:#e5f8ed;color:#137d49;padding:11px;border-radius:8px;margin:15px 0}
.install{display:grid;place-items:center;min-height:100vh}
.install-card{background:#fff;border:1px solid #e3eaf2;border-radius:18px;padding:30px;width:430px;max-width:calc(100% - 30px)}
.install-card h1{font-size:23px}
.install-card form{display:grid;gap:13px}
.install-card label{font-size:13px}
.install-card input{display:block;width:100%;height:42px;border:1px solid #d9e2ee;border-radius:8px;margin-top:5px;padding:9px}
.install-card button{border:0;background:#1769e0;color:#fff;border-radius:9px;padding:13px;font-weight:bold}
.install-card small{display:block;color:#718096;margin-top:17px}
@media(max-width:900px){.sidebar{width:76px;padding:20px 10px}
.brand strong,.sidebar nav a{font-size:0}
.brand{margin:0 0 30px}
.sidebar nav a{text-align:center}
.side-total{display:none}
main{margin-left:76px;padding:25px 18px}
.charts{grid-template-columns:1fr}
.metrics{gap:10px}
.metrics>div{padding:13px}
.metrics>div:nth-child(3){display:none}
}
@media(max-width:600px){.sidebar{inset:auto 0 0;width:100%;height:62px;display:block;padding:6px 15px;z-index:3}
.sidebar nav{display:flex;justify-content:space-around}
.sidebar nav a{font-size:0;padding:10px}
.sidebar nav a:before{font-size:20px;content:'▦'}
.brand{display:none}
main{margin:0;padding:22px 15px 88px}
header{align-items:flex-start}
header h1{font-size:22px}
.primary{display:none}
.metrics{grid-template-columns:1fr 1fr}
.bill{grid-template-columns:30px 1fr 88px;padding:15px}
.bill time{display:none}
.grid{grid-template-columns:1fr}
.grid .wide{grid-column:1}
.bar{grid-template-columns:100px 1fr 75px;font-size:11px}
}
.row-actions{display:flex;gap:5px;grid-column:2/-1;justify-content:flex-end;margin-top:-8px}.row-actions button{border:0;background:#eef4fc;color:#1769e0;border-radius:6px;padding:5px 8px;font-size:11px;cursor:pointer}.row-actions button:last-child{color:#c53d48;background:#fff0f1}
.bill.overdue{background:linear-gradient(90deg,#fff8f8,#fff)}.bill.overdue .bill-amount>b{color:#d53b4a}.bill.overdue .bill-amount em.pending{background:#ffe6e8;color:#c23140}
.overdue-alert{margin-left:auto;margin-right:18px;background:#fff0f1;border:1px solid #ffd7da;border-radius:10px;padding:9px 13px;color:#c23140;font-size:12px}.overdue-alert strong{display:block}.overdue-alert span{display:block;margin-top:3px;color:#d53b4a}
.filter-wrap{display:flex;align-items:center;gap:8px}.filter-wrap select{border:1px solid #dfe6ef;border-radius:8px;padding:8px;color:#52677f;background:#fff}.today-button{border:0;background:#fff4df;color:#ad6900;border-radius:8px;padding:8px 10px;font-size:12px;cursor:pointer}.today-overlay{position:fixed;inset:0;background:#061a3180;display:flex;align-items:center;justify-content:center;padding:15px;z-index:20}.today-card{background:#fff;width:440px;max-width:100%;border-radius:16px;padding:24px;position:relative}.today-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf1f5}.today-card .close{position:absolute;right:15px;top:10px}
.company-page{padding:24px}.company-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:18px}.company-box{border:1px solid #e5edf5;border-radius:13px;padding:16px;background:linear-gradient(135deg,#fff,#f8fbff)}.company-box-head{display:flex;align-items:center;gap:10px}.company-box-head>div{flex:1}.company-box-head small,.company-foot{display:block;color:#8795a6;font-size:12px;margin-top:5px}.company-box-head>b{color:#1769e0}.company-avatar{width:36px;height:36px;border-radius:10px;background:#e7f1ff;color:#1769e0;display:grid;place-items:center}.company-progress{height:8px;background:#edf3fa;border-radius:8px;margin:15px 0 10px}.company-progress i{height:100%;display:block;background:linear-gradient(90deg,#1769e0,#55b3ff);border-radius:8px}.company-foot{display:flex;justify-content:space-between}.company-foot b{color:#223a57}.full-bills{margin-top:18px}