:root{--bg: #f4f5f7;--panel: #ffffff;--ink: #1a1d24;--muted: #8a909b;--line: #e8eaed;--brand: #f57820;--brand-dark: #d9660f;--brand-soft: #fff1e6;--sidebar: #141821;--sidebar-2: #1c2230;--green: #2f9e44;--green-soft: #ebfbee;--red: #e03131;--red-soft: #fff5f5;--amber: #f08c00;--amber-soft: #fff4e0;--blue: #1c7ed6;--blue-soft: #e7f5ff}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}a{color:inherit}button{font:inherit;cursor:pointer}input,select,textarea,button{outline:none;font-family:inherit}.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px}.brand img{width:26px;height:26px}.brand small{font-weight:500;color:var(--muted);font-size:12px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{background:var(--panel);padding:32px;border-radius:14px;width:340px;box-shadow:0 10px 40px #00000014;display:flex;flex-direction:column}.login-card .brand{justify-content:center;margin-bottom:6px}.login-card label{font-size:13px;color:var(--muted);margin:14px 0 4px}.login-card input{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}.login-card button.primary{margin-top:22px}.login-err{color:var(--red);font-size:13px;margin-top:14px;text-align:center}.login-hint{color:var(--muted);font-size:12px;margin-top:16px;text-align:center}.shell{display:flex;min-height:100vh}.sidebar{width:210px;background:var(--sidebar);color:#cfd4de;flex-shrink:0;display:flex;flex-direction:column;padding:18px 12px}.sidebar .brand{color:#fff;padding:6px 8px 18px}.nav{display:flex;flex-direction:column;gap:2px}.nav a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:10px 12px;border-radius:9px;color:#aab2c0;font-size:14px;font-weight:500}.nav a:hover{background:var(--sidebar-2);color:#fff}.nav a.active{background:var(--brand);color:#fff}.sidebar .spacer{flex:1}.sidebar .who{font-size:12px;color:#8a93a4;padding:8px;line-height:1.4}.sidebar .who b{color:#e6e9ef;display:block}.logout{background:transparent;border:1px solid #2c3444;color:#aab2c0;border-radius:8px;padding:8px;width:100%}.logout:hover{background:var(--sidebar-2);color:#fff}.nav-toggle{display:none;border:0;background:transparent;color:#e6e9ef;font-size:22px;line-height:1;cursor:pointer;padding:4px 10px;border-radius:8px}.nav-toggle:hover{background:var(--sidebar-2)}.main{flex:1;min-width:0}.content{max-width:1180px;margin:0 auto;padding:24px 28px 60px}.page-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}.page-head h1{font-size:22px;margin:0}.page-head .spacer{flex:1}.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;font-weight:600;font-size:14px;color:var(--ink)}.btn:hover{background:#f0f1f3}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}.btn.sm{padding:5px 10px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.danger{color:var(--red);border-color:#f3c2c2}.btn.danger:hover{background:var(--red-soft)}.btn.ai{color:#5f3dc4;border-color:#d0bfff;background:#f3f0ff}.btn.ai:hover{background:#e9e2ff;border-color:#b197fc}.stats{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-bottom:22px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .08s,box-shadow .1s}.stat:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000014}.stat .num{font-size:28px;font-weight:800;line-height:1}.stat .lbl{font-size:12px;color:var(--muted);margin-top:6px}.stat.red{background:var(--red-soft);border-color:#ffd8d8}.stat.red .num{color:var(--red)}.stat.amber{background:var(--amber-soft);border-color:#ffe3b0}.stat.amber .num{color:var(--amber)}.stat.green{background:var(--green-soft);border-color:#c3f0ca}.stat.green .num{color:var(--green)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:15px;margin:0}.panel-body{padding:16px}.table-scroll{overflow-x:auto}table.tbl{width:100%;border-collapse:collapse;font-size:14px}table.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}table.tbl tr:last-child td{border-bottom:0}table.tbl tr.clickable{cursor:pointer}table.tbl tr.clickable:hover td{background:#fafbfc}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}.badge.muted{background:#f0f1f3;color:var(--muted)}.badge.green{background:var(--green-soft);color:var(--green)}.badge.red{background:var(--red-soft);color:var(--red)}.badge.amber{background:var(--amber-soft);color:var(--amber)}.badge.blue{background:var(--blue-soft);color:var(--blue)}.badge.brand{background:var(--brand-soft);color:var(--brand-dark)}.badge.dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle}.tk-count{background:var(--brand-soft);color:var(--brand-dark);font-weight:700;font-size:13px;padding:2px 10px;border-radius:999px}.tk-bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;background:#fff7ef;border:1px solid #ffd9b3;border-radius:12px;padding:10px 14px}.tk-bulkcount{font-weight:700;font-size:13px;color:var(--brand-dark)}.tk-selectall{border:0;background:transparent;color:var(--blue);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline}.tk-legend{display:flex;gap:12px;flex-wrap:wrap}.tk-legend-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}.tk-legend-dot{width:9px;height:9px;border-radius:3px;display:inline-block}.tk-list{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.tk-head{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fafbfc;font-size:12px;color:var(--muted)}.tk-head input[type=checkbox],.tk-check{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}.tk-row{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px 14px 18px;border-bottom:1px solid var(--line)}.tk-row:last-child{border-bottom:0}.tk-row:hover{background:#fcfcfd}.tk-row.sel{background:var(--brand-soft)}.tk-row.saving{opacity:.55;pointer-events:none}.tk-accent{position:absolute;left:0;top:0;bottom:0;width:4px}.ticket-avatar.sm{width:32px;height:32px;font-size:13px}.tk-main{flex:1;min-width:0;cursor:pointer}a.tk-main{display:block;color:inherit;text-decoration:none}a.tk-main:hover .ticket-subject{text-decoration:underline}.subject-link{color:inherit;text-decoration:none}.subject-link:hover .subject-text{text-decoration:underline}.tk-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.tk-pagination{display:flex;align-items:center;gap:12px;padding:14px 4px 0;font-size:13px;color:var(--muted)}.tk-pagenum{font-size:12px;color:var(--muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14182173;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}.modal-card{background:var(--panel);border-radius:14px;width:min(620px,100%);box-shadow:0 24px 64px #0000004d;display:flex;flex-direction:column}.modal-head{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0;font-size:16px;flex:1}.modal-x{border:0;background:transparent;font-size:18px;color:var(--muted);cursor:pointer}.modal-body{padding:16px 18px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}.ticket-list{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.ticket{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s}.ticket:last-child{border-bottom:0}.ticket:hover{background:#fafbfc}.ticket-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px}.ticket-main{flex:1;min-width:0}.ticket-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chip-new{background:var(--green-soft);color:var(--green);font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px;text-transform:none}.chip-urgent{background:var(--red-soft);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px;text-transform:none}.chip-reminder{background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px;text-transform:none;white-space:nowrap}.chip-customer{background:#e7f1ff;color:#1c4ed8;font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px;text-transform:none;white-space:nowrap}.reminder-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.reminder-current{font-size:13px;color:var(--blue);background:var(--blue-soft);border-radius:8px;padding:8px 12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ticket-subject{font-weight:600;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}.ticket-ref{color:var(--muted);font-size:14px;font-weight:500}.ticket-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:5px}.ticket-from{color:#5a6270}.dot-sep{color:var(--line)}.sla-red{color:var(--red);font-weight:600}.sla-amber{color:var(--amber);font-weight:600}.ticket-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0;text-align:right}.ticket-assignee{font-size:12px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticket.saving{opacity:.6;pointer-events:none}.inline-select{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 8px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;max-width:200px}.inline-select:hover{border-color:var(--brand)}.inline-select.agent-select{font-weight:500;color:#5a6270;max-width:190px}.inline-select.prio-high{color:var(--red);border-color:#f3c2c2;background:var(--red-soft)}.inline-select.prio-medium{color:var(--amber)}.inline-select.prio-low{color:var(--green)}.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.pill{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:#5a6270}.pill:hover{background:#f0f1f3}.pill.active{background:var(--brand);border-color:var(--brand);color:#fff}.sort-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:12px}.sort-label{font-size:12px;color:var(--muted);font-weight:600;margin-right:4px}.sort-field{border:0;background:transparent;border-radius:7px;padding:5px 10px;font-size:13px;font-weight:600;color:#5a6270;display:inline-flex;align-items:center;gap:4px}.sort-field:hover{background:#f0f1f3;color:var(--ink)}.sort-field.active{background:var(--brand-soft);color:var(--brand-dark)}.sort-field .caret{font-size:9px}.email-read-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}.email-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}.email-read-meta{min-width:0}.email-read-line{font-size:14px;line-height:1.5}.email-sender{color:var(--brand-dark);font-weight:700}.email-sub{color:var(--ink)}.email-time{color:var(--muted)}.email-read-from{font-size:12.5px;color:var(--muted);margin-top:2px}.email-read-subject{font-size:17px;font-weight:700;color:var(--ink);margin:2px 0 14px}.email-html{font-size:14px;line-height:1.6;color:#2a2d34;max-height:640px;overflow:auto;word-break:break-word}.email-html img{max-width:100%;height:auto;border-radius:4px}.email-html a{color:var(--brand-dark)}.email-html table{max-width:100%;border-collapse:collapse}.email-html blockquote{margin:6px 0;padding-left:12px;border-left:3px solid var(--line);color:#555}.email-html p{margin:6px 0}.attachments{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.attachments-head{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}.attachment-row{display:flex;flex-wrap:wrap;gap:8px}.attachment-chip{display:inline-flex;align-items:center;gap:8px;max-width:280px;border:1px solid var(--line);background:#fafbfc;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:13px}.attachment-chip:hover{background:var(--brand-soft);border-color:var(--brand)}.attachment-name{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-size{color:var(--muted);font-size:12px;flex-shrink:0}.search-bar{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px 12px;margin-bottom:14px}.search-bar:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.search-bar .search-icon{color:var(--muted);font-size:14px}.search-bar input{flex:1;border:0;outline:none;background:transparent;padding:9px 2px;font-size:14px;color:var(--ink)}.search-bar .search-clear{border:0;background:transparent;color:var(--muted);font-size:14px;padding:4px 6px;border-radius:6px}.search-bar .search-clear:hover{background:#f0f1f3;color:var(--ink)}.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}.filters select,.filters input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px}.filters label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.field label{font-size:12px;color:var(--muted);font-weight:600}.field input,.field select,.field textarea{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}.field textarea{resize:vertical;min-height:80px}.composer{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.composer-toolbar{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);background:#fafbfc;flex-wrap:wrap}.composer-toolbar button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 9px;font-size:13px;color:var(--ink);line-height:1.2}.composer-toolbar button:hover{background:#f0f1f3}.composer-editor{min-height:120px;max-height:320px;overflow:auto;padding:12px 14px;font-size:14px;line-height:1.6;outline:none}.composer-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}.composer-editor img{max-width:100%;height:auto;border-radius:6px;margin:6px 0}.composer-editor a{color:var(--brand-dark)}.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1;min-width:120px}.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}.detail-side{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto}.email-body{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.6;color:#333;max-height:620px;overflow:auto}.props .prop{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.props .prop>span{font-size:12px;color:var(--muted);font-weight:600}.props select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}.activity-day{border-bottom:1px solid var(--line)}.activity-day:last-child{border-bottom:0}.activity-day-head{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;padding:10px 2px;font-size:13px;font-weight:700;color:var(--ink)}.activity-day-head:hover{color:var(--brand-dark)}.activity-day-head .caret{color:var(--muted);font-size:11px;width:12px}.activity-day-head .muted{font-weight:400;color:var(--muted)}.activity-day .activity{padding:0 0 8px 20px}.activity{list-style:none;margin:0;padding:0}.activity li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.activity li:last-child{border-bottom:0}.activity .meta{color:var(--muted);font-size:12px;margin-bottom:3px;display:flex;gap:8px}.activity .body{white-space:pre-wrap;word-break:break-word}.empty{text-align:center;color:var(--muted);padding:40px 16px;font-size:14px}.banner{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px}.banner.err{background:var(--red-soft);color:var(--red)}.banner.ok{background:var(--green-soft);color:var(--green)}.banner.warn{background:var(--amber-soft);color:var(--amber)}.spin{color:var(--muted);padding:40px;text-align:center}.group-head{font-size:13px;font-weight:700;color:var(--ink);padding:12px 14px 6px;display:flex;gap:8px;align-items:center}.subject-cell{max-width:460px}.subject-text{font-weight:600}.subject-cell .mono{color:var(--muted)}@media (max-width: 1000px){.stats{grid-template-columns:repeat(3,1fr)}.detail-grid{grid-template-columns:1fr}.detail-side{position:static;max-height:none;overflow:visible}}@media (max-width: 640px){.shell{flex-direction:column}.sidebar{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px}.sidebar .brand{padding:0;margin-right:auto}.sidebar .brand small{display:none}.nav-toggle{display:inline-flex;align-items:center;justify-content:center}.nav,.sidebar .who,.logout,.sidebar .spacer{display:none}.sidebar.open .nav{display:flex;flex-direction:column;width:100%;order:3;gap:2px;margin-top:8px}.sidebar.open .nav a{width:100%;padding:11px 12px;border-radius:8px}.sidebar.open .logout{display:block;width:100%;order:4;margin-top:8px;padding:10px}.content{padding:16px 14px 48px}.stats{grid-template-columns:repeat(2,1fr)}}.compose-page{max-width:760px;margin:24px auto;padding:0 16px}.compose-page .modal-card{box-shadow:none;border:1px solid var(--border, #e8eaed)}.thread-msg{border:1px solid #e8eaed;border-radius:10px;padding:12px 14px;margin:12px 0}.thread-msg.inbound{border-left:4px solid var(--blue, #1c7ed6);background:#fff}.thread-msg.outbound{border-left:4px solid var(--brand, #f57820);background:#fffaf5}.thread-msg.internal{border-left:4px solid #f0c000;background:#fffdf2}.thread-msg-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.thread-msg-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.thread-who{font-weight:700;color:#1a1d24}.thread-dir{font-size:12px;font-weight:600;color:#8a909b}.thread-msg.inbound .thread-dir{color:var(--blue, #1c7ed6)}.thread-msg.outbound .thread-dir{color:var(--brand, #d9660f)}.thread-time{font-size:12px;color:#8a909b}.email-avatar.sm{width:30px;height:30px;font-size:13px}.thread-event{text-align:center;font-size:12px;color:#98a0ad;margin:10px 0}.thread-event:before,.thread-event:after{content:"·";margin:0 8px;color:#d0d4da}@media (max-width: 640px){.page-head{flex-wrap:wrap;gap:8px 10px}.page-head h1{font-size:19px;min-width:0;word-break:break-word}.page-head .btn,.page-head .btn.sm{white-space:nowrap}.tk-row{flex-wrap:wrap;row-gap:10px;padding:12px 12px 12px 16px}.tk-controls{width:100%;flex-wrap:wrap;gap:6px}.tk-controls select{flex:1 1 46%;min-width:0}.tk-head{flex-wrap:wrap;row-gap:6px}.tk-bulkbar{flex-wrap:wrap;row-gap:8px}.tk-bulkbar .inline-select,.tk-bulkbar .btn{flex:1 1 auto}.tk-pagination{flex-wrap:wrap;row-gap:8px;justify-content:center}.row{flex-direction:column;gap:0}.row>*{width:100%}.filters{gap:8px}.filters label{flex:1 1 100%}.filters select,.filters input{width:100%;box-sizing:border-box}.modal-overlay{padding:14px 8px;align-items:flex-start}.modal-card{width:100%}.modal-body,.modal-head,.modal-foot{padding-left:14px;padding-right:14px}.compose-page{margin:12px auto;padding:0 8px}.thread-msg{padding:10px 12px}.thread-msg-meta{font-size:12px}.email-html,.email-body{max-height:none}.email-html img,.thread-msg img,.composer-editor img{max-width:100%!important;height:auto}.email-html table,.thread-msg table{display:block;max-width:100%;overflow-x:auto}.panel-body{padding:14px}}@media (max-width: 480px){.content{padding:14px 10px 44px}.stats{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}.stat{padding:10px 12px}.stat .num{font-size:22px}.stat .lbl{font-size:11px}.tk-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tk-controls select{width:100%}.page-head h1{font-size:18px}.btn{padding:8px 12px}}
