:root{--red:#e50917;--red-dark:#cc0b18;--ink:#1f3548;--ink-2:#536574;--muted:#8794a1;--border:#e6ebf0;--wash:#f7f9fb;--white:#fff;--mint:#e9f7f0;--green:#257f59;--yellow:#fff5e9;--orange:#a56124;--shadow:0 5px 24px rgba(27,51,68,.045)}
*{box-sizing:border-box}html{background:var(--wash)}body{font:14px/1.45 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);margin:0;min-width:280px}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #f04d57;outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}.app{min-height:100vh;min-height:100dvh;background:var(--wash)}.topbar{height:64px;padding:0 26px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:3}.brand{display:flex;align-items:center;gap:10px}.brand img{width:40px;height:32px;object-fit:contain}.brand>div{display:flex;align-items:baseline;gap:7px}.brand strong{letter-spacing:.09em;font-size:16px}.brand span{font-size:13px;font-weight:600;color:var(--muted)}.top-right{display:flex;align-items:center;gap:12px}.demo-marker{font-size:11px;background:#f3f5f6;border:1px solid #e5e8eb;color:#748492;border-radius:6px;padding:4px 8px;font-weight:700}.avatar{height:30px;width:30px;border-radius:50%;display:grid;place-items:center;background:#e9eef2;font-weight:700;color:#537185}.main{max-width:860px;margin:auto;padding:28px 24px 76px;outline:none}.page-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:23px}.page-header.narrow{margin-bottom:18px}.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#929fac;margin-bottom:5px}h1{margin:0;color:var(--ink);font-size:27px;line-height:1.25;letter-spacing:-.035em;font-weight:770}.subtitle{font-size:13px;color:var(--muted);margin:7px 0 0}.btn{border:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;font-weight:700;white-space:nowrap;min-height:41px;transition:background .15s,transform .15s}.btn:active{transform:scale(.985)}.btn-primary{background:var(--red);color:white}.btn-primary:hover{background:var(--red-dark)}.btn-ghost{background:#f2f5f7;color:#536779}.btn-outline{background:#fff;border:1px solid #d9e0e6;color:var(--ink)}.plus{font-weight:400;font-size:21px;line-height:15px}.searchbar{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:white;border-radius:10px;padding:0 14px;min-height:45px;color:#95a2ae;box-shadow:var(--shadow)}.searchbar input{border:0;outline:0;width:100%;height:42px;background:transparent;color:var(--ink)}.searchbar input:focus{outline:0}.filters{display:flex;gap:6px;overflow:auto;scrollbar-width:none;padding:17px 0 13px}.filters::-webkit-scrollbar{display:none}.filter{border:0;background:transparent;color:#71808f;padding:7px 12px;border-radius:8px;font-size:13px;font-weight:650;white-space:nowrap}.filter span{font-size:11px;margin-left:3px}.filter.active{background:#fff;color:var(--red);box-shadow:0 0 0 1px #edf0f3}.ticket-list{display:flex;flex-direction:column;gap:9px}.ticket-item{display:block;text-align:left;border:1px solid var(--border);background:#fff;border-radius:12px;padding:15px 17px;box-shadow:var(--shadow);width:100%;transition:border-color .14s,transform .14s}.ticket-item:hover{border-color:#cbd6de;transform:translateY(-1px)}.ticket-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.ticket-id{color:#98a5af;font-weight:700;letter-spacing:.02em;font-size:11px}.ticket-title{font-size:15px;font-weight:710;line-height:1.4;overflow-wrap:anywhere}.ticket-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:#91a0ac;font-size:12px}.ticket-bottom-left{display:flex;align-items:center;gap:9px;min-width:0}.ticket-bottom-left>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{border-radius:6px;padding:4px 8px;font-size:11px;font-weight:750;white-space:nowrap;background:#eef3ff;color:#5675a9}.status.open{background:#eef5fc;color:#4a7699}.status.review{background:#fff4e6;color:#b66b1b}.status.closed{background:var(--mint);color:var(--green)}.urgent-badge{display:inline-flex;align-items:center;gap:3px;background:#fff0ed;color:#b64527;border:1px solid #ffe3d9;border-radius:7px;padding:3px 7px;font-size:11px;font-weight:750}.right-group{display:flex;align-items:center;gap:6px;min-width:0}.empty{border:1px dashed #dce4ea;border-radius:13px;padding:30px;text-align:center;color:#8493a0;background:white}.list-footnote,.micro-note{color:#a3afb8;font-size:11px;margin-top:18px;line-height:1.5}.back{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:#667b8b;font-weight:650;padding:2px 0;margin:0 0 23px}.back span{font-size:19px;font-weight:400}.form-card,.detail-block,.approval{background:white;border:1px solid var(--border);border-radius:13px;padding:22px;box-shadow:var(--shadow)}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:19px;font-weight:690;font-size:13px}.field em{font-style:normal;color:var(--red)}.field input,.field textarea,.message-form input{border:1px solid #dce4ea;border-radius:9px;width:100%;padding:12px 13px;color:var(--ink);background:white;font-size:14px;font-weight:400}.field textarea{min-height:116px;resize:vertical}.field input::placeholder,.field textarea::placeholder,.message-form input::placeholder{color:#a6b0b9}.urgent-toggle{border:1px solid #e7ebef;border-radius:11px;padding:13px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;margin-bottom:13px}.urgent-toggle:has(input:checked){border-color:#ffb3ad;background:#fff8f7}.urgent-icon{font-size:23px}.urgent-copy{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.urgent-copy b{font-size:13px}.urgent-copy small{font-size:11px;color:var(--muted)}.urgent-toggle input{position:absolute;opacity:0;pointer-events:none}.switch-track{width:39px;height:23px;background:#dbe2e8;border-radius:20px;flex:0 0 auto;position:relative;transition:background .16s}.switch-track:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;top:3px;left:3px;background:white;box-shadow:0 1px 3px #1112;transition:transform .16s}.urgent-toggle input:checked+.switch-track{background:var(--red)}.urgent-toggle input:checked+.switch-track:before{transform:translateX(16px)}.urgent-toggle input:focus-visible+.switch-track{outline:2px solid var(--red);outline-offset:3px}.upload{border:1px dashed #d8e0e6;border-radius:11px;display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer}.upload>span:first-child{font-size:20px}.upload>span:nth-child(2){display:flex;flex-direction:column}.upload b{font-size:12px}.upload small{color:#a4aeb7;font-size:11px}.upload input{display:none}.file-names{color:#6f7f8c;font-size:12px;line-height:1.7;margin:7px 0}.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:19px}.ticket-detail-head{margin-bottom:18px}.ticket-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;margin-bottom:8px}.ticket-detail-head h1{font-size:23px;overflow-wrap:anywhere}.detail-badges{display:flex;align-items:center;gap:7px;margin-top:12px}.detail-block{margin-bottom:12px}.section-label{font-size:12px;font-weight:800;color:#83929e;margin-bottom:13px;letter-spacing:.02em}.section-label span{font-weight:400}.description{white-space:pre-wrap;overflow-wrap:anywhere;color:#41586a;line-height:1.7}.messages{display:flex;flex-direction:column;gap:16px}.message{display:flex;align-items:flex-start;gap:9px}.bubble-avatar{width:29px;height:29px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:#e5edf3;color:#62788a;font-size:12px;font-weight:800}.bubble-avatar.agent{background:#fff2f3;color:var(--red)}.message-content{max-width:calc(100% - 41px);min-width:0}.message-name{font-size:11px;color:#83929e;margin-bottom:5px}.bubble{background:#f4f7f9;padding:11px 13px;border-radius:4px 11px 11px 11px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;color:#3b5164}.message.agent .bubble{background:#fff5f5}.message-form{display:flex;gap:8px;margin-top:20px}.message-form input{min-width:0;flex:1}.send-btn{background:var(--red);color:white;border:0;border-radius:9px;font-size:17px;width:44px;flex:0 0 44px}.time-block{display:flex;justify-content:space-between;align-items:center;gap:15px}.time-block strong{font-size:21px}.muted{color:#93a1aa;font-size:12px}.approval{display:flex;gap:10px;flex-direction:column;margin-bottom:15px;background:#fffdf9}.approval strong{font-size:15px}.approval p{margin:5px 0 0;color:#8a969f;font-size:12px}.approve-actions{display:flex;gap:9px}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);padding:12px 17px;background:#203749;color:white;border-radius:10px;box-shadow:0 12px 50px #101d2633;z-index:10;max-width:calc(100% - 30px);text-align:center;pointer-events:none}.mobile-create{display:none}
@media(max-width:650px){.topbar{height:58px;padding:0 17px}.brand img{width:35px;height:27px}.brand strong{font-size:14px}.brand span{font-size:12px}.main{padding:22px 16px 98px}h1{font-size:24px}.page-header{margin-bottom:17px}.desktop-new{display:none}.filters{margin:0 -4px}.filter{padding:7px 10px}.ticket-item{padding:14px}.ticket-bottom{font-size:11px}.form-card,.detail-block,.approval{padding:16px}.mobile-create{position:fixed;bottom:16px;right:16px;border:0;border-radius:11px;background:var(--red);color:white;box-shadow:0 8px 25px #e5091750;padding:11px 16px;font-size:13px;font-weight:750;z-index:2;display:inline-flex;align-items:center;gap:5px}.mobile-create span{font-size:20px;font-weight:400;line-height:16px}.app[data-screen="form"] .mobile-create,.app[data-screen="detail"] .mobile-create{display:none}.form-actions{justify-content:stretch}.form-actions .btn{flex:1}.ticket-detail-head h1{font-size:21px}.approval .approve-actions>.btn{flex:1}.list-footnote{margin-top:24px}}
@media(max-width:350px){.brand span{display:none}.ticket-bottom{flex-wrap:wrap}.ticket-bottom-left>span{max-width:190px}.approve-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.btn,.ticket-item,.switch-track,.switch-track:before{transition:none}}