*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f6fb;color:#172033}.app{display:flex;min-height:100vh}.sidebar{width:280px;background:#111827;color:white;padding:24px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.logo{width:44px;height:44px;border-radius:14px;background:#2563eb;display:grid;place-items:center;font-weight:800}.brand h1{font-size:20px;margin:0}.brand p{margin:3px 0 0;color:#aab2c5;font-size:13px}.nav{width:100%;padding:13px 14px;margin:6px 0;border:0;border-radius:12px;background:transparent;color:#d7dcea;text-align:left;cursor:pointer;font-size:15px}.nav.active,.nav:hover{background:#243044;color:#fff}.uploadBox{margin-top:30px;padding:16px;border:1px solid #344053;border-radius:16px;background:#182235}.uploadBox label{display:block;font-weight:700;margin-bottom:10px}.uploadBox input{width:100%;font-size:12px}.uploadBox small{display:block;color:#aab2c5;margin-top:10px;line-height:1.4}main{flex:1;padding:24px 28px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.topbar h2{margin:0;font-size:28px}.topbar p{margin:6px 0 0;color:#687386}.topbar button,.panelHead button,#resetBtn{border:0;background:#2563eb;color:white;border-radius:10px;padding:10px 14px;cursor:pointer}.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;background:white;padding:16px;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.06);margin-bottom:16px}.filters label{display:block;font-size:12px;color:#667085;margin-bottom:6px}.filters input,.filters select{width:100%;padding:10px 11px;border:1px solid #d8dfeb;border-radius:10px;background:#fff}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.card,.panel{background:white;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.06)}.card{padding:18px}.card span{display:block;color:#667085;font-size:13px}.card strong{font-size:24px;display:block;margin-top:8px}.grid.two{display:grid;grid-template-columns:1.3fr .9fr;gap:16px}.panel{padding:18px;margin-bottom:16px}.panel h3{margin:0 0 14px}.panelHead{display:flex;justify-content:space-between;align-items:center}.view{display:none}.view.active{display:block}canvas{max-height:360px}.tableWrap{overflow:auto;max-height:520px;border-radius:12px;border:1px solid #e5eaf2}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:10px 12px;border-bottom:1px solid #eef2f7;text-align:left;white-space:nowrap}th{background:#f8fafc;color:#475467;position:sticky;top:0}tr:hover{background:#f8fbff}.clickable{cursor:pointer;color:#1d4ed8;font-weight:700}@media(max-width:1000px){.app{display:block}.sidebar{width:auto;height:auto;position:relative}.filters,.cards,.grid.two{grid-template-columns:1fr}main{padding:16px}.topbar{display:block}}