:root{--ink:#10233f;--muted:#6d7d92;--faint:#98a5b5;--line:#e4e9f0;--surface:#fff;--canvas:#f4f6f9;--navy:#0b1729;--green:#13b981;--green-dark:#087d59;--green-soft:#e8f8f2;--orange:#ed8a32;--orange-soft:#fff3e6;--blue:#3f6cf4;--blue-soft:#edf2ff;--shadow:0 16px 40px rgba(22,37,61,.08);--font:"DM Sans","Noto Sans TC",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--canvas);color:var(--ink);font-family:var(--font)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:228px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:25px 17px 18px;display:flex;flex-direction:column;background:var(--navy);color:#d9e3ef}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 25px;color:#fff;text-decoration:none}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:linear-gradient(145deg,#22d88b,#0aa76d);font-size:20px;font-weight:800;box-shadow:0 8px 22px rgba(28,210,133,.2)}.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{margin-top:2px;color:#7589a5;font-size:10px}.main-nav{display:grid;gap:5px}.nav-item{width:100%;min-height:43px;display:grid;grid-template-columns:25px 1fr auto;align-items:center;border:0;border-radius:10px;padding:0 11px;color:#8598b2;background:transparent;text-align:left;font-size:13px;font-weight:600;transition:.2s}.nav-item:hover{color:#fff;background:rgba(255,255,255,.055)}.nav-item.active{color:#fff;background:#172a44;box-shadow:inset 3px 0 var(--green)}.nav-icon{font-size:17px;color:#8092aa}.nav-item.active .nav-icon{color:var(--green)}.nav-item b{min-width:21px;padding:3px 6px;border-radius:8px;background:#203752;color:#a9b9ca;font-size:10px;text-align:center}.nav-item b.warm{background:#563927;color:#ffbb75}.sidebar-label{margin:29px 11px 10px;color:#536881;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.workspace-card{border:1px solid #213653;border-radius:11px;padding:12px;background:rgba(255,255,255,.025);color:#fff;text-align:left}.workspace-card strong,.workspace-card small{display:block}.workspace-card strong{margin-top:9px;font-size:12px}.workspace-card small{margin-top:5px;color:#7589a4;font-size:9px}.country-pair{color:#aebed0;font-size:9px;font-weight:700;letter-spacing:.08em}.country-pair i{padding:0 5px;color:var(--green);font-style:normal}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(19,185,129,.12)}.sidebar-spacer{flex:1}.coverage-card{display:flex;gap:10px;margin:0 2px 12px;border:1px solid #253a56;border-radius:12px;padding:12px;background:linear-gradient(145deg,#172b45,#102039)}.coverage-icon{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:50%;border:1px solid #3f5773;color:var(--green);font-size:10px;font-weight:700}.coverage-card strong,.coverage-card small{display:block}.coverage-card strong{color:#dce5ee;font-size:10px}.coverage-card small{margin-top:4px;color:#71849d;font-size:8px;line-height:1.5}.profile-card{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;width:100%;border:0;border-top:1px solid #1e3048;padding:16px 4px 0;background:transparent;color:#fff;text-align:left}.profile-card strong,.profile-card small{display:block}.profile-card strong{font-size:10px}.profile-card small{margin-top:2px;color:#68809c;font-size:8px}.chevron{color:#607792}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#fff;font-size:10px;font-weight:700}.avatar-green{background:linear-gradient(145deg,#25c98b,#0b9264)}.avatar-blue{background:linear-gradient(145deg,#6384ed,#3855bd)}.avatar-orange{background:linear-gradient(145deg,#f4a657,#ce6720)}.avatar-purple{background:linear-gradient(145deg,#9c7be6,#6640c2)}.avatar-slate{background:#617083}
.main-area{min-width:0}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 29px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.eyebrow{margin:0 0 5px;color:#8291a4;font-size:8px;font-weight:700;letter-spacing:.14em}h1{margin:0;font-size:20px;letter-spacing:-.02em}.topbar-actions{display:flex;align-items:center;gap:14px}.service-state{display:flex;align-items:center;gap:9px;padding-right:15px;border-right:1px solid var(--line)}.service-state strong,.service-state small{display:block}.service-state strong{font-size:10px}.service-state small{color:var(--muted);font-size:8px;margin-top:2px}.icon-button{position:relative;width:35px;height:35px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#617086}.notification-dot{position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:#f05a5a}.primary-button,.secondary-button{min-height:38px;border-radius:9px;padding:0 14px;font-size:11px;font-weight:700;transition:.18s}.primary-button{border:0;background:var(--green);color:#fff;box-shadow:0 7px 18px rgba(19,185,129,.18)}.primary-button:hover{background:#0cae77;transform:translateY(-1px)}.secondary-button{border:1px solid var(--line);background:#fff;color:var(--ink)}.view-root{padding:22px 28px 28px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:17px}.metric{position:relative;overflow:hidden;min-height:96px;border:1px solid var(--line);border-radius:14px;padding:15px 17px;background:var(--surface);box-shadow:0 3px 16px rgba(34,49,72,.03)}.metric:after{content:"";position:absolute;right:-22px;bottom:-35px;width:88px;height:88px;border-radius:50%;background:var(--metric-halo,#edf8f4)}.metric-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:9px;font-weight:600}.metric-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--metric-soft,var(--green-soft));color:var(--metric-color,var(--green));font-weight:700}.metric-value{margin-top:7px;font-size:23px;font-weight:700;letter-spacing:-.04em}.metric-value small{margin-left:4px;color:var(--muted);font-size:9px;font-weight:500}.metric-note{margin-top:3px;color:var(--muted);font-size:8px}.metric-note.good{color:var(--green-dark)}
.desk-grid{display:grid;grid-template-columns:247px minmax(380px,1fr) 264px;min-height:610px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.case-panel,.detail-panel{min-width:0;background:#fbfcfd}.case-panel{border-right:1px solid var(--line)}.detail-panel{border-left:1px solid var(--line)}.panel-head{min-height:68px;padding:14px 15px;border-bottom:1px solid var(--line);background:#fff}.panel-title-row{display:flex;justify-content:space-between;align-items:center}.panel-head h2{margin:0;font-size:13px}.panel-head small{color:var(--muted);font-size:8px}.search-box{display:flex;align-items:center;gap:7px;margin-top:10px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:#f8fafc}.search-box span{color:#8795a7;font-size:11px}.search-box input{width:100%;height:28px;border:0;outline:0;background:transparent;color:var(--ink);font-size:9px}.case-filters{display:flex;gap:5px;padding:9px 10px;border-bottom:1px solid var(--line);background:#fff}.filter-pill{border:0;border-radius:7px;padding:5px 8px;background:transparent;color:var(--muted);font-size:8px;font-weight:600}.filter-pill.active{background:var(--green-soft);color:var(--green-dark)}.case-list{max-height:531px;overflow:auto}.case-item{position:relative;width:100%;display:grid;grid-template-columns:34px 1fr;gap:9px;border:0;border-bottom:1px solid #edf0f4;padding:12px 11px;background:#fff;color:inherit;text-align:left}.case-item:hover{background:#f8fbfa}.case-item.active{background:#eef9f5}.case-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}.case-top{display:flex;align-items:center;gap:6px}.case-top strong{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.case-top time{color:var(--faint);font-size:7px}.case-subject,.case-preview{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.case-preview{margin-top:4px;color:var(--faint);font-size:8px}.case-meta{display:flex;align-items:center;gap:5px;margin-top:7px}.badge{display:inline-flex;align-items:center;border-radius:5px;padding:3px 5px;background:#f0f3f6;color:#68788c;font-size:7px;font-style:normal;font-weight:700}.badge.green{background:var(--green-soft);color:var(--green-dark)}.badge.orange{background:var(--orange-soft);color:#bd681f}.badge.blue{background:var(--blue-soft);color:#4f66bd}.unread{display:grid;place-items:center;width:15px;height:15px;margin-left:auto;border-radius:50%;background:var(--green);color:#fff;font-size:7px;font-style:normal}
.conversation{display:flex;min-width:0;flex-direction:column;background:#f7f9fb}.conversation-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid var(--line);background:#fff}.contact-heading{display:flex;align-items:center;gap:10px}.contact-heading h2{margin:0;font-size:12px}.contact-heading p{display:flex;align-items:center;gap:5px;margin:3px 0 0;color:var(--muted);font-size:8px}.line-badge{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:5px;background:#06c755;color:#fff;font-size:7px;font-weight:800}.conversation-actions{display:flex;gap:6px}.mini-button{height:29px;border:1px solid var(--line);border-radius:8px;padding:0 9px;background:#fff;color:#57687c;font-size:8px;font-weight:600}.mini-button.emphasis{border-color:#bde6d7;background:#effaf6;color:var(--green-dark)}.messages{flex:1;height:388px;overflow:auto;padding:18px 20px 14px}.day-divider{display:flex;align-items:center;gap:9px;margin:3px 0 15px;color:#9aa7b7;font-size:7px}.day-divider:before,.day-divider:after{content:"";flex:1;height:1px;background:#e4e8ed}.message-row{display:flex;align-items:flex-end;gap:7px;margin:10px 0}.message-row.agent{justify-content:flex-end}.message-row.system{justify-content:center}.message-wrap{max-width:72%}.message-sender{margin:0 0 4px 3px;color:#8795a7;font-size:7px}.bubble{border-radius:4px 13px 13px 13px;padding:9px 11px;background:#fff;color:#35465d;box-shadow:0 2px 7px rgba(34,51,75,.06);font-size:9px;line-height:1.6}.agent .bubble{border-radius:13px 4px 13px 13px;background:#dff6ed;color:#245446;box-shadow:none}.note .bubble{border:1px dashed #d8c394;background:#fff9e9;color:#68572d}.message-time{display:block;margin-top:4px;color:#9aa7b5;font-size:7px;text-align:right}.system-bubble{border-radius:20px;padding:5px 10px;background:#e9eef3;color:#788798;font-size:7px}
.handoff-banner{display:flex;align-items:center;gap:9px;margin:13px 8px;border:1px solid #dbe5ed;border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.8)}.handoff-banner>span{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--blue-soft);color:var(--blue)}.handoff-banner strong,.handoff-banner small{display:block}.handoff-banner strong{font-size:8px}.handoff-banner small{margin-top:2px;color:var(--muted);font-size:7px}.composer{border-top:1px solid var(--line);padding:10px 14px 12px;background:#fff}.quick-replies{display:flex;gap:6px;margin-bottom:8px;overflow:auto}.quick-reply{white-space:nowrap;border:1px solid var(--line);border-radius:20px;padding:5px 8px;background:#fff;color:#5d6d81;font-size:7px}.quick-reply:hover{border-color:#9ed9c4;color:var(--green-dark)}.compose-box{border:1px solid var(--line);border-radius:10px;padding:7px 8px;background:#fbfcfd}.compose-box textarea{width:100%;height:43px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font-size:9px}.compose-tools{display:flex;align-items:center;justify-content:space-between}.tool-buttons{display:flex;gap:3px}.tool-button{width:25px;height:25px;border:0;border-radius:7px;background:transparent;color:#8290a2}.send-button{min-width:65px;height:27px;border:0;border-radius:7px;background:var(--green);color:#fff;font-size:8px;font-weight:700}
.detail-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line);background:#fff}.detail-head h2{margin:0;font-size:12px}.detail-head button{border:0;background:transparent;color:#8a98a8}.detail-content{height:541px;overflow:auto;padding:14px}.ticket-code{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid var(--line)}.ticket-code small{display:block;color:var(--muted);font-size:7px}.ticket-code strong{display:block;margin-top:3px;font-size:11px}.status-badge{border-radius:7px;padding:5px 7px;background:var(--green-soft);color:var(--green-dark);font-size:7px;font-weight:700}.detail-section{padding:13px 0;border-bottom:1px solid var(--line)}.section-caption{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#7b8a9d;font-size:7px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.section-caption button{border:0;background:transparent;color:var(--green-dark);font-size:7px}.route-card{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fff}.route-places{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center}.route-place:last-child{text-align:right}.route-place strong,.route-place small{display:block}.route-place strong{font-size:11px}.route-place small{color:var(--muted);font-size:7px}.route-line{position:relative;height:1px;background:#bdd7ce}.route-line:before,.route-line:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--green)}.route-line:before{left:0}.route-line:after{right:0}.route-line span{position:absolute;left:50%;top:-9px;transform:translateX(-50%);padding:0 3px;background:#fff;color:var(--green-dark);font-size:9px}.route-service{display:flex;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #edf0f3;color:var(--muted);font-size:7px}.route-service strong{color:var(--ink)}.info-list{display:grid;gap:9px}.info-row{display:grid;grid-template-columns:68px 1fr;gap:8px;font-size:8px}.info-row span{color:var(--muted)}.info-row strong{font-weight:600;line-height:1.45}.assignee{display:flex;align-items:center;gap:8px}.assignee strong,.assignee small{display:block}.assignee strong{font-size:9px}.assignee small{color:var(--muted);font-size:7px}.sla-bar{height:5px;overflow:hidden;border-radius:5px;background:#e9edf1}.sla-bar span{display:block;width:76%;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--green),#77dbaa)}.sla-copy{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:7px}.sla-copy strong{color:var(--green-dark)}.handoff-card{border:1px solid #dfe7f4;border-radius:10px;padding:10px;background:#f5f8ff}.handoff-card strong{display:block;color:#344e87;font-size:8px}.handoff-card p{margin:5px 0 0;color:#68799b;font-size:7px;line-height:1.5}
.board{min-height:610px;border:1px solid var(--line);border-radius:15px;padding:20px;background:#fff;box-shadow:var(--shadow)}.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.board-head h2{margin:0;font-size:15px}.board-head p{margin:4px 0 0;color:var(--muted);font-size:9px}.handoff-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.kanban-column{border-radius:12px;padding:12px;background:#f5f7fa}.kanban-title{display:flex;justify-content:space-between;margin-bottom:10px;font-size:9px;font-weight:700}.kanban-title b{color:var(--muted)}.kanban-card{margin-bottom:9px;border:1px solid var(--line);border-radius:10px;padding:11px;background:#fff}.kanban-card h3{margin:0;font-size:10px}.kanban-card p{margin:6px 0 9px;color:var(--muted);font-size:8px;line-height:1.5}.kanban-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:7px}.contact-table{width:100%;border-collapse:collapse;font-size:9px}.contact-table th{padding:10px;border-bottom:1px solid var(--line);color:var(--muted);text-align:left;font-size:7px;letter-spacing:.08em;text-transform:uppercase}.contact-table td{padding:12px 10px;border-bottom:1px solid #eef1f4}.table-person{display:flex;align-items:center;gap:8px}.table-person strong,.table-person small{display:block}.table-person small{color:var(--muted);font-size:7px}
.insight-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:14px}.chart-card,.breakdown-card{border:1px solid var(--line);border-radius:13px;padding:16px}.chart-card h3,.breakdown-card h3{margin:0;font-size:11px}.chart-sub{color:var(--muted);font-size:8px}.bar-chart{height:260px;display:flex;align-items:flex-end;gap:12px;padding-top:25px;border-bottom:1px solid var(--line)}.bar-group{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;height:100%;position:relative}.bar{width:14px;min-height:8px;border-radius:4px 4px 0 0;background:var(--green)}.bar.secondary{background:#d8e2ea}.bar-label{position:absolute;bottom:-20px;color:var(--muted);font-size:7px}.legend{display:flex;gap:14px;margin-top:28px;color:var(--muted);font-size:7px}.legend i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:2px;background:var(--green)}.legend span:last-child i{background:#d8e2ea}.breakdown-list{display:grid;gap:16px;margin-top:19px}.breakdown-row{font-size:8px}.breakdown-top{display:flex;justify-content:space-between;margin-bottom:6px}.breakdown-track{height:7px;border-radius:5px;background:#eef1f4}.breakdown-track span{display:block;height:100%;border-radius:5px;background:var(--green)}
.modal-backdrop[hidden]{display:none}.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(6,17,32,.56);backdrop-filter:blur(5px)}.modal{width:min(520px,100%);border-radius:16px;padding:20px;background:#fff;box-shadow:0 30px 80px rgba(5,16,30,.25)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.modal h2{margin:0;font-size:18px}.close-button{border:0;background:transparent;color:#8794a5;font-size:24px}.modal form{display:grid;gap:13px;margin-top:18px}.modal label{display:grid;gap:6px;color:#405169;font-size:9px;font-weight:700}.modal input,.modal select,.modal textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;outline:0;color:var(--ink);background:#fbfcfd;font-size:10px}.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:#83cfb4;box-shadow:0 0 0 3px rgba(19,185,129,.08)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-note{display:flex;gap:8px;border-radius:9px;padding:9px 10px;background:var(--blue-soft);color:#5e719c;font-size:8px;line-height:1.5}.modal-note span{display:grid;place-items:center;flex:0 0 18px;height:18px;border-radius:50%;background:#d9e3ff;color:var(--blue);font-weight:700}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.toast{position:fixed;z-index:30;right:22px;bottom:22px;max-width:320px;transform:translateY(20px);opacity:0;border-radius:10px;padding:11px 14px;background:var(--navy);color:#fff;box-shadow:var(--shadow);font-size:9px;pointer-events:none;transition:.25s}.toast.show{transform:translateY(0);opacity:1}.empty-state{padding:40px 20px;color:var(--muted);text-align:center;font-size:9px}
@media(max-width:1120px){.desk-grid{grid-template-columns:220px minmax(390px,1fr)}.detail-panel{display:none}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.app-shell{grid-template-columns:64px minmax(0,1fr)}.sidebar{padding:20px 8px}.brand{justify-content:center;padding:0 0 24px}.brand>span:last-child,.nav-item span:nth-child(2),.nav-item b,.sidebar-label,.workspace-card,.coverage-card,.profile-card>span:not(.avatar){display:none}.nav-item{display:grid;grid-template-columns:1fr;place-items:center;padding:0}.profile-card{display:flex;justify-content:center}.topbar{height:76px;padding:0 16px}.service-state,.icon-button{display:none}.view-root{padding:14px}.desk-grid{grid-template-columns:190px minmax(340px,1fr);overflow-x:auto}.handoff-columns,.insight-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}
@media(max-width:560px){.metrics{grid-template-columns:1fr 1fr;gap:8px}.metric{min-height:84px;padding:12px}.metric-value{font-size:19px}.desk-grid{display:block}.case-panel{border-right:0}.conversation{display:none}.case-list{max-height:none}.topbar-actions .primary-button{padding:0 10px}}