:root{--primary:#147ff5;--primary2:#0968d9;--bg:#f3f6fa;--panel:#fff;--text:#13233d;--muted:#64748b;--line:#e5eaf0;--side:#101b2c;--green:#16b979;--red:#ef5367;--purple:#7a45ed;--orange:#ff922e;--teal:#149da0;--font:'Poppins',sans-serif;--scale:1}
*{box-sizing:border-box}html{font-size:calc(16px * var(--scale));scroll-behavior:smooth}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:1rem}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app{display:flex;min-height:100vh}aside{width:236px;background:var(--side);color:#fff;padding:22px 14px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.logo{font-size:1.75rem;font-weight:800;letter-spacing:.5px;padding:0 12px 20px;border-bottom:1px solid rgba(255,255,255,.12)}nav{display:flex;flex-direction:column;gap:7px;margin-top:18px}nav a{display:flex;gap:13px;align-items:center;padding:13px 13px;border-radius:10px;color:#e6edf7;font-size:.94rem}nav a:hover,nav a.active{background:var(--primary);color:#fff}nav a:first-letter{font-size:1.2rem}.side-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:18px 12px 3px;display:flex;flex-direction:column;gap:3px}.side-footer small{color:#8fa0b8}main{margin-left:236px;width:calc(100% - 236px);padding:0 22px 28px}header{height:92px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:rgba(255,255,255,.75);margin:0 -22px;padding:0 22px;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}header h1{font-size:1.5rem;margin:0}header p,.welcome p,.panel-head p{margin:3px 0 0;color:var(--muted);font-size:.88rem}.eyebrow{font-size:.72rem;font-weight:800;color:var(--primary);letter-spacing:1.2px;margin-bottom:1px}.header-right{display:flex;align-items:center;gap:14px}.date-box{display:flex;flex-direction:column;align-items:flex-end;font-size:.78rem}.date-box small{color:var(--muted)}.logout,.secondary,.primary{border:0;border-radius:9px;padding:11px 16px;cursor:pointer;font-weight:700}.logout{background:#e9eef5;color:var(--text)}.primary{background:var(--primary);color:#fff}.secondary{background:#e9eef5;color:var(--text)}.welcome{padding:26px 0 15px}.welcome h2{font-size:1.55rem;margin:0}.cards{display:grid;grid-template-columns:repeat(6,minmax(145px,1fr));gap:14px}.metric{border-radius:11px;padding:17px 16px;color:#fff;min-height:116px;box-shadow:0 8px 20px rgba(18,35,61,.08)}.metric span{font-size:.72rem;font-weight:800;display:block;letter-spacing:.2px}.metric strong{display:block;font-size:1.35rem;margin:9px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric small{font-size:.72rem;opacity:.9}.blue{background:linear-gradient(135deg,#1686ff,#0d6ee1)}.green{background:linear-gradient(135deg,#18be79,#0eaa68)}.red{background:linear-gradient(135deg,#f26174,#e7455e)}.purple{background:linear-gradient(135deg,#864ef2,#7040df)}.orange{background:linear-gradient(135deg,#ff9b38,#f47e17)}.dashboard-grid{display:grid;grid-template-columns:1.05fr 1.2fr .85fr;gap:16px;margin-top:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:0 7px 24px rgba(18,35,61,.045)}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel-head h2{margin:0;font-size:1.1rem}.donut-wrap{display:flex;justify-content:center;align-items:center;padding:18px 0}.donut{width:220px;height:220px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--paid,0%),var(--orange) var(--paid,0%) 100%);position:relative;display:grid;place-items:center}.donut:before{content:"";position:absolute;inset:28px;background:var(--panel);border-radius:50%}.donut-center{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column}.donut-center strong{font-size:1.8rem}.donut-center span{color:var(--muted);font-size:.86rem}.chart-legend,.money-legend{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}.money-legend>div{display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;font-size:.78rem}.money-legend b{grid-column:2;color:var(--text)}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}.legend-dot.paid,.bar.paid{background:var(--green)}.legend-dot.unpaid,.bar.unpaid{background:var(--orange)}.bar-chart{height:220px;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;margin-top:15px;border-bottom:1px solid var(--line);padding:0 8px}.bar-group{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;flex:1}.bars{height:88%;display:flex;align-items:flex-end;gap:4px;width:100%;justify-content:center}.bar{display:block;width:14px;min-height:3px;border-radius:5px 5px 0 0}.bar-group>span{font-size:.7rem;color:var(--muted)}.bar-legend{text-align:center;margin-top:12px;font-size:.76rem;color:var(--muted)}.bar-legend span{margin:0 8px}.info-list{margin-top:10px}.info-list div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.79rem}.info-list div:last-child{border-bottom:0}.info-list span{color:var(--muted)}.settings-panel{margin-top:16px}.settings-head{align-items:center}.settings-grid{display:grid;grid-template-columns:1fr 1.1fr 1.3fr;gap:14px;margin-top:16px}.setting-box{border:1px solid var(--line);border-radius:11px;padding:16px}.setting-box h3{font-size:.92rem;margin:0}.setting-box>p{font-size:.74rem;color:var(--muted);margin:2px 0 12px}.size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.size-options button{background:var(--panel);border:1px solid #d8e0ea;border-radius:8px;padding:9px 4px;color:var(--text);cursor:pointer;font-size:1.15rem}.size-options button span{display:block;font-size:.7rem;margin-top:3px}.size-options button.selected{border-color:var(--primary);background:var(--primary);color:#fff}.setting-box select{width:100%;border:1px solid #d8e0ea;border-radius:8px;padding:10px;background:var(--panel);color:var(--text)}.font-preview{margin-top:9px;padding:10px;background:var(--bg);border-radius:8px;font-size:.78rem}.theme-options{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.theme-options button{padding:9px 3px;border:1px solid #d8e0ea;border-radius:8px;background:var(--panel);cursor:pointer;font-size:.68rem;color:var(--text)}.theme-options button.selected{outline:2px solid var(--primary);outline-offset:1px}.theme-options [data-theme=blue]{--c:#147ff5}.theme-options [data-theme=green]{--c:#16b979}.theme-options [data-theme=purple]{--c:#7a45ed}.theme-options [data-theme=red]{--c:#ef5367}.theme-options [data-theme=orange]{--c:#ff922e}.theme-options [data-theme=teal]{--c:#149da0}.theme-options button:before{content:"●";color:var(--c);display:block;font-size:1rem}.dark-toggle{display:flex;gap:8px;align-items:center;margin-top:13px;font-size:.75rem;color:var(--text)}footer{padding:18px 3px;color:var(--muted);font-size:.72rem}html[data-size=small]{--scale:.9}html[data-size=large]{--scale:1.1}html[data-theme=blue]{--primary:#147ff5;--primary2:#0968d9}html[data-theme=green]{--primary:#16b979;--primary2:#0eaa68}html[data-theme=purple]{--primary:#7a45ed;--primary2:#6638d3}html[data-theme=red]{--primary:#ef5367;--primary2:#d94156}html[data-theme=orange]{--primary:#ff922e;--primary2:#e97817}html[data-theme=teal]{--primary:#149da0;--primary2:#0d7e80}html.dark{--bg:#0c1421;--panel:#121d2c;--text:#e9eef7;--muted:#9aabc0;--line:#26364b}html.dark header{background:rgba(18,29,44,.82)}html.dark .logout,html.dark .secondary{background:#243247;color:#e9eef7}html.dark .size-options button,html.dark .theme-options button,html.dark .setting-box select{background:#172438;color:#e9eef7;border-color:#30425a}html.dark .font-preview{background:#0d1725}@media(max-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.info-panel{grid-column:1/-1}.settings-grid{grid-template-columns:1fr 1fr}.settings-grid .setting-box:last-child{grid-column:1/-1}}@media(max-width:760px){aside{width:72px}.logo{font-size:1.2rem;text-align:center;padding-left:0;padding-right:0}nav a{justify-content:center;font-size:0}nav a:first-letter{font-size:1.2rem}.side-footer{display:none}main{margin-left:72px;width:calc(100% - 72px);padding:0 12px 20px}header{margin:0 -12px;padding:0 12px}.date-box{display:none}.cards,.dashboard-grid,.settings-grid{grid-template-columns:1fr}.info-panel,.settings-grid .setting-box:last-child{grid-column:auto}.theme-options{grid-template-columns:repeat(3,1fr)}}

/* MIZAL COMPACT DESKTOP OVERRIDES */
html{font-size:14px}
body{font-size:14px;overflow-x:hidden}
aside{width:190px;padding:16px 10px}
.logo{font-size:1.45rem;padding:0 10px 14px}
nav{gap:3px;margin-top:12px}
nav a{gap:9px;padding:9px 10px;border-radius:8px;font-size:.82rem}
nav a:first-letter{font-size:1rem}
.side-footer{padding:12px 10px 2px;font-size:.72rem}
main{margin-left:190px;width:calc(100% - 190px);padding:0 16px 18px}
header{height:68px;margin:0 -16px;padding:0 16px}
header h1{font-size:1.25rem}
header p,.welcome p,.panel-head p{font-size:.72rem}
.eyebrow{font-size:.62rem}
.date-box{font-size:.68rem}.header-right{gap:9px}
.logout,.secondary,.primary{padding:8px 12px;border-radius:7px;font-size:.72rem}
.welcome{padding:16px 0 10px}.welcome h2{font-size:1.25rem}
.cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.metric{padding:11px 10px;min-height:82px;border-radius:8px;box-shadow:0 5px 12px rgba(18,35,61,.07)}
.metric span{font-size:.57rem}.metric strong{font-size:1.05rem;margin:5px 0 2px}.metric small{font-size:.58rem}
.dashboard-grid{grid-template-columns:1.05fr 1.15fr .9fr;gap:10px;margin-top:11px}
.panel{padding:13px;border-radius:9px}.panel-head h2{font-size:.9rem}.donut-wrap{padding:10px 0}.donut{width:145px;height:145px}.donut:before{inset:19px}.donut-center strong{font-size:1.25rem}.donut-center span{font-size:.65rem}
.money-legend{gap:14px}.money-legend>div{font-size:.63rem}.legend-dot{width:7px;height:7px}.bar-chart{height:145px;margin-top:8px;gap:5px;padding:0 4px}.bar{width:9px}.bar-group{gap:4px}.bar-group>span,.bar-legend{font-size:.58rem}.bar-legend{margin-top:7px}.bar-legend span{margin:0 5px}
.info-list{margin-top:5px}.info-list div{padding:7px 0;font-size:.64rem}
footer{padding:10px 2px;font-size:.6rem}
@media(max-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.info-panel{grid-column:1/-1}}
@media(max-width:760px){aside{width:64px}.logo{font-size:1.1rem}.side-footer{display:none}main{margin-left:64px;width:calc(100% - 64px);padding:0 10px 14px}header{margin:0 -10px;padding:0 10px}.cards,.dashboard-grid{grid-template-columns:1fr}.info-panel{grid-column:auto}}
/* MIZAL PROFESSIONAL COMPACT */
:root{--font:'Poppins',sans-serif}
*{box-sizing:border-box}html{font-size:13px}body{font-size:13px;overflow-x:hidden}aside{width:190px;padding:16px 10px}.logo{font-size:1.45rem;padding:0 10px 14px}nav{gap:3px;margin-top:12px}nav a{gap:9px;padding:9px 10px;border-radius:8px;font-size:.82rem}.side-footer{padding:12px 10px 2px;font-size:.7rem}main{margin-left:190px;width:calc(100% - 190px);padding:0 16px 18px}header{height:68px;margin:0 -16px;padding:0 16px}header h1{font-size:1.2rem}header p,.welcome p,.panel-head p{font-size:.7rem}.eyebrow{font-size:.6rem}.date-box{font-size:.65rem}.logout,.secondary,.primary{padding:8px 11px;border-radius:7px;font-size:.7rem}.welcome{padding:14px 0 9px}.welcome h2{font-size:1.18rem}.cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.metric{padding:10px 9px;min-height:76px;border-radius:8px}.metric span{font-size:.55rem}.metric strong{font-size:1rem;margin:5px 0 2px}.metric small{font-size:.56rem}.dashboard-grid{grid-template-columns:1.05fr 1.15fr .9fr;gap:9px;margin-top:10px}.panel{padding:12px;border-radius:9px}.panel-head h2{font-size:.86rem}.donut-wrap{padding:12px 0}.donut{width:140px;height:140px}.donut:before{inset:20px}.donut-center strong{font-size:1.15rem}.donut-center span{font-size:.6rem}.money-legend{gap:12px;font-size:.6rem}.legend-dot{width:7px;height:7px}.bar-chart{height:145px;margin-top:8px;gap:5px;padding:0 4px}.bar{width:9px}.bar-group>span{font-size:.56rem}.info-list div{padding:6px 0;font-size:.61rem}footer{padding:9px 2px;font-size:.58rem}
.page-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0 11px}.page-toolbar h2{margin:0;font-size:1.08rem}.page-toolbar p{margin:3px 0 0;color:var(--muted);font-size:.7rem}.mini-cards{margin-bottom:11px}.mini-cards .metric{min-height:70px}.search{width:250px;border:1px solid var(--line);border-radius:7px;padding:8px 9px;background:var(--panel);color:var(--text);font-size:.68rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.form-grid .full{grid-column:1/-1}.form-grid label{display:block;font-size:.68rem;font-weight:700;margin-bottom:5px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);font-size:.7rem}.form-actions{display:flex;align-items:center;gap:9px}.success-msg{color:var(--green);font-size:.7rem}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:.66rem}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:.59rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:var(--bg)}.badge{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:.58rem;font-weight:700}.badge.ok{background:rgba(22,185,121,.12);color:#0e9d66}.badge.warn{background:rgba(255,146,46,.14);color:#d86d00}.badge.off{background:rgba(239,83,103,.12);color:#d53b50}.danger{border:0;background:#feecee;color:#d53b50;border-radius:7px;padding:7px 9px;font-size:.62rem;cursor:pointer}.empty{text-align:center;padding:25px;color:var(--muted);font-size:.7rem}
@media(max-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-grid>.panel:last-child{grid-column:1/-1}}@media(max-width:760px){aside{width:64px}.logo{font-size:1.1rem;text-align:center;padding-left:0;padding-right:0}nav a{justify-content:center;font-size:0}.side-footer{display:none}main{margin-left:64px;width:calc(100% - 64px);padding:0 10px 14px}header{margin:0 -10px;padding:0 10px}.cards,.dashboard-grid,.form-grid{grid-template-columns:1fr}.dashboard-grid>.panel:last-child{grid-column:auto}.page-toolbar{align-items:flex-start;flex-direction:column}.search{width:100%}.form-grid .full{grid-column:auto}}
html[data-size=small]{font-size:12px}html[data-size=large]{font-size:14px}html[data-theme=blue]{--primary:#147ff5}html[data-theme=green]{--primary:#16b979}html[data-theme=purple]{--primary:#7a45ed}html[data-theme=red]{--primary:#ef5367}html[data-theme=orange]{--primary:#ff922e}html[data-theme=teal]{--primary:#149da0}html.dark{--bg:#0c1421;--panel:#121d2c;--text:#e9eef7;--muted:#9aabc0;--line:#26364b}html.dark header{background:rgba(18,29,44,.82)}html.dark .logout,html.dark .secondary{background:#243247;color:#e9eef7}