:root{--ink:#11131b;--cream:#f5f1e8;--yellow:#ffd400;--red:#f04438;--blue:#2454dc;--line:#d8d3c7}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.45 Arial,sans-serif}header{height:72px;background:#fff;border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,5vw)}.brand{color:inherit;text-decoration:none;font-weight:900;letter-spacing:2px}nav{display:flex;gap:20px;align-items:center}nav a{color:inherit;text-decoration:none;font-weight:800}button,.primary{border:2px solid var(--ink);background:var(--yellow);padding:11px 15px;font-weight:900;cursor:pointer}.hero{padding:55px max(22px,5vw) 34px;background:var(--blue);color:#fff}.hero>span{font-size:11px;letter-spacing:2px;font-weight:900}.hero h1{font-size:clamp(42px,7vw,78px);line-height:.95;margin:12px 0}.hero a{color:var(--yellow)}.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.channels article{border:2px solid #fff;padding:16px;display:grid}.channels small{opacity:.8}.workspace{width:min(1280px,94vw);margin:28px auto;display:grid;grid-template-columns:380px 1fr;min-height:600px;border:2px solid var(--ink);background:#fff}.workspace>aside{border-right:2px solid var(--ink)}.list-head{padding:18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.list-head h2{margin:0}.ticket{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line);padding:17px}.ticket.active{background:#fff7c7;border-left:6px solid var(--yellow)}.ticket b,.ticket span{display:block}.ticket small{color:#6c6c70}.ticket .status{float:right;text-transform:uppercase;font-size:9px;color:var(--red)}.conversation{display:flex;flex-direction:column;min-width:0}.conversation-head{padding:20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.conversation-head h2{margin:4px 0}.meta{font-size:12px;color:#666}.messages{padding:22px;display:flex;flex-direction:column;gap:12px;overflow:auto;max-height:520px;flex:1;background:#faf9f5}.bubble{max-width:78%;padding:13px 15px;border:1px solid var(--line);white-space:pre-wrap}.bubble.customer{align-self:flex-end;background:#dbe7ff}.bubble.staff{background:#fff}.bubble.system{align-self:center;background:#fff7c7;font-size:12px}.bubble small{display:block;margin-top:8px;color:#666}.reply{padding:16px;border-top:1px solid var(--line)}textarea,input,select{width:100%;border:2px solid #aaa;padding:11px;font:inherit}.reply textarea{resize:vertical}.reply button{margin-top:9px}.empty{margin:auto;text-align:center;color:#777}dialog{border:3px solid var(--ink);box-shadow:10px 10px var(--yellow);width:min(600px,94vw);padding:28px}dialog::backdrop{background:#111b}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2{font-size:34px;margin:5px 0 18px}.dialog-head button{background:#fff}label{display:grid;gap:6px;margin:13px 0;font-weight:800}.feedback{padding:18px;background:#f2efe7}.stars{display:flex;gap:5px}.stars button{background:#fff}.sla{font-weight:900;color:#c13229}@media(max-width:800px){.channels{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.workspace>aside{border-right:0;border-bottom:2px solid var(--ink);max-height:320px;overflow:auto}}