*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#17213b;font:14px Arial,sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:#121a31;color:white;padding:24px 16px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;margin:0 8px 28px}.brand>span,.logo{width:40px;height:40px;border-radius:12px;background:#7041e3;display:grid;place-items:center;color:white;font-weight:800}.brand div{display:flex;flex-direction:column}.brand small{color:#94a0b8;margin-top:3px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav a{color:#abb5ca;text-decoration:none;padding:12px;border-radius:9px}.sidebar nav a.active,.sidebar nav a:hover{background:#252e4a;color:white}.connected{margin-top:auto;border:1px solid #2a3551;padding:12px;border-radius:11px;display:flex;gap:9px}.connected i{width:8px;height:8px;background:#22be81;border-radius:50%;margin-top:3px}.connected div{display:flex;flex-direction:column;font-size:11px}.connected small{color:#8e9ab1;margin-top:3px}.logout{border:0;background:none;color:#aeb7c9;padding:15px 5px;cursor:pointer}main{margin-left:240px;padding:24px 28px}main>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}header>div>small{letter-spacing:.15em;color:#8c97aa;font-size:9px;font-weight:800}h1{margin:5px 0 0;font-size:27px}.user{background:white;border:1px solid #e4e8ef;border-radius:9px;padding:11px 14px;font-weight:700}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.metrics article{background:white;border:1px solid #e4e8ef;border-radius:12px;padding:15px;display:grid;grid-template-columns:1fr auto}.metrics span{font-size:11px;color:#748197;font-weight:700}.metrics b{font-size:22px;grid-row:1/3;grid-column:2}.metrics small{font-size:9px;color:#9ba5b4;margin-top:5px}.metrics .accent{border-left:3px solid #6d3bea}.desk{height:calc(100vh - 185px);min-height:560px;background:white;border:1px solid #e4e8ef;border-radius:14px;display:grid;grid-template-columns:310px minmax(430px,1fr) 250px;overflow:hidden}.tickets{border-right:1px solid #e4e8ef;overflow:auto}.tickets h2{font-size:14px;padding:16px;margin:0}.tickets h2 span{background:#eef0f4;border-radius:20px;padding:2px 6px;font-size:9px}.ticket{display:flex;gap:10px;padding:13px 12px;border-top:1px solid #eef1f5;text-decoration:none;color:inherit}.ticket.selected,.ticket:hover{background:#f8f6ff;border-left:3px solid #7041e3}.avatar{width:37px;height:37px;border-radius:10px;background:#eee7ff;color:#7041e3;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none}.ticket>div{min-width:0}.ticket b{display:block;font-size:11px}.ticket em{display:block;color:#7041e3;font-size:8px;font-style:normal;text-transform:uppercase;font-weight:800;margin:5px 0}.ticket p{font-size:10px;color:#748095;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 5px}.ticket small{font-size:8px;color:#a0a9b6}.empty{text-align:center;color:#8793a5;padding:50px 20px;line-height:1.6}.chat{display:flex;flex-direction:column;min-width:0;background:#f8fbfa}.chat-head{height:67px;background:white;border-bottom:1px solid #e4e8ef;padding:14px 16px;display:flex;justify-content:space-between}.chat-head>div{display:flex;flex-direction:column}.chat-head b{font-size:12px}.chat-head small{color:#8d98aa;font-size:9px;margin-top:5px}.chat-head select{border:1px solid #e4e8ef;border-radius:7px;padding:7px;background:white}.assignment{background:#f7f4ff;padding:9px 14px;display:flex;gap:15px;align-items:center}.assignment span{display:flex;flex-direction:column}.assignment small{font-size:7px;color:#958aaa;font-weight:800}.assignment b{font-size:9px;margin-top:3px}.messages{padding:20px;overflow:auto;flex:1}.message{width:max-content;max-width:75%;background:white;border-radius:11px;padding:10px 12px;margin-bottom:9px;box-shadow:0 1px 2px #22304710}.message.out{margin-left:auto;background:#e6dcff}.message.system{margin-inline:auto;background:#edf0f4;color:#667286}.message p{font-size:10px;line-height:1.5;margin:0}.message small{display:block;text-align:right;font-size:7px;color:#8b96a4;margin-top:5px}.composer{display:flex;gap:8px;padding:12px;background:white;border-top:1px solid #e4e8ef}.composer textarea{flex:1;border:1px solid #e4e8ef;border-radius:8px;padding:10px;resize:none}.composer button,.login-card button{background:#6d3bea;color:white;border:0;border-radius:8px;padding:0 16px;font-weight:800}.detail{border-left:1px solid #e4e8ef;padding:20px;text-align:center}.dealer-icon{width:52px;height:52px;border-radius:15px;background:#eee7ff;color:#7041e3;display:grid;place-items:center;margin:auto;font-weight:800}.detail h3{margin:10px 0 3px}.detail>p{font-size:9px;color:#929dad}.detail dl{border-top:1px solid #e4e8ef;padding-top:10px}.detail dl div{display:flex;justify-content:space-between;padding:7px 0;gap:8px}.detail dt{font-size:9px;color:#8d98aa}.detail dd{font-size:9px;font-weight:700;text-align:right;margin:0}.no-ticket{margin:auto;text-align:center;color:#758196}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#121a31,#33216d)}.login-card{width:min(380px,90%);background:white;border-radius:18px;padding:34px;box-shadow:0 25px 70px #0004}.login-card .logo{margin:auto}.login-card h1{text-align:center;font-size:24px}.login-card>p{text-align:center;color:#7b8799}.login-card p:has(input){text-align:left}.login-card label{display:block;font-size:11px;font-weight:800;margin-bottom:5px}.login-card input{width:100%;height:42px;border:1px solid #dfe4ec;border-radius:8px;padding:0 10px}.login-card button{height:42px;width:100%;margin-top:10px}@media(max-width:1100px){.desk{grid-template-columns:290px 1fr}.detail{display:none}.metrics{grid-template-columns:repeat(2,1fr)}}