:root{--navy:#101b3d;--ink:#16213f;--muted:#7d89a7;--line:#e8ecf4;--bg:#f6f8fc;--blue:#3867e8;--green:#16a36b;--orange:#f2994a;--red:#e25563;--card:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}.app-shell{display:flex;min-height:100vh}.sidebar{width:244px;background:var(--navy);color:#dce4ff;padding:24px 15px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;font:700 22px 'Space Grotesk';padding:0 13px 31px;color:#fff}.brand-mark{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#5278f4;color:#fff;font-weight:700}.workspace{display:flex;gap:9px;align-items:center;background:#1d2a51;border-radius:10px;padding:12px;margin-bottom:26px;font-size:13px}.status-dot{width:8px;height:8px;background:#30d69a;border-radius:50%}.chevron{margin-left:auto;color:#9caada}nav{flex:1}.nav-label{font-size:10px;color:#7885aa;letter-spacing:1.2px;margin:20px 13px 9px}.nav-item{width:100%;border:0;background:transparent;color:#aebbdc;text-align:left;padding:12px 13px;border-radius:8px;font:500 14px 'DM Sans';cursor:pointer;margin-bottom:3px}.nav-item span{display:inline-block;width:28px;font-size:17px;text-align:center;margin-right:7px}.nav-item:hover,.nav-item.active{background:#2b417c;color:#fff}.sidebar-footer{border-top:1px solid #2a365d;padding:18px 6px 3px;display:flex;gap:10px;align-items:center;font-size:12px}.sidebar-footer small{display:block;color:#8291b8;margin-top:3px}.support-icon{width:31px;height:31px;border:1px solid #7180a8;border-radius:50%;display:grid;place-items:center}.main-content{flex:1;min-width:0}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center;padding:0 4.5%}.top-actions{display:flex;align-items:center;gap:19px}.icon-button{border:0;background:transparent;color:#63708f;font-size:23px;position:relative;cursor:pointer}.icon-button i{position:absolute;background:var(--red);width:6px;height:6px;border-radius:50%;right:1px;top:1px}.avatar{width:37px;height:37px;border-radius:50%;background:#d7e3ff;color:#3867e8;display:grid;place-items:center;font-size:12px;font-weight:700}.user-name{font-size:13px;font-weight:600}.user-name small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}.mobile-brand{display:none}.page{max-width:1320px;margin:0 auto;padding:35px 4.5%}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:29px}.eyebrow{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.page h1{font:700 28px 'Space Grotesk';margin:5px 0 0}.primary-button{border:0;background:var(--blue);color:#fff;border-radius:8px;padding:12px 17px;font:600 13px 'DM Sans';cursor:pointer;box-shadow:0 6px 14px #3867e82b}.primary-button:hover{background:#2d56c9}.secondary-button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:11px 15px;font:600 13px 'DM Sans';cursor:pointer}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:27px}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}.stat-card{position:relative;min-height:136px}.stat-card h3{font-size:13px;color:var(--muted);font-weight:500;margin:0 0 18px}.stat-value{font:700 25px 'Space Grotesk';margin-bottom:10px}.stat-meta{font-size:11px;color:var(--green)}.stat-meta.neutral{color:var(--muted)}.stat-icon{position:absolute;right:19px;top:19px;border-radius:10px;width:36px;height:36px;display:grid;place-items:center;font-size:18px}.blue-bg{background:#e9efff;color:#3867e8}.green-bg{background:#e6f8f1;color:#16a36b}.orange-bg{background:#fff2e5;color:#e8923e}.purple-bg{background:#f0ecff;color:#765ce5}.content-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}.card-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.card-heading h2{font:600 16px 'Space Grotesk';margin:0}.text-button{color:var(--blue);background:transparent;border:0;font-size:12px;cursor:pointer}.bar-chart{height:205px;display:flex;align-items:end;gap:17px;border-bottom:1px solid var(--line);padding:0 9px}.bar-column{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}.bar{width:28px;background:#cbd8ff;border-radius:5px 5px 0 0;min-height:20px}.bar.current{background:var(--blue)}.bar-column small{font-size:10px;color:var(--muted);margin-bottom:10px}.legend{display:flex;gap:18px;font-size:11px;color:var(--muted);margin-top:15px}.activity{display:flex;flex-direction:column;gap:16px}.activity-row{display:flex;align-items:center;gap:11px}.activity-avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}.activity-info{flex:1;font-size:12px}.activity-info small{display:block;color:var(--muted);margin-top:3px}.amount{font-size:12px;font-weight:600;color:var(--green)}.table-card{margin-top:18px}.table-tools{display:flex;gap:9px}.search{border:1px solid var(--line);border-radius:7px;padding:9px 12px;font:12px 'DM Sans';outline:none}.search:focus{border-color:var(--blue)}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;padding:11px 8px;border-bottom:1px solid var(--line)}td{padding:13px 8px;border-bottom:1px solid #f0f2f7}.customer-cell{display:flex;align-items:center;gap:9px;font-weight:600}.mini-avatar{width:27px;height:27px;border-radius:50%;background:#e9efff;color:#3966df;display:grid;place-items:center;font-size:10px}.badge{padding:5px 8px;border-radius:5px;font-size:10px;font-weight:600}.badge.paid{color:#128259;background:#e3f7ee}.badge.pending{color:#c47523;background:#fff1dd}.badge.overdue{color:#d44352;background:#ffe7e9}.empty{color:var(--muted);text-align:center;padding:35px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-group label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}.form-group input,.form-group select{width:100%;border:1px solid var(--line);border-radius:7px;padding:11px;font:13px 'DM Sans';background:#fff}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:21px}.modal-backdrop{position:fixed;inset:0;background:#101b3d66;display:grid;place-items:center;padding:20px;z-index:5}.modal{width:min(560px,100%);box-shadow:0 20px 55px #101b3d33}.login-screen{position:fixed;inset:0;background:#f6f8fc;display:grid;place-items:center;z-index:20;padding:20px}.login-card{width:min(410px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:36px;box-shadow:0 20px 60px #101b3d14}.login-logo{width:48px;height:48px;display:grid;place-items:center;background:var(--blue);color:#fff;border-radius:13px;font:700 27px 'Space Grotesk';margin-bottom:22px}.login-card h1{font:700 28px 'Space Grotesk';margin:8px 0}.login-card p{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 23px}.login-card label{display:block;font-size:12px;font-weight:600;margin:14px 0 7px}.login-card input{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px;font:13px 'DM Sans'}.login-card .primary-button{width:100%;margin-top:22px}.login-card small{display:block;text-align:center;color:var(--muted);font-size:11px;margin-top:15px}.toast{position:fixed;right:25px;bottom:25px;background:var(--navy);color:#fff;padding:13px 17px;border-radius:8px;font-size:13px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:900px){.sidebar{width:72px;padding:20px 10px}.brand>span:last-child,.workspace span:not(.status-dot),.workspace .chevron,.nav-label{display:none}.nav-item{font-size:0;padding:12px 8px}.nav-item span{font-size:18px;margin:0;width:100%}.sidebar-footer{display:none}.stats{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.user-name{display:none}}@media(max-width:600px){.topbar{height:65px;padding:0 18px;justify-content:space-between}.mobile-brand{display:flex;align-items:center;gap:7px;font:700 18px 'Space Grotesk'}.mobile-brand .brand-mark{width:26px;height:26px}.top-actions{gap:10px}.page{padding:24px 18px}.page-heading{align-items:flex-start;gap:15px;flex-direction:column}.page-heading .primary-button{align-self:stretch}.stats{gap:9px}.stat-card{padding:14px;min-height:125px}.stat-card h3{font-size:11px}.stat-value{font-size:20px}.stat-icon{right:12px;top:12px}.card{padding:15px}.bar-chart{gap:6px}.bar{width:19px}.table-card{overflow:auto}.table-card table{min-width:600px}.form-grid{grid-template-columns:1fr}}