*{box-sizing:border-box}body{margin:0;font-family:system-ui;background:#f6f8fb;color:#172033}#login{height:100vh;display:grid;place-items:center;background:#111827}#lf{width:360px;background:white;padding:32px;border-radius:22px}input,#lf button{width:100%;padding:12px;margin:6px 0;border:1px solid #d9e0e8;border-radius:10px}#lf button{background:#111827;color:white}.app{}#app{height:100vh;grid-template-columns:210px 1fr}#app:not([hidden]){display:grid}aside{background:#111827;color:white;padding:20px;display:flex;flex-direction:column}nav{flex:1}nav button,#logout{width:100%;padding:11px;margin:3px 0;text-align:left;border:0;border-radius:9px;background:transparent;color:#cbd5e1}nav button:hover{background:#ffffff14}main{min-width:0;overflow:auto}.head{height:72px;background:white;border-bottom:1px solid #e5e7eb;padding:20px}.body{padding:20px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:white;border:1px solid #e5e7eb;border-radius:16px;padding:18px}.metric{padding:14px;background:#f7f9fc;margin:8px 0;border-radius:10px}.metric b{float:right}.table{width:100%;border-collapse:collapse;background:white}.table th,.table td{padding:12px;border-bottom:1px solid #edf1f5;text-align:left}.inbox{height:100vh;display:grid;grid-template-columns:330px 1fr}.list{background:white;border-right:1px solid #e5e7eb;overflow:auto}.row{display:block;width:100%;padding:14px;border:0;border-bottom:1px solid #edf1f5;background:white;text-align:left}.chat{display:flex;flex-direction:column}.messages{flex:1;overflow:auto;padding:20px}.msg{max-width:70%;background:white;padding:10px;margin:8px;border-radius:12px}.msg.agent{margin-left:auto;background:#111827;color:white}@media(max-width:900px){#app{grid-template-columns:72px 1fr}.grid{grid-template-columns:1fr}}