:root{
  --bg:#f3f7fa;--paper:#fff;--ink:#0c1f2b;--muted:#687b86;--line:#dfe8ed;
  --teal:#08798c;--teal2:#10a1a3;--orange:#f47c20;--blue:#165aa6;--red:#dd4b59;--green:#1b9a6b;
  --shadow:0 18px 50px rgba(22,53,68,.08);--shadow2:0 24px 70px rgba(20,44,58,.13);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}svg{display:block}.app-shell{min-height:100vh;padding-bottom:110px;background:
radial-gradient(circle at 4% 8%,rgba(15,161,163,.12),transparent 22%),
radial-gradient(circle at 95% 16%,rgba(244,124,32,.09),transparent 20%),
linear-gradient(180deg,#f7fbfd 0,#eef4f7 48%,#f7fafc 100%)}
.topbar{position:sticky;top:0;z-index:70;min-height:74px;padding:0 max(28px,4vw);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;background:rgba(255,255,255,.73);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(218,230,236,.82)}
.brand{display:flex;align-items:baseline;gap:7px;white-space:nowrap}.brand-bni{font-size:19px;font-weight:900;color:var(--orange);letter-spacing:-.04em}.brand-xpora{font-size:23px;font-weight:900;font-style:italic;color:var(--teal);letter-spacing:-.05em}.brand-sub{font-size:10px;color:#78909b;margin-left:4px;font-weight:700}.topbar-center,.topbar-actions{display:flex;align-items:center;gap:9px}.topbar-actions{justify-content:flex-end}.live-pill,.shift-pill{height:34px;padding:0 12px;border-radius:999px;display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;border:1px solid #dce8ec;background:rgba(255,255,255,.76)}.live-pill i{width:7px;height:7px;border-radius:50%;background:#29b877;box-shadow:0 0 0 5px rgba(41,184,119,.10);animation:pulse 1.8s infinite}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(41,184,119,0)}}.shift-pill{color:#66808b}.round-btn{width:38px;height:38px;border-radius:13px;border:1px solid #dbe6eb;background:rgba(255,255,255,.84);color:#536a75;display:grid;place-items:center}.round-btn:hover{color:var(--teal);border-color:#b9d8df;transform:translateY(-1px)}.has-dot{position:relative}.has-dot:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);right:8px;top:7px}.admin-chip{display:flex;align-items:center;gap:9px;padding-left:4px}.avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#0b7084,#153c68);color:#fff;display:grid;place-items:center;font-weight:900}.admin-chip b,.admin-chip small{display:block}.admin-chip b{font-size:11px}.admin-chip small{font-size:9px;color:#78909b;margin-top:1px}
main{width:min(1380px,calc(100% - 56px));margin:auto}.section{margin:26px 0}.hero-section{min-height:330px;padding:44px;border-radius:34px;display:grid;grid-template-columns:1.3fr .7fr;gap:42px;align-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,250,251,.9));border:1px solid rgba(214,229,235,.95);box-shadow:var(--shadow)}.hero-section:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-70px;background:radial-gradient(circle,rgba(22,142,154,.18),rgba(22,142,154,0) 68%);filter:blur(8px)}.hero-section:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;left:35%;bottom:-150px;background:radial-gradient(circle,rgba(244,124,32,.13),rgba(244,124,32,0) 70%)}.hero-copy,.hero-health{position:relative;z-index:2}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:9px;color:var(--teal)}.hero-copy h1{font-size:clamp(36px,4.6vw,66px);line-height:.98;letter-spacing:-.055em;max-width:880px;margin:12px 0 18px}.hero-copy p{max-width:720px;color:#5e737e;font-size:14px}.hero-actions{display:flex;gap:10px;margin-top:26px}.primary-btn,.secondary-btn{border-radius:15px;height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:850;font-size:11px;border:0}.primary-btn{background:linear-gradient(135deg,#08798c,#0e9a9e);color:#fff;box-shadow:0 12px 28px rgba(8,121,140,.22)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(8,121,140,.28)}.secondary-btn{background:#fff;color:#314a55;border:1px solid #d9e6eb}.secondary-btn:hover{color:var(--teal);border-color:#b7d6dd}.hero-health{justify-self:end;width:min(100%,360px);padding:26px;border-radius:28px;background:rgba(10,35,48,.94);color:#fff;box-shadow:0 28px 60px rgba(10,35,48,.18)}.health-top{display:flex;align-items:center;justify-content:space-between;font-size:10px}.health-top span{display:flex;align-items:center;gap:8px;color:#bdd2d8}.health-top span i{width:7px;height:7px;border-radius:50%;background:#4bd89c}.health-top b{font-size:10px;color:#7ee4ba}.health-score{display:flex;align-items:flex-end;margin:24px 0 20px}.health-score strong{font-size:72px;line-height:.85;letter-spacing:-.08em}.health-score span{font-size:14px;color:#91adb7;margin-left:5px}.health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.health-grid div{padding:12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07)}.health-grid b,.health-grid span{display:block}.health-grid b{font-size:18px}.health-grid span{font-size:8px;color:#92adb7;margin-top:3px}
.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric-strip article{padding:22px 22px 20px;border-radius:22px;background:rgba(255,255,255,.84);border:1px solid rgba(218,229,235,.94);box-shadow:0 10px 28px rgba(29,55,69,.045)}.metric-label{display:block;color:#6d818b;font-size:10px;font-weight:800}.metric-strip strong{display:block;font-size:36px;letter-spacing:-.05em;margin:9px 0 8px}.metric-strip small{display:flex;align-items:center;gap:6px;color:#82939a;font-size:9px}.trend{font-style:normal;padding:4px 6px;border-radius:7px;font-size:8px}.trend.up{background:#fff1e6;color:#d86610}.trend.neutral{background:#eaf5f7;color:#08798c}.trend.warn{background:#ffecee;color:#c8414e}.trend.good{background:#eaf8f1;color:#16845d}
.split-section,.airy-card,.analytics-section,.history-section{padding:34px;border-radius:30px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(216,228,234,.96);box-shadow:var(--shadow)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:26px}.section-head.compact{align-items:center}.section-head h2{font-size:clamp(27px,3vw,42px);line-height:1.02;letter-spacing:-.045em;margin:7px 0 8px}.section-head p{margin:0;color:#6b7e87;max-width:720px;font-size:12px}.section-tools{display:flex;gap:8px;flex:0 0 auto}.search-box{width:300px;height:42px;border-radius:14px;background:#f7fafb;border:1px solid #dce7eb;display:flex;align-items:center;gap:8px;padding:0 12px;color:#83959d}.search-box input{border:0;outline:0;background:transparent;width:100%;font-size:10px;color:#1b3540}.icon-soft{width:42px;height:42px;border:1px solid #dce7eb;background:#f8fafb;border-radius:14px;color:#607985;display:grid;place-items:center}.queue-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.queue-panel,.priority-panel{border-radius:24px;background:#f7fafb;border:1px solid #e1e9ed}.queue-panel{padding:16px}.segmented{display:flex;gap:5px;background:#edf3f5;padding:5px;border-radius:14px;width:max-content;margin-bottom:14px}.segmented button,.agent-filter button,.range-pills button{border:0;background:transparent;color:#6b808a;border-radius:10px;height:32px;padding:0 12px;font-size:9px;font-weight:850}.segmented button.active,.agent-filter button.active,.range-pills button.active{background:#fff;color:#0b6f81;box-shadow:0 5px 14px rgba(23,58,74,.08)}.queue-list{display:grid;gap:7px;max-height:590px;overflow:auto;padding-right:3px}.queue-item{display:grid;grid-template-columns:38px minmax(0,1.5fr) minmax(120px,.75fr) 92px 94px 26px;gap:10px;align-items:center;padding:13px;border-radius:16px;background:#fff;border:1px solid #e2eaed;transition:.17s ease;cursor:pointer}.queue-item:hover{transform:translateX(3px);border-color:#badbe0;box-shadow:0 8px 18px rgba(19,55,69,.06)}.queue-icon{width:36px;height:36px;border-radius:12px;background:#eaf6f7;color:#08798c;display:grid;place-items:center;font-size:8px;font-weight:950;letter-spacing:-.02em}.queue-main b,.queue-main small,.queue-meta b,.queue-meta small{display:block}.queue-main b{font-size:11px}.queue-main small{font-size:9px;color:#80929a;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-meta b{font-size:10px}.queue-meta small{font-size:8px;color:#85949b;margin-top:2px}.status-pill,.priority-pill{display:inline-flex;width:max-content;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;font-size:8px;font-weight:900}.status-pill.pending{background:#fff3e9;color:#d46d1b}.status-pill.open{background:#e9f6f6;color:#08798c}.status-pill.resolved{background:#edf8f2;color:#178159}.priority-pill.urgent{background:#ffeaed;color:#bd3b49}.priority-pill.high{background:#fff4e2;color:#c67511}.priority-pill.normal{background:#edf3f5;color:#6c8089}.sla-time{font-size:9px;font-weight:850;color:#4e6873}.sla-time.risk{color:#c63f4d}.row-arrow{color:#9aabb2}.priority-panel{padding:20px;align-self:start}.mini-head,.subhead,.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.mini-head h3,.subhead h3{font-size:15px;margin:4px 0 0}.pulse-dot{width:9px;height:9px;border-radius:50%;background:#e64d5c;box-shadow:0 0 0 6px rgba(230,77,92,.09);animation:pulseRed 1.7s infinite}@keyframes pulseRed{50%{box-shadow:0 0 0 12px rgba(230,77,92,0)}}.priority-list{display:grid;gap:8px;margin:18px 0}.priority-card{padding:13px;border-radius:16px;background:#fff;border:1px solid #e0e9ed}.priority-card header{display:flex;justify-content:space-between;gap:10px}.priority-card b{font-size:10px}.priority-card p{font-size:9px;color:#72868f;margin:5px 0 8px}.priority-card footer{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#8a9ba3}.capacity-card{padding:15px;border-radius:18px;background:#0d3040;color:#fff}.capacity-card span,.capacity-card small{display:block}.capacity-card span{font-size:9px;color:#9eb5be}.capacity-card strong{display:block;font-size:28px;margin:5px 0}.capacity-card small{font-size:8px;color:#9fb4bc;margin-top:8px}.progress{height:7px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#24c1ad,#7be0b5)}
.conversation-ribbon{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.conversation-card{padding:17px;border-radius:20px;background:#f8fafb;border:1px solid #dfe9ed;cursor:pointer;transition:.17s}.conversation-card:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 28px rgba(22,52,66,.07)}.conversation-top{display:flex;justify-content:space-between;align-items:center}.channel-dot{width:9px;height:9px;border-radius:50%}.channel-dot.webchat{background:#0a9fa0}.channel-dot.whatsapp{background:#26b76f}.channel-dot.email{background:#4e79d9}.conversation-card h3{font-size:12px;margin:14px 0 5px}.conversation-card p{font-size:9px;color:#73868f;margin:0;min-height:42px}.conversation-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:#7f929a;font-size:8px}
.people-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px}.supervisor-column,.agent-column{padding:20px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid #dae6eb}.subhead span{font-size:9px;color:#82959d}.supervisor-grid{display:grid;gap:9px;margin-top:15px}.supervisor-card{padding:15px;border-radius:18px;background:#f7fafb;border:1px solid #e1eaed}.supervisor-card header{display:flex;align-items:center;gap:10px}.person-avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900;background:linear-gradient(135deg,#0e8291,#1a4f80)}.supervisor-card b,.supervisor-card small{display:block}.supervisor-card b{font-size:10px}.supervisor-card small{font-size:8px;color:#80939b}.supervisor-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.supervisor-stats div{padding:8px;border-radius:11px;background:#fff}.supervisor-stats b{font-size:13px}.supervisor-stats span{font-size:7px;color:#8ca0a7}.agent-filter{display:flex;gap:4px;padding:4px;background:#eef3f5;border-radius:11px}.agent-filter button{height:28px;padding:0 9px}.agent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:15px;max-height:630px;overflow:auto;padding-right:2px}.agent-card{padding:14px;border-radius:17px;background:#f8fafb;border:1px solid #e1eaee;transition:.15s}.agent-card:hover{background:#fff;box-shadow:0 10px 20px rgba(21,54,69,.06);transform:translateY(-2px)}.agent-head{display:flex;align-items:center;gap:9px}.agent-head .person-avatar{width:34px;height:34px;border-radius:12px}.agent-name{min-width:0;flex:1}.agent-name b,.agent-name small{display:block}.agent-name b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agent-name small{font-size:7px;color:#87979e}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.online,.legend i.online{background:#27b87b}.status-dot.busy,.legend i.busy{background:#f3a43a}.status-dot.break,.legend i.break{background:#7188d5}.status-dot.offline,.legend i.offline{background:#aebcc2}.agent-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:11px}.agent-metrics div{padding:7px 5px;border-radius:10px;background:#fff;text-align:center}.agent-metrics b,.agent-metrics span{display:block}.agent-metrics b{font-size:10px}.agent-metrics span{font-size:6px;color:#8b9ba2;margin-top:2px}.legend{display:flex;gap:12px;flex-wrap:wrap}.legend span{font-size:8px;color:#73868f;display:flex;align-items:center;gap:5px}.legend i{width:7px;height:7px;border-radius:50%}
.range-pills{display:flex;gap:4px;padding:4px;border-radius:12px;background:#edf3f5}.analytics-grid{display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:12px}.chart-card{min-height:250px;padding:20px;border-radius:22px;background:#f8fafb;border:1px solid #dfe9ed}.chart-card.wide{grid-column:auto}.card-head span{font-size:9px;color:#7c9098}.card-head strong{display:block;font-size:24px;letter-spacing:-.04em;margin-top:4px}.delta{padding:5px 7px;border-radius:8px;background:#fff0e5;color:#d86c17;font-weight:900;font-size:8px}.delta.good{background:#eaf8f1;color:#17835d}.bar-chart{height:130px;display:flex;align-items:flex-end;gap:10px;margin-top:25px}.bar-chart i{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#0fa2a2,#08798c);opacity:.92;min-height:18px;transition:.3s}.bar-chart i:hover{opacity:1;transform:translateY(-3px)}.chart-axis{display:flex;justify-content:space-between;color:#8ca0a8;font-size:7px;margin-top:7px}.radial{display:flex;align-items:center;gap:18px;margin-top:30px}.radial-ring{--pct:80;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#0d9398 calc(var(--pct)*1%),#e5edef 0);position:relative}.radial-ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#f8fafb}.radial-ring span{position:relative;z-index:2;font-size:18px;font-weight:900}.radial p{font-size:9px;color:#748992;max-width:110px}.channel-list{display:grid;gap:14px;margin-top:34px}.channel-list div{display:flex;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #e2eaed}.channel-list span{display:flex;align-items:center;gap:7px;font-size:9px;color:#6f838d}.channel-list i{width:8px;height:8px;border-radius:50%}.channel-list i.teal{background:#0e9c9c}.channel-list i.orange{background:#f48128}.channel-list i.blue{background:#4d79d7}.channel-list b{font-size:10px}.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:30px}.quality-grid div{padding:14px;border-radius:15px;background:#fff;border:1px solid #e2eaed}.quality-grid b,.quality-grid span{display:block}.quality-grid b{font-size:18px}.quality-grid span{font-size:7px;color:#82949c;margin-top:4px}
.history-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.history-table-wrap{overflow:auto;border:1px solid #e0e9ed;border-radius:18px;background:#fff}.history-table-wrap table{width:100%;border-collapse:collapse;min-width:780px}.history-table-wrap th,.history-table-wrap td{text-align:left;padding:12px 13px;border-bottom:1px solid #edf2f4}.history-table-wrap th{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#81939b;background:#f8fafb}.history-table-wrap td{font-size:9px;color:#506872}.history-table-wrap td b{color:#15313e}.activity-feed{padding:18px;border-radius:20px;background:#0d3040;color:#fff}.activity-feed .subhead span{color:#91abb5}.activity-feed>div:last-child{display:grid;gap:14px;margin-top:17px}.activity-item{display:grid;grid-template-columns:26px 1fr;gap:10px}.activity-icon{width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#63d3c0}.activity-item b,.activity-item small{display:block}.activity-item b{font-size:8px;font-weight:700;line-height:1.45;color:#d9e5e9}.activity-item small{font-size:7px;color:#7897a2;margin-top:3px}
.bottom-nav{position:fixed;left:50%;bottom:max(15px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;width:auto;max-width:calc(100vw - 24px);border-radius:999px;background:rgba(8,23,36,.78);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 48px rgba(5,17,28,.25)}.bottom-nav a{position:relative;width:50px;height:50px;flex:0 0 50px;border-radius:999px;display:grid;place-items:center;color:#91a7b1;transition:.18s ease}.bottom-nav a:hover{color:#fff;transform:translateY(-4px) scale(1.04);background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.08));box-shadow:0 12px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.13)}.bottom-nav a.active{color:#fff;background:linear-gradient(145deg,rgba(12,148,151,.88),rgba(9,100,121,.92));box-shadow:0 12px 26px rgba(3,93,108,.3),inset 0 1px 0 rgba(255,255,255,.16)}.bottom-nav a.active:after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:13px;height:2px;border-radius:99px;background:#fff}.nav-badge{position:absolute;right:-2px;top:-4px;min-width:17px;height:17px;border-radius:999px;padding:0 4px;background:var(--orange);color:#fff;border:2px solid #172938;font-size:7px;font-weight:900;display:grid;place-items:center}
.drawer-backdrop{position:fixed;inset:0;z-index:120;background:rgba(7,21,31,.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:flex-end}.drawer-backdrop[hidden]{display:none}.ticket-drawer{width:min(980px,92vw);height:100%;background:#f5f8fa;box-shadow:-30px 0 70px rgba(9,28,39,.2);display:flex;flex-direction:column}.ticket-drawer>header{min-height:95px;padding:20px 24px;background:#fff;border-bottom:1px solid #dfe8ed;display:flex;align-items:center;justify-content:space-between;gap:18px}.ticket-drawer h2{font-size:22px;margin:4px 0 3px}.ticket-drawer header p{font-size:9px;color:#778b94;margin:0}.close-btn{width:38px;height:38px;border-radius:13px;border:1px solid #dce6eb;background:#f8fafb;font-size:24px;color:#6c808a}.drawer-body{display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:0;flex:1}.chat-pane{display:flex;flex-direction:column;min-height:0;padding:20px}.message-list{flex:1;overflow:auto;padding:8px 8px 18px;display:flex;flex-direction:column;gap:10px}.msg{max-width:72%;padding:11px 13px;border-radius:16px;background:#fff;border:1px solid #e1e9ed;align-self:flex-start}.msg.agent{align-self:flex-end;background:#0b7e8f;color:#fff;border-color:#0b7e8f}.msg.system{align-self:center;background:#eef3f5;color:#70848e;font-size:8px}.msg p{font-size:10px;margin:0;white-space:pre-wrap}.msg small{display:block;font-size:7px;opacity:.65;margin-top:5px}.composer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:9px;border-radius:18px;background:#fff;border:1px solid #dce7eb}.composer textarea{border:0;outline:0;resize:none;padding:8px 4px;max-height:110px;font-size:10px}.attach-btn,.send-btn{width:38px;height:38px;border-radius:12px;border:0;display:grid;place-items:center}.attach-btn{background:#f2f6f7;color:#6e848e}.send-btn{background:#0b8190;color:#fff}.detail-pane{padding:20px;background:#fff;border-left:1px solid #dfe8ed;overflow:auto}.detail-group{padding:16px 0;border-bottom:1px solid #e7edef}.detail-group>span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#83959d;font-weight:900;margin-bottom:8px}.detail-group select,.detail-group textarea{width:100%;border:1px solid #dce7eb;border-radius:12px;padding:10px;background:#f8fafb;font-size:9px;color:#253f4a}.detail-group textarea{min-height:85px;resize:vertical}.status-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.status-actions button,.note-btn{height:34px;border-radius:10px;border:1px solid #dce6eb;background:#f7fafb;font-size:8px;font-weight:850;color:#5c717b}.status-actions button:hover,.note-btn:hover{border-color:#9fcdd4;color:#08798c}.note-btn{width:100%;margin-top:7px}.customer-detail{font-size:9px;color:#60757f}.customer-detail b,.customer-detail span{display:block}.customer-detail b{font-size:11px;color:#193642;margin-bottom:3px}.toast{position:fixed;right:22px;bottom:95px;z-index:160;transform:translateY(20px);opacity:0;pointer-events:none;padding:12px 15px;border-radius:13px;background:#0d3040;color:#fff;font-size:9px;box-shadow:0 16px 36px rgba(8,29,41,.2);transition:.22s}.toast.show{transform:translateY(0);opacity:1}
@media(max-width:1100px){.topbar-center{display:none}.topbar{grid-template-columns:1fr auto}.hero-section{grid-template-columns:1fr .65fr}.metric-strip{grid-template-columns:1fr 1fr}.queue-layout{grid-template-columns:1fr}.priority-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}.priority-panel .mini-head{grid-column:1/-1}.priority-list{grid-template-columns:repeat(2,1fr);margin:0}.capacity-card{align-self:stretch}.conversation-ribbon{grid-template-columns:1fr 1fr}.people-layout{grid-template-columns:1fr}.supervisor-grid{grid-template-columns:repeat(5,1fr)}.supervisor-stats{grid-template-columns:1fr}.agent-grid{grid-template-columns:repeat(5,1fr)}.analytics-grid{grid-template-columns:1fr 1fr}.analytics-grid .wide:last-child{grid-column:1/-1}.history-layout{grid-template-columns:1fr}.activity-feed>div:last-child{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app-shell{padding-bottom:95px}.topbar{min-height:62px;padding:0 14px}.brand-sub,.admin-chip span:last-child{display:none}.brand-bni{font-size:16px}.brand-xpora{font-size:20px}.topbar-actions{gap:6px}.round-btn{width:36px;height:36px}.admin-chip{padding:0}.avatar{width:34px;height:34px}main{width:calc(100% - 24px)}.section{margin:16px 0}.hero-section{min-height:0;padding:26px 20px;border-radius:24px;grid-template-columns:1fr;gap:20px}.hero-copy h1{font-size:39px}.hero-copy p{font-size:12px}.hero-actions{margin-top:20px;display:grid;grid-template-columns:1fr 1fr}.hero-health{justify-self:stretch;width:100%;padding:20px;border-radius:22px}.health-score strong{font-size:56px}.metric-strip{gap:8px}.metric-strip article{padding:16px;border-radius:18px}.metric-strip strong{font-size:30px}.split-section,.airy-card,.analytics-section,.history-section{padding:18px 15px;border-radius:22px}.section-head{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:18px}.section-head h2{font-size:29px}.section-tools{width:100%}.search-box{width:100%}.queue-panel{padding:10px;border-radius:18px}.segmented{width:100%;overflow:auto}.segmented button{flex:1;white-space:nowrap}.queue-item{grid-template-columns:34px minmax(0,1fr) 76px 22px;padding:11px}.queue-item .queue-meta,.queue-item .priority-pill{display:none}.queue-icon{width:32px;height:32px;border-radius:10px}.queue-main b{font-size:10px}.queue-main small{max-width:180px}.priority-panel{display:block;padding:15px;border-radius:18px}.priority-list{display:grid;grid-template-columns:1fr;margin:14px 0}.conversation-ribbon{display:flex;overflow:auto;gap:9px;padding-bottom:2px}.conversation-card{flex:0 0 78%;padding:14px}.people-layout{gap:10px}.supervisor-column,.agent-column{padding:14px;border-radius:19px}.supervisor-grid{display:flex;overflow:auto;gap:8px}.supervisor-card{flex:0 0 78%}.supervisor-stats{grid-template-columns:repeat(3,1fr)}.agent-grid{grid-template-columns:1fr 1fr;max-height:none;overflow:visible}.legend{gap:8px}.analytics-grid{grid-template-columns:1fr}.analytics-grid .wide:last-child{grid-column:auto}.quality-grid{grid-template-columns:1fr 1fr}.history-layout{gap:10px}.activity-feed{padding:15px}.activity-feed>div:last-child{grid-template-columns:1fr}.bottom-nav{bottom:max(10px,env(safe-area-inset-bottom));padding:7px 8px;gap:5px}.bottom-nav a{width:46px;height:46px;flex-basis:46px}.ticket-drawer{width:100vw}.ticket-drawer>header{padding:14px 16px;min-height:82px}.drawer-body{grid-template-columns:1fr}.detail-pane{display:none}.chat-pane{padding:12px}.msg{max-width:84%}.toast{right:12px;bottom:80px}.bar-chart{gap:7px}}
@media(max-width:480px){.metric-strip{grid-template-columns:1fr 1fr}.metric-strip small{display:block}.hero-copy h1{font-size:35px}.hero-actions{grid-template-columns:1fr}.health-grid{gap:5px}.health-grid div{padding:9px}.agent-grid{gap:7px}.agent-card{padding:11px}.agent-metrics{grid-template-columns:1fr 1fr 1fr}.agent-metrics div{padding:6px 3px}.range-pills{width:100%}.range-pills button{flex:1}.quality-grid{grid-template-columns:1fr 1fr}.bottom-nav a{width:44px;height:44px;flex-basis:44px}}
/* Customer chat demo */
.customer-demo{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 15%,rgba(9,151,157,.18),transparent 28%),radial-gradient(circle at 85% 18%,rgba(244,124,32,.13),transparent 24%),linear-gradient(160deg,#f5fbfc,#eef4f7)}
.customer-wrap{width:min(1120px,100%);display:grid;grid-template-columns:1fr 390px;gap:22px;align-items:stretch}.customer-stage{min-height:650px;padding:52px;border-radius:34px;background:linear-gradient(135deg,#0b6d80,#103c68);color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow2)}.customer-stage:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-100px;bottom:-100px;background:radial-gradient(circle,rgba(255,151,72,.28),transparent 68%)}.customer-stage .brand{position:relative;z-index:2}.customer-stage .brand-bni{color:#ff9a50}.customer-stage .brand-xpora{color:#8fe5de}.customer-hero{position:absolute;left:52px;bottom:56px;right:52px;z-index:2}.customer-hero span{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#96d8d8;font-weight:900}.customer-hero h1{font-size:56px;line-height:.96;letter-spacing:-.055em;margin:12px 0 16px;max-width:620px}.customer-hero p{max-width:560px;color:#b8d0d8;font-size:13px}.chat-widget{min-height:650px;border-radius:34px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow2);display:flex;flex-direction:column;overflow:hidden}.chat-widget header{padding:22px 22px 16px;border-bottom:1px solid #e2eaed}.chat-widget header b,.chat-widget header small{display:block}.chat-widget header b{font-size:14px}.chat-widget header small{font-size:9px;color:#7d919a;margin-top:3px}.email-step{padding:24px;display:flex;flex-direction:column;justify-content:center;flex:1}.email-step h2{font-size:26px;letter-spacing:-.04em;margin:0 0 8px}.email-step p{font-size:10px;color:#6f848d;margin:0 0 22px}.email-step label{font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#81949d;margin:8px 0 5px}.email-step input{height:44px;border-radius:13px;border:1px solid #d9e5ea;background:#f8fafb;padding:0 12px;outline:0}.email-step input:focus{border-color:#8fc7cf;box-shadow:0 0 0 3px rgba(8,121,140,.08)}.email-step button{margin-top:14px;height:44px;border:0;border-radius:13px;background:linear-gradient(135deg,#08798c,#0fa19e);color:#fff;font-weight:900}.chat-step{display:none;min-height:0;flex:1;flex-direction:column}.chat-step.active{display:flex}.customer-messages{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:9px}.customer-messages .msg{font-size:10px}.customer-composer{margin:0 14px 14px;display:grid;grid-template-columns:1fr auto;gap:7px;padding:7px;border-radius:16px;background:#f7fafb;border:1px solid #dce7eb}.customer-composer input{border:0;outline:0;background:transparent;padding:0 8px;font-size:10px}.customer-composer button{width:38px;height:38px;border:0;border-radius:11px;background:#0a8290;color:#fff;display:grid;place-items:center}
@media(max-width:860px){.customer-demo{padding:12px}.customer-wrap{grid-template-columns:1fr}.customer-stage{min-height:280px;padding:26px;border-radius:24px}.customer-hero{position:relative;left:auto;right:auto;bottom:auto;margin-top:90px}.customer-hero h1{font-size:39px}.chat-widget{min-height:560px;border-radius:24px}}

/* v2 executive operations redesign */
.dashboard-v2 main{width:min(1320px,calc(100% - 64px));}
.command-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:30px 4px 4px;background:transparent}.command-intro h1{font-size:clamp(38px,5vw,66px);line-height:.95;letter-spacing:-.055em;margin:8px 0 12px}.command-intro p{margin:0;color:#617680;font-size:12px;max-width:720px}.command-status{flex:0 0 auto;min-width:190px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(217,229,235,.95);box-shadow:0 10px 26px rgba(22,53,68,.05);backdrop-filter:blur(12px)}.command-status span,.command-status b{display:block}.command-status span{font-size:9px;color:#6f838d}.command-status span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#25b979;margin-right:7px;box-shadow:0 0 0 5px rgba(37,185,121,.1)}.command-status b{font-size:13px;margin-top:5px}.metric-strip-v2{grid-template-columns:repeat(5,1fr);margin-top:18px}.metric-strip-v2 article{min-height:144px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.metric-strip-v2 article:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-35px;background:radial-gradient(circle,rgba(8,121,140,.08),transparent 70%)}.metric-strip-v2 .metric-primary{background:linear-gradient(145deg,#0b7083,#0f8792);color:#fff;border-color:transparent}.metric-strip-v2 .metric-primary .metric-label,.metric-strip-v2 .metric-primary small{color:rgba(255,255,255,.72)}.metric-strip-v2 .metric-primary .trend{background:rgba(255,255,255,.14);color:#fff}.ops-section,.team-section,.shift-section,.quality-section{padding:34px;border-radius:30px;background:rgba(255,255,255,.80);border:1px solid rgba(216,228,234,.96);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.strong-head h2{font-size:clamp(30px,3.2vw,44px)}.priority-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.priority-summary article{padding:14px 16px;border-radius:17px;background:#f7fafb;border:1px solid #e1eaee;display:grid;grid-template-columns:1fr auto;align-items:end}.priority-summary span{font-size:9px;font-weight:800;color:#70848d}.priority-summary b{font-size:26px;letter-spacing:-.05em}.priority-summary small{grid-column:1/-1;color:#90a0a7;font-size:8px;margin-top:3px}.queue-layout-v2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.queue-panel-v2{padding:14px}.action-aside{padding:18px;border-radius:22px;background:#0d2b38;color:#fff;align-self:start}.aside-head h3{font-size:18px;margin:4px 0 0}.action-aside .eyebrow{color:#78d6d4}.pulse-list{display:grid;gap:7px;margin:16px 0}.pulse-list article{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);display:grid;grid-template-columns:1fr auto}.pulse-list span{font-size:8px;color:#abc1c9}.pulse-list b{font-size:17px}.pulse-list small{grid-column:1/-1;color:#7898a3;font-size:8px;margin-top:2px}.compact-capacity{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.08)!important}.compact-capacity span,.compact-capacity small{color:#a9c0c8!important}.conversation-section{padding:34px}.conversation-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.conversation-card-v2{padding:18px;border-radius:20px;background:#f8fbfc;border:1px solid #dfe9ed;cursor:pointer;transition:.18s}.conversation-card-v2:hover{transform:translateY(-3px);border-color:#b8d8df;box-shadow:0 12px 25px rgba(17,54,68,.07)}.conversation-card-v2 h3{font-size:15px;margin:15px 0 7px}.conversation-card-v2 p{font-size:9px;color:#70848d;line-height:1.55;min-height:43px;margin:0}.channel-tag{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.channel-tag.whatsapp{color:#168b64}.channel-tag.email{color:#376fb1}.channel-tag.webchat{color:#0b7b8e}.conversation-owner{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0 11px}.conversation-owner div{padding:9px;border-radius:12px;background:#fff;border:1px solid #e4ebee}.conversation-owner span,.conversation-owner b{display:block}.conversation-owner span{font-size:7px;color:#8a9aa1}.conversation-owner b{font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-card-v2 footer{display:flex;justify-content:space-between;color:#8a9aa1;font-size:8px}.team-totals{display:flex;gap:8px;flex-wrap:wrap}.team-totals span{padding:9px 11px;border-radius:12px;background:#f6f9fa;border:1px solid #e1e9ed;font-size:9px;color:#6e828b}.team-totals b{color:#173642}.supervisor-section-card{padding:20px;border-radius:24px;background:#f6fafb;border:1px solid #e0e9ed}.subhead small{display:block;font-size:8px;color:#8b9aa1;margin-top:2px}.supervisor-grid-v2{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}.supervisor-card-v2{padding:14px;border-radius:18px;background:#fff;border:1px solid #dfe8ed}.supervisor-card-v2 header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center}.supervisor-card-v2 header>div b,.supervisor-card-v2 header>div small{display:block}.supervisor-card-v2 header>div b{font-size:10px}.supervisor-card-v2 header>div small{font-size:7px;color:#86979f;margin-top:2px}.coverage-badge{grid-column:1/-1;width:max-content;padding:4px 7px;border-radius:999px;background:#eaf7f5;color:#087e73;font-size:7px;font-weight:900}.supervisor-kpi{display:flex;gap:5px;margin:10px 0}.supervisor-kpi span{flex:1;padding:7px 4px;border-radius:10px;background:#f6f9fa;font-size:7px;color:#83949b;text-align:center}.supervisor-kpi b{display:block;font-size:10px;color:#173642}.assigned-agents{display:grid;gap:4px;max-height:130px;overflow:auto}.assigned-chip{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:8px;background:#fbfcfd;color:#526a74;font-size:7px}.assigned-chip .status-dot{position:static;width:6px;height:6px}.agent-status-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.agent-status-panel{padding:18px;border-radius:22px;border:1px solid #e0e9ed;background:#fff}.online-panel{box-shadow:inset 0 3px 0 rgba(31,174,121,.38)}.busy-panel{box-shadow:inset 0 3px 0 rgba(244,124,32,.38)}.agent-grid-v2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.agent-card-v2{padding:11px;border-radius:15px}.agent-card-v2 .agent-metrics{margin-top:9px}.shift-mini{margin-top:8px;padding-top:7px;border-top:1px solid #ebf0f2;font-size:7px;color:#84959c}.date-chip{padding:9px 12px;border-radius:999px;background:#f6f9fa;border:1px solid #e0e8ec;color:#637984;font-size:9px;font-weight:800}.shift-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.shift-card{padding:20px;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbfc);border:1px solid #dfe8ed}.shift-card header{display:flex;justify-content:space-between;gap:12px}.shift-card header span{font-size:8px;color:#81939b}.shift-card h3{font-size:19px;margin:3px 0}.shift-card header>b{font-size:8px;color:#16865f;padding:6px 8px;background:#eaf8f1;border-radius:999px;height:max-content}.shift-supervisors{padding:11px 0;border-top:1px solid #e8eef0;border-bottom:1px solid #e8eef0;margin:12px 0}.shift-supervisors span,.shift-supervisors strong{display:block}.shift-supervisors span{font-size:7px;color:#8b9aa1}.shift-supervisors strong{font-size:9px;margin-top:3px}.shift-agent-list{display:flex;flex-wrap:wrap;gap:5px;max-height:125px;overflow:auto}.shift-agent-list span{display:flex;align-items:center;gap:5px;padding:5px 7px;background:#f5f8f9;border-radius:8px;font-size:7px;color:#58707a}.shift-agent-list .status-dot{position:static;width:6px;height:6px}.quality-layout-v2{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px}.quality-score{display:flex;align-items:baseline;gap:5px}.quality-score strong{font-size:44px;letter-spacing:-.06em}.quality-score span{color:#81939b;font-size:11px}.rating-list{display:grid;gap:7px}.rating-row{display:grid;grid-template-columns:1.1fr .8fr 105px 1.2fr;gap:12px;align-items:center;padding:13px 14px;border-radius:15px;background:#f9fbfc;border:1px solid #e2e9ed}.rating-customer b,.rating-customer small,.rating-agent span,.rating-agent b{display:block}.rating-customer b{font-size:10px}.rating-customer small,.rating-agent span{font-size:7px;color:#8a9aa1;margin-top:2px}.rating-agent b{font-size:9px}.stars{color:#f39a32;font-size:12px;letter-spacing:1px}.rating-row p{font-size:8px;color:#647a84;margin:0}.quality-insight{padding:22px;border-radius:22px;background:#0e2c39;color:#fff}.quality-insight>strong{display:block;font-size:52px;letter-spacing:-.06em;margin-top:8px}.quality-insight>small{color:#89a6b1}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:18px 0}.insight-grid div{padding:9px 5px;border-radius:11px;background:rgba(255,255,255,.06);text-align:center}.insight-grid b,.insight-grid span{display:block}.insight-grid b{font-size:14px}.insight-grid span{font-size:6px;color:#88a7b1;margin-top:2px}.quality-insight p{font-size:8px;color:#9bb4bd;line-height:1.5}.clean-analytics{grid-template-columns:1.5fr .7fr .7fr}.clean-analytics .wide{grid-column:auto}.bottom-nav{width:max-content!important;max-width:calc(100vw - 24px);left:50%;transform:translateX(-50%);padding:7px 8px;gap:5px;border-radius:999px;background:rgba(12,31,43,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08)}.bottom-nav a{width:47px!important;flex:0 0 47px!important;height:47px!important;border-radius:999px}.bottom-nav a:hover,.bottom-nav a.active{background:rgba(255,255,255,.13);transform:translateY(-2px)}
@media(max-width:1120px){.metric-strip-v2{grid-template-columns:repeat(3,1fr)}.conversation-grid-v2{grid-template-columns:repeat(2,1fr)}.supervisor-grid-v2{grid-template-columns:repeat(3,1fr)}.agent-status-columns{grid-template-columns:1fr}.shift-board{grid-template-columns:1fr 1fr}.quality-layout-v2{grid-template-columns:1fr}.quality-insight{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px}.quality-insight .insight-grid{margin:0}.quality-insight p{margin:0}.clean-analytics{grid-template-columns:1fr 1fr}.clean-analytics .wide{grid-column:1/-1}}
@media(max-width:760px){.dashboard-v2 main{width:calc(100% - 24px)}.command-intro{padding:22px 2px 0;align-items:flex-start;flex-direction:column;gap:14px}.command-intro h1{font-size:40px}.command-status{width:100%;min-width:0}.metric-strip-v2{display:flex;overflow:auto;gap:8px;padding-bottom:2px}.metric-strip-v2 article{flex:0 0 72%;min-height:130px}.ops-section,.team-section,.shift-section,.quality-section,.conversation-section{padding:19px 15px;border-radius:22px}.priority-summary{grid-template-columns:1fr 1fr 1fr}.priority-summary article{padding:11px}.priority-summary b{font-size:22px}.queue-layout-v2{grid-template-columns:1fr}.action-aside{padding:15px}.conversation-grid-v2{display:flex;overflow:auto;gap:9px}.conversation-card-v2{flex:0 0 82%;min-width:0}.supervisor-grid-v2{display:flex;overflow:auto;gap:8px}.supervisor-card-v2{flex:0 0 82%}.agent-grid-v2{grid-template-columns:1fr}.shift-board{display:flex;overflow:auto}.shift-card{flex:0 0 86%;padding:16px}.rating-row{grid-template-columns:1fr auto;gap:8px}.rating-agent{grid-column:1/2}.stars{grid-column:2/3;grid-row:1/3}.rating-row p{grid-column:1/-1;padding-top:7px;border-top:1px solid #e8eef0}.quality-insight{display:block}.quality-insight .insight-grid{margin:16px 0}.clean-analytics{grid-template-columns:1fr}.clean-analytics .wide{grid-column:auto}.team-totals{width:100%}.section-head{gap:12px}.section-head h2{font-size:29px}.section-tools{width:100%}.search-box{width:100%}}
@media(max-width:480px){.metric-strip-v2 article{flex-basis:78%}.priority-summary{gap:6px}.priority-summary article{padding:9px}.priority-summary span{font-size:7px}.priority-summary b{font-size:20px}.conversation-card-v2{flex-basis:88%}.supervisor-card-v2{flex-basis:90%}.shift-card{flex-basis:92%}.quality-score strong{font-size:38px}.bottom-nav a{width:44px!important;flex-basis:44px!important;height:44px!important}}


/* v3 brand palette: #FDA851 -> #F55A31 -> #EA071B */
:root{
  --accent-warm:#FDA851;
  --accent-main:#F55A31;
  --accent-hot:#EA071B;
  --teal:#F55A31;
  --teal2:#FDA851;
  --orange:#EA071B;
  --blue:#F55A31;
  --red:#EA071B;
}
.app-shell{
  background:
    radial-gradient(circle at 4% 8%,rgba(253,168,81,.15),transparent 23%),
    radial-gradient(circle at 96% 12%,rgba(245,90,49,.12),transparent 21%),
    radial-gradient(circle at 84% 78%,rgba(234,7,27,.055),transparent 22%),
    linear-gradient(180deg,#fffaf6 0%,#f6f7f9 48%,#fff 100%);
}
.brand-bni{color:#EA071B}
.brand-xpora{color:#F55A31}
.round-btn:hover{color:#F55A31;border-color:rgba(245,90,49,.34)}
.has-dot:after{background:#EA071B}
.avatar{background:linear-gradient(145deg,#FDA851 0%,#F55A31 54%,#EA071B 100%)}
.eyebrow{color:#F55A31}
.primary-btn{background:linear-gradient(135deg,#FDA851 0%,#F55A31 56%,#EA071B 100%);box-shadow:0 12px 28px rgba(245,90,49,.22)}
.primary-btn:hover{box-shadow:0 18px 34px rgba(234,7,27,.22)}
.secondary-btn:hover{color:#F55A31;border-color:rgba(245,90,49,.32)}
.command-status,.hero-health,.action-aside,.quality-insight{background:linear-gradient(145deg,#191c2b 0%,#2b2024 100%)}
.hero-section:before{background:radial-gradient(circle,rgba(253,168,81,.22),rgba(253,168,81,0) 68%)}
.hero-section:after{background:radial-gradient(circle,rgba(234,7,27,.10),rgba(234,7,27,0) 70%)}
.trend.neutral{background:#fff2eb;color:#F55A31}
.trend.up{background:#fff0e5;color:#F55A31}
.trend.warn{background:#ffebed;color:#EA071B}
.segmented button.active,.agent-filter button.active,.range-pills button.active{color:#F55A31;box-shadow:0 5px 14px rgba(245,90,49,.08)}
.queue-item:hover,.conversation-card-v2:hover{border-color:rgba(245,90,49,.32);box-shadow:0 10px 24px rgba(245,90,49,.07)}
.queue-icon{background:#fff0e7;color:#F55A31}
.status-pill.pending{background:#fff0e7;color:#F55A31}
.status-pill.open{background:#fff4ee;color:#F55A31}
.priority-pill.urgent{background:#ffe9eb;color:#EA071B}
.priority-pill.high{background:#fff1e7;color:#F55A31}
.sla-time.risk{color:#EA071B}
.pulse-dot{background:#EA071B;box-shadow:0 0 0 6px rgba(234,7,27,.09)}
@keyframes pulseRed{50%{box-shadow:0 0 0 12px rgba(234,7,27,0)}}
.busy-panel{box-shadow:inset 0 3px 0 rgba(245,90,49,.45)}
.coverage-badge{background:#fff1e8;color:#F55A31}
.channel-tag.webchat{color:#F55A31}
.channel-tag.email{color:#D94E2D}
.stars{color:#FDA851}
.bottom-nav{background:rgba(20,20,31,.86)}
.bottom-nav a:hover,.bottom-nav a.active{background:linear-gradient(145deg,rgba(253,168,81,.20),rgba(245,90,49,.20));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(234,7,27,.10)}
.bottom-nav a.active:after{background:linear-gradient(90deg,#FDA851,#F55A31,#EA071B)}
.metric-strip-v2 article:first-child{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,240,232,.94));border-color:rgba(245,90,49,.20)}
.metric-strip-v2 article:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,246,237,.94))}
.priority-summary article:first-child{background:linear-gradient(145deg,#fff,#fff0eb);border-color:rgba(234,7,27,.16)}
.priority-summary article:first-child b{color:#EA071B}
.section-head h2,.command-intro h1{color:#151823}
@media(max-width:760px){
  .app-shell{background:radial-gradient(circle at 5% 3%,rgba(253,168,81,.14),transparent 19%),radial-gradient(circle at 97% 13%,rgba(245,90,49,.09),transparent 20%),#f7f8fa}
}


/* v4 simplified executive dashboard */
.dashboard-v2 main{width:min(1180px,calc(100% - 48px));margin:0 auto;padding-bottom:110px}
.command-intro{padding:42px 2px 20px!important;display:flex;align-items:end;justify-content:space-between;gap:24px}
.command-intro h1{font-size:44px!important;margin:7px 0 0!important;letter-spacing:-.05em}
.command-status{padding:12px 15px!important;border-radius:16px!important;min-width:170px!important}
.simple-metrics{grid-template-columns:repeat(4,1fr)!important;gap:12px!important;margin-bottom:32px!important}
.simple-metrics article{min-height:132px!important;padding:22px!important;border-radius:22px!important;background:#fff!important;border:1px solid #e8ebef!important;box-shadow:0 12px 30px rgba(24,28,38,.045)!important}
.simple-metrics article:first-child{background:linear-gradient(145deg,#fff,#fff4ee)!important;border-color:rgba(245,90,49,.18)!important}
.simple-metrics .metric-label{font-size:10px!important;color:#77808a!important;text-transform:none!important;letter-spacing:0!important}
.simple-metrics strong{font-size:42px!important;margin:8px 0 4px!important;color:#161923!important}
.simple-metrics small{font-size:10px!important;color:#87919b!important}
.ops-section,.conversation-section,.team-section,.shift-section,.quality-section{margin:0 0 28px!important;padding:30px!important;border-radius:28px!important;background:rgba(255,255,255,.88)!important;border:1px solid #e6eaee!important;box-shadow:0 18px 42px rgba(25,29,40,.045)!important}
.simple-head{align-items:end!important;margin-bottom:22px!important}
.simple-head h2{font-size:30px!important;margin:5px 0 0!important;letter-spacing:-.04em!important}
.simple-head p{display:none!important}
.simple-queue{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important}
.segmented{width:max-content;background:#f4f5f7!important;padding:4px!important;border-radius:14px!important;margin-bottom:14px!important}
.segmented button{min-width:92px!important;padding:9px 13px!important;border-radius:11px!important}
.queue-list{border:1px solid #e8ebee;border-radius:18px;overflow:hidden;background:#fff}
.queue-item{border-radius:0!important;border:0!important;border-bottom:1px solid #eef0f2!important;box-shadow:none!important;padding:14px 16px!important}
.queue-item:last-child{border-bottom:0!important}
.queue-item:hover{background:#fff8f4!important;transform:none!important;box-shadow:none!important}
.conversation-grid-v2{grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
.conversation-card-v2{border-radius:18px!important;padding:17px!important;box-shadow:none!important;border:1px solid #e8ebef!important}
.supervisor-section-card{border:0!important;background:transparent!important;padding:0!important;margin-bottom:18px!important}
.supervisor-grid-v2{grid-template-columns:repeat(5,1fr)!important;gap:10px!important}
.supervisor-card-v2{padding:14px!important;border-radius:18px!important;box-shadow:none!important;background:#fafbfc!important}
.assigned-agents{max-height:118px!important}
.agent-status-columns{gap:14px!important;margin-top:12px!important}
.agent-status-panel{padding:18px!important;border-radius:20px!important;background:#fafbfc!important;box-shadow:none!important}
.simple-agent-list{grid-template-columns:1fr!important;gap:6px!important;max-height:430px;overflow:auto;padding-right:3px}
.simple-agent-list .agent-card-v2{padding:10px 12px!important;border-radius:12px!important;background:#fff!important;border:1px solid #e9edf0!important;box-shadow:none!important}
.simple-agent-list .agent-metrics{display:flex!important;gap:14px!important;margin-top:7px!important}
.simple-agent-list .agent-metrics>div{background:transparent!important;padding:0!important;text-align:left!important}
.simple-agent-list .shift-mini{display:none!important}
.shift-board{gap:12px!important}
.shift-card{box-shadow:none!important;border-radius:18px!important;padding:18px!important;background:#fafbfc!important}
.quality-layout-v2{grid-template-columns:minmax(0,1fr) 245px!important}
.rating-row{border-radius:13px!important;padding:12px 13px!important;background:#fafbfc!important}
.quality-insight{border-radius:20px!important;padding:20px!important}
.secondary-details{margin:0 0 28px;background:rgba(255,255,255,.88);border:1px solid #e6eaee;border-radius:22px;overflow:hidden}
.secondary-details>summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:12px;font-weight:800;color:#30353d;display:flex;align-items:center;justify-content:space-between}
.secondary-details>summary::-webkit-details-marker{display:none}.secondary-details>summary:after{content:'+';font-size:20px;color:#F55A31}.secondary-details[open]>summary:after{content:'−'}
.secondary-details .section{margin:0!important;border-top:1px solid #eceff2!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;padding:24px!important}
.secondary-details .section-head h2{font-size:24px!important}.secondary-details .section-head p{font-size:10px!important}
@media(max-width:1100px){.simple-metrics{grid-template-columns:repeat(2,1fr)!important}.conversation-grid-v2{grid-template-columns:repeat(2,1fr)!important}.supervisor-grid-v2{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:760px){.dashboard-v2 main{width:calc(100% - 20px)!important}.command-intro{padding:26px 2px 16px!important;align-items:flex-start!important}.command-intro h1{font-size:32px!important}.command-status{min-width:0!important}.simple-metrics{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;overflow:visible!important}.simple-metrics article{min-height:112px!important;padding:15px!important}.simple-metrics strong{font-size:34px!important}.ops-section,.conversation-section,.team-section,.shift-section,.quality-section{padding:18px 14px!important;border-radius:20px!important;margin-bottom:18px!important}.simple-head{align-items:flex-start!important}.simple-head h2{font-size:25px!important}.section-tools{width:100%!important}.segmented{width:100%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important}.segmented button{min-width:0!important}.queue-item{grid-template-columns:auto 1fr auto!important;gap:9px!important}.queue-meta,.priority-pill{display:none!important}.conversation-grid-v2{display:flex!important;overflow:auto!important}.conversation-card-v2{flex:0 0 84%!important}.supervisor-grid-v2{display:flex!important;overflow:auto!important}.supervisor-card-v2{flex:0 0 86%!important}.agent-status-columns{grid-template-columns:1fr!important}.simple-agent-list{max-height:360px}.shift-board{display:flex!important;overflow:auto!important}.shift-card{flex:0 0 88%!important}.quality-layout-v2{grid-template-columns:1fr!important}.quality-insight{order:-1}.secondary-details>summary{padding:16px 18px}.secondary-details .section{padding:18px 14px!important}}
@media(max-width:480px){.simple-metrics article{min-height:105px!important}.simple-metrics strong{font-size:31px!important}.conversation-card-v2{flex-basis:90%!important}.supervisor-card-v2{flex-basis:92%!important}.shift-card{flex-basis:94%!important}}

/* v5 designer-led polish — quiet luxury, operational clarity */
:root{
  --canvas:#f4f3f0;
  --surface:#ffffff;
  --surface-soft:#f8f7f4;
  --surface-warm:#fff7f0;
  --ink:#171717;
  --ink-2:#303030;
  --muted:#74716c;
  --hairline:#e8e4de;
  --accent-1:#FDA851;
  --accent-2:#F55A31;
  --accent-3:#EA071B;
}
body{background:var(--canvas);color:var(--ink)}
.dashboard-v2{background:
  radial-gradient(circle at 8% 0%,rgba(253,168,81,.10),transparent 20%),
  radial-gradient(circle at 96% 14%,rgba(245,90,49,.055),transparent 18%),
  linear-gradient(180deg,#f8f7f4 0%,#f2f1ee 100%)!important}
.dashboard-v2 main{width:min(1240px,calc(100% - 56px));}

/* topbar: calm and architectural */
.topbar{min-height:68px!important;padding:0 max(26px,3.5vw)!important;background:rgba(248,247,244,.84)!important;border-bottom:1px solid rgba(224,220,213,.86)!important;box-shadow:none!important}
.brand{align-items:center!important;gap:6px!important}.brand-bni{font-size:17px!important}.brand-xpora{font-size:21px!important}.brand-sub{font-size:9px!important;color:#8c877f!important;font-weight:750!important}
.live-pill,.shift-pill{height:32px!important;background:rgba(255,255,255,.78)!important;border-color:#e7e2db!important;color:#6f6b66!important}
.round-btn{border-radius:999px!important;border-color:#e4dfd8!important;background:rgba(255,255,255,.8)!important;box-shadow:none!important}
.round-btn:hover{background:#fff4ec!important;color:var(--accent-2)!important;border-color:rgba(245,90,49,.20)!important;transform:translateY(-1px) rotate(-2deg)!important}
.avatar{border-radius:999px!important;box-shadow:0 6px 18px rgba(245,90,49,.18)}

/* intro: no giant AI-style hero */
.command-intro{padding:38px 2px 18px!important;min-height:0!important;align-items:center!important;border-bottom:1px solid var(--hairline);margin-bottom:20px!important}
.command-intro .eyebrow{font-size:9px!important;color:#8b827b!important;letter-spacing:.16em!important}
.command-intro h1{font-size:clamp(34px,4vw,52px)!important;line-height:.96!important;letter-spacing:-.055em!important;margin:8px 0 0!important;max-width:700px!important}
.command-status{background:#191919!important;border-radius:999px!important;padding:8px 13px 8px 10px!important;min-width:0!important;display:flex!important;align-items:center!important;gap:10px!important;box-shadow:0 12px 32px rgba(23,23,23,.10)!important}
.command-status span{font-size:9px!important}.command-status b{font-size:10px!important;white-space:nowrap!important}

/* KPI strip: editorial summary, not identical boxes */
.simple-metrics{grid-template-columns:1.15fr repeat(3,1fr)!important;gap:10px!important;margin-bottom:30px!important}
.simple-metrics article{position:relative;min-height:126px!important;padding:20px 21px!important;border-radius:20px!important;background:rgba(255,255,255,.82)!important;border:1px solid var(--hairline)!important;box-shadow:none!important;overflow:hidden}
.simple-metrics article:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 9px 9px 0;background:#dcd7d0}
.simple-metrics article:first-child{background:#191919!important;color:#fff!important;border-color:#191919!important;transform:translateY(-3px)}
.simple-metrics article:first-child:before{background:linear-gradient(180deg,var(--accent-1),var(--accent-2),var(--accent-3))}
.simple-metrics article:first-child .metric-label,.simple-metrics article:first-child small{color:#aaa49d!important}.simple-metrics article:first-child strong{color:#fff!important}
.simple-metrics article:nth-child(2):before{background:#2e9d74}.simple-metrics article:nth-child(3):before{background:var(--accent-3)}.simple-metrics article:nth-child(4):before{background:#4e7eaa}
.simple-metrics strong{font-size:39px!important;line-height:1!important;margin:12px 0 7px!important;letter-spacing:-.055em!important}
.simple-metrics .metric-label{font-size:9px!important;font-weight:850!important;text-transform:uppercase!important;letter-spacing:.11em!important}
.simple-metrics small{font-size:9px!important}
.simple-metrics article:hover{transform:translateY(-2px)}
.simple-metrics article:first-child:hover{transform:translateY(-5px)}

/* section containers: open, airy, less card-on-card */
.ops-section,.conversation-section,.team-section,.shift-section,.quality-section{position:relative;margin:0 0 34px!important;padding:30px 30px 32px!important;border-radius:26px!important;background:rgba(255,255,255,.72)!important;border:1px solid var(--hairline)!important;box-shadow:none!important}
.ops-section{background:#fff!important;border-color:#e5dfd8!important;box-shadow:0 18px 50px rgba(40,31,24,.055)!important}
.conversation-section{background:#f8f7f4!important}
.team-section{background:#fff!important}
.shift-section{background:linear-gradient(180deg,#fff,#faf8f5)!important}
.quality-section{background:#191919!important;border-color:#191919!important;color:#fff!important}
.quality-section .section-head h2,.quality-section .eyebrow{color:#fff!important}.quality-section .eyebrow{opacity:.55}.quality-section .quality-score span{color:#a7a29b!important}
.section-head{margin-bottom:22px!important}.simple-head{align-items:center!important}
.simple-head .eyebrow{font-size:8px!important;letter-spacing:.14em!important;color:#9a8e84!important}
.simple-head h2{font-size:29px!important;line-height:1.02!important;letter-spacing:-.04em!important;margin:5px 0 0!important}
.section-tools{align-items:center!important}.search-box{height:40px!important;width:min(320px,34vw)!important;border-radius:999px!important;background:#f6f4f1!important;border-color:#e6e1da!important}
.search-box:focus-within{background:#fff!important;border-color:rgba(245,90,49,.24)!important;box-shadow:0 0 0 4px rgba(245,90,49,.055)!important}

/* queue: table-like reading rhythm */
.simple-queue{padding:0!important}.segmented{margin-bottom:16px!important;background:#f4f1ed!important;border-radius:999px!important;padding:4px!important}
.segmented button{border-radius:999px!important;min-width:86px!important;height:31px!important;color:#77716a!important}
.segmented button.active{background:#191919!important;color:#fff!important;box-shadow:none!important}
.queue-list{border:1px solid #ece7e0!important;border-radius:18px!important;background:#fff!important;max-height:520px!important}
.queue-item{min-height:65px!important;padding:13px 16px!important;background:#fff!important;border-bottom:1px solid #f0ece7!important;transition:background .16s ease,padding .16s ease!important}
.queue-item:hover{background:#fff8f3!important;padding-left:20px!important}
.queue-icon{border-radius:999px!important;background:#fff1e8!important;color:var(--accent-2)!important}
.status-pill,.priority-pill{border-radius:999px!important;padding:5px 8px!important}.row-arrow{opacity:.35!important}.queue-item:hover .row-arrow{opacity:1!important;color:var(--accent-2)!important}

/* active conversations: subtle asymmetry */
.conversation-grid-v2{display:grid!important;grid-template-columns:1.08fr .96fr .96fr!important;gap:12px!important}
.conversation-card-v2{min-height:190px!important;padding:18px!important;border-radius:20px!important;background:#fff!important;border:1px solid #e8e3dc!important;box-shadow:none!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.conversation-card-v2:first-child{grid-row:span 2;min-height:392px!important;background:linear-gradient(155deg,#191919 0%,#25201e 100%)!important;color:#fff!important;border-color:#191919!important;display:flex!important;flex-direction:column!important}
.conversation-card-v2:first-child p{font-size:15px!important;line-height:1.55!important;color:#d7d0ca!important}.conversation-card-v2:first-child .conversation-owner{margin-top:auto!important}.conversation-card-v2:first-child .conversation-owner span,.conversation-card-v2:first-child footer{color:#918b84!important}
.conversation-card-v2:first-child .conversation-owner b{color:#fff!important}
.conversation-card-v2:hover{transform:translateY(-3px)!important;border-color:rgba(245,90,49,.22)!important;box-shadow:0 15px 32px rgba(35,28,22,.07)!important}
.conversation-card-v2:first-child:hover{border-color:#292929!important;box-shadow:0 18px 42px rgba(23,23,23,.17)!important}
.channel-tag{border-radius:999px!important}

/* team: supervisor compact, agents readable */
.team-totals{display:flex!important;gap:7px!important;flex-wrap:wrap!important}.team-totals span{padding:7px 10px!important;border-radius:999px!important;background:#f7f4f1!important;border:1px solid #ece6df!important;font-size:9px!important}.team-totals b{font-size:10px!important}
.supervisor-section-card{margin-bottom:20px!important}.subhead{margin-bottom:12px!important}.subhead h3{font-size:15px!important;letter-spacing:-.02em!important}.subhead small{font-size:9px!important;color:#8a847e!important}
.supervisor-grid-v2{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important}
.supervisor-card-v2{position:relative;padding:14px!important;border-radius:18px!important;background:#f8f6f3!important;border:1px solid #ebe6df!important;box-shadow:none!important;overflow:hidden!important}
.supervisor-card-v2:after{content:"";position:absolute;width:54px;height:54px;border-radius:50%;right:-18px;bottom:-20px;background:radial-gradient(circle,rgba(253,168,81,.16),transparent 70%)}
.supervisor-card-v2 header{gap:8px!important}.supervisor-card-v2 .person-avatar{width:34px!important;height:34px!important;border-radius:999px!important}.coverage-badge{background:#191919!important;color:#fff!important;border-radius:999px!important;font-size:7px!important;padding:5px 7px!important}
.supervisor-kpi{border-top:1px solid #ece7e1!important;border-bottom:1px solid #ece7e1!important;margin:11px 0!important;padding:9px 0!important}.supervisor-kpi span{font-size:7px!important}.supervisor-kpi b{font-size:11px!important}
.assigned-agents{gap:4px!important;max-height:105px!important;overflow:auto!important}.assigned-chip{background:#fff!important;border:1px solid #eee9e3!important;border-radius:999px!important;font-size:7px!important;padding:5px 7px!important}
.agent-status-columns{grid-template-columns:1fr 1fr!important;gap:14px!important}.agent-status-panel{padding:16px!important;border-radius:20px!important;background:#faf9f7!important;border:1px solid #ece7e1!important}
.online-panel{box-shadow:inset 0 3px 0 #2e9d74!important}.busy-panel{box-shadow:inset 0 3px 0 var(--accent-2)!important}
.simple-agent-list{max-height:390px!important}.simple-agent-list .agent-card-v2{padding:10px 11px!important;border-radius:13px!important;background:#fff!important;border:1px solid #ede8e2!important;transition:transform .15s ease,border-color .15s ease!important}.simple-agent-list .agent-card-v2:hover{transform:translateX(3px)!important;border-color:#ddd4cb!important}
.agent-head .person-avatar{border-radius:999px!important}.agent-name b{font-size:10px!important}.agent-name small{font-size:7px!important}.agent-metrics b{font-size:10px!important}.agent-metrics span{font-size:7px!important}

/* shift board: schedule, not more cards */
.shift-board{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important}.shift-card{padding:18px!important;border-radius:19px!important;background:#fff!important;border:1px solid #e9e4de!important;box-shadow:none!important}.shift-card:nth-child(2){transform:translateY(8px)}.shift-card header h3{font-size:18px!important;letter-spacing:-.03em!important}.shift-card header>div>span{font-size:8px!important;letter-spacing:.09em!important;text-transform:uppercase!important;color:#8a817a!important}.shift-card header>b{border-radius:999px!important;background:#f4f1ed!important;padding:6px 8px!important;font-size:8px!important}.shift-supervisors{background:#f8f6f3!important;border-radius:13px!important;padding:10px!important}.shift-agent-list{max-height:160px!important;overflow:auto!important}

/* quality: dark canvas with white review rows */
.quality-layout-v2{grid-template-columns:minmax(0,1fr) 250px!important;gap:12px!important}.rating-list{display:grid!important;gap:7px!important}.rating-row{grid-template-columns:minmax(0,1.4fr) .85fr auto minmax(0,1.2fr)!important;gap:12px!important;padding:11px 12px!important;border-radius:14px!important;background:#fff!important;color:#191919!important;border:0!important}.rating-customer b,.rating-agent b{font-size:9px!important}.rating-customer small,.rating-agent span{font-size:7px!important}.rating-row p{font-size:8px!important;color:#746f69!important}.stars{font-size:12px!important;color:var(--accent-1)!important}
.quality-insight{background:linear-gradient(145deg,#2a211f,#1b1b1b)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:18px!important;padding:18px!important}.quality-insight>strong{font-size:46px!important;letter-spacing:-.07em!important}.quality-insight small{color:#9a938d!important}.insight-grid>div{background:rgba(255,255,255,.055)!important;border-radius:12px!important}

/* secondary details deliberately quiet */
.secondary-details{background:transparent!important;border:1px solid #ded9d2!important;border-radius:18px!important;box-shadow:none!important;margin-bottom:24px!important}.secondary-details>summary{background:rgba(255,255,255,.55)!important;border-radius:18px!important;color:#5f5a55!important}.secondary-details[open]>summary{border-radius:18px 18px 0 0!important}.secondary-details .section{background:#fff!important}.chart-card{box-shadow:none!important;border-color:#ebe6e0!important}.history-table-wrap,.activity-feed{box-shadow:none!important}

/* bottom nav: signature capsule, restrained interaction */
.bottom-nav{bottom:max(16px,env(safe-area-inset-bottom))!important;padding:7px!important;gap:5px!important;border-radius:999px!important;background:rgba(24,24,24,.82)!important;border:1px solid rgba(255,255,255,.09)!important;backdrop-filter:blur(20px) saturate(125%)!important;-webkit-backdrop-filter:blur(20px) saturate(125%)!important;box-shadow:0 18px 48px rgba(15,15,15,.20)!important}
.bottom-nav a{width:46px!important;min-width:46px!important;height:46px!important;border-radius:999px!important;color:#b9b2ab!important;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s ease,color .18s ease!important}
.bottom-nav a:hover{transform:translateY(-4px) scale(1.04)!important;background:rgba(255,255,255,.09)!important;color:#fff!important;box-shadow:none!important}
.bottom-nav a.active{background:#fff!important;color:#1a1a1a!important;transform:translateY(-3px)!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important}
.bottom-nav a.active:after{display:none!important}.nav-badge{background:var(--accent-3)!important;color:#fff!important;border:2px solid #1d1d1d!important}

/* motion with restraint */
.simple-metrics article,.ops-section,.conversation-section,.team-section,.shift-section,.quality-section{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important}

@media(max-width:1100px){
  .dashboard-v2 main{width:min(100% - 36px,980px)!important}
  .conversation-grid-v2{grid-template-columns:1fr 1fr!important}
  .conversation-card-v2:first-child{grid-column:span 2;grid-row:auto;min-height:260px!important}
  .supervisor-grid-v2{grid-template-columns:repeat(3,1fr)!important}
  .shift-card:nth-child(2){transform:none!important}
}
@media(max-width:760px){
  .dashboard-v2 main{width:calc(100% - 20px)!important}
  .topbar{grid-template-columns:1fr auto!important;padding:0 12px!important;min-height:60px!important}.topbar-center{display:none!important}.brand-sub{display:none!important}.admin-chip>span:last-child{display:none!important}.admin-chip{padding-left:0!important}.avatar{width:34px!important;height:34px!important}
  .command-intro{padding:24px 2px 14px!important;margin-bottom:14px!important;align-items:flex-end!important}.command-intro h1{font-size:31px!important}.command-status{padding:7px 10px!important}.command-status span{display:none!important}
  .simple-metrics{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-bottom:18px!important}.simple-metrics article{min-height:104px!important;padding:14px!important;border-radius:17px!important}.simple-metrics article:first-child{transform:none!important}.simple-metrics strong{font-size:31px!important}.simple-metrics .metric-label{font-size:7px!important}.simple-metrics small{font-size:8px!important}.simple-metrics article:before{top:13px;bottom:13px}
  .ops-section,.conversation-section,.team-section,.shift-section,.quality-section{padding:18px 14px!important;border-radius:20px!important;margin-bottom:16px!important}.simple-head{align-items:flex-start!important}.simple-head h2{font-size:24px!important}.section-tools{width:100%!important;margin-top:10px!important}.search-box{width:100%!important}
  .segmented{width:100%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important}.segmented button{min-width:0!important}
  .queue-list{border-radius:15px!important}.queue-item{min-height:60px!important;padding:11px!important}.queue-item:hover{padding-left:11px!important}
  .conversation-grid-v2{display:flex!important;overflow:auto!important;gap:9px!important;scroll-snap-type:x proximity}.conversation-card-v2,.conversation-card-v2:first-child{flex:0 0 86%!important;min-height:205px!important;grid-column:auto!important;grid-row:auto!important;scroll-snap-align:start}.conversation-card-v2:first-child{min-height:235px!important}
  .supervisor-grid-v2{display:flex!important;overflow:auto!important;gap:8px!important}.supervisor-card-v2{flex:0 0 82%!important}.agent-status-columns{grid-template-columns:1fr!important}.simple-agent-list{max-height:330px!important}
  .shift-board{display:flex!important;overflow:auto!important;gap:8px!important}.shift-card{flex:0 0 88%!important}.quality-layout-v2{grid-template-columns:1fr!important}.quality-insight{order:-1!important}.rating-row{grid-template-columns:1fr auto!important;gap:7px!important}.rating-agent{display:none!important}.rating-row p{grid-column:1/-1!important}
  .bottom-nav{bottom:max(10px,env(safe-area-inset-bottom))!important}.bottom-nav a{width:44px!important;min-width:44px!important;height:44px!important}
}
@media(max-width:480px){
  .simple-metrics{grid-template-columns:1fr 1fr!important}.simple-metrics article{min-height:98px!important}.simple-metrics strong{font-size:29px!important}
  .conversation-card-v2,.conversation-card-v2:first-child{flex-basis:91%!important}.supervisor-card-v2{flex-basis:91%!important}.shift-card{flex-basis:92%!important}
}


/* v6 — contemporary glass UI / vivid but readable */
:root{
  --glass:rgba(255,255,255,.64);
  --glass-strong:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.72);
  --soft-line:rgba(108,71,62,.10);
  --ink-modern:#242128;
  --muted-modern:#756f76;
  --accent-1:#FDA851;
  --accent-2:#F55A31;
  --accent-3:#EA071B;
}
body{background:#f7f4f5;color:var(--ink-modern);font-weight:400}
.app-shell{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(circle at 8% 9%,rgba(253,168,81,.30) 0,rgba(253,168,81,0) 24%),
  radial-gradient(circle at 92% 16%,rgba(245,90,49,.20) 0,rgba(245,90,49,0) 26%),
  radial-gradient(circle at 78% 72%,rgba(234,7,27,.11) 0,rgba(234,7,27,0) 24%),
  radial-gradient(circle at 18% 74%,rgba(255,215,185,.33) 0,rgba(255,215,185,0) 27%),
  linear-gradient(145deg,#fffaf7 0%,#f7f3f6 44%,#f4f7fb 100%)!important}
.app-shell:before,.app-shell:after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:999px;filter:blur(76px)}
.app-shell:before{width:310px;height:310px;left:-110px;top:34%;background:rgba(253,168,81,.24)}
.app-shell:after{width:360px;height:360px;right:-150px;top:46%;background:rgba(245,90,49,.16)}

/* top navigation */
.topbar{min-height:70px!important;padding:0 max(24px,3vw)!important;background:rgba(255,255,255,.54)!important;border-bottom:1px solid rgba(255,255,255,.66)!important;box-shadow:0 8px 30px rgba(74,48,42,.045)!important;backdrop-filter:blur(24px) saturate(145%)!important;-webkit-backdrop-filter:blur(24px) saturate(145%)!important}
.brand{align-items:center!important;gap:6px!important}.brand-bni{font-size:17px!important;font-weight:700!important;color:#f27b25!important}.brand-xpora{font-size:21px!important;font-weight:700!important;background:linear-gradient(135deg,var(--accent-1),var(--accent-2) 54%,var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent!important}.brand-sub{font-size:9px!important;font-weight:500!important;color:#7d777d!important}
.live-pill,.shift-pill{height:32px!important;background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.80)!important;box-shadow:0 8px 20px rgba(67,45,39,.035)!important;font-weight:600!important;color:#716b72!important}.live-pill i{background:#1fac7a!important}.round-btn{background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.78)!important;border-radius:999px!important;color:#716a72!important;backdrop-filter:blur(10px)}.round-btn:hover{background:rgba(255,255,255,.86)!important;color:var(--accent-2)!important;border-color:rgba(245,90,49,.16)!important;transform:translateY(-2px)!important;box-shadow:0 10px 24px rgba(245,90,49,.10)!important}.avatar{border-radius:999px!important;background:linear-gradient(145deg,var(--accent-1),var(--accent-2) 62%,var(--accent-3))!important;font-weight:700!important}.admin-chip b{font-weight:650!important}.admin-chip small{color:#8d858b!important}

.dashboard-v2 main{width:min(1280px,calc(100% - 56px))!important}
.section{margin:22px 0!important}
.eyebrow{font-size:8px!important;letter-spacing:.12em!important;font-weight:700!important;color:var(--accent-2)!important}

/* intro glass panel */
.command-intro{position:relative;overflow:hidden;align-items:center!important;padding:26px 28px!important;margin-top:22px!important;border-radius:28px!important;background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,247,242,.54))!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 18px 55px rgba(73,48,41,.07)!important;backdrop-filter:blur(22px) saturate(135%)!important;-webkit-backdrop-filter:blur(22px) saturate(135%)!important}
.command-intro:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-70px;top:-120px;background:radial-gradient(circle,rgba(253,168,81,.40),rgba(253,168,81,0) 70%)}
.command-intro:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:16%;bottom:-130px;background:radial-gradient(circle,rgba(234,7,27,.17),rgba(234,7,27,0) 72%)}
.command-intro>div{position:relative;z-index:1}.command-intro h1{font-size:clamp(32px,4.1vw,54px)!important;line-height:1.02!important;letter-spacing:-.045em!important;margin:6px 0!important;font-weight:650!important}.command-status{position:relative;z-index:2;min-width:174px!important;padding:12px 14px!important;border-radius:18px!important;background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.85)!important;box-shadow:0 12px 28px rgba(75,48,39,.05)!important;backdrop-filter:blur(16px)!important}.command-status span{font-weight:500!important}.command-status b{font-size:12px!important;font-weight:650!important}

/* KPI — glass, lighter typography */
.simple-metrics{gap:12px!important;margin-top:14px!important}.simple-metrics article{position:relative;overflow:hidden;min-height:126px!important;padding:19px 20px!important;border-radius:24px!important;background:rgba(255,255,255,.60)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 16px 38px rgba(75,48,39,.055)!important;backdrop-filter:blur(18px) saturate(135%)!important;-webkit-backdrop-filter:blur(18px) saturate(135%)!important}.simple-metrics article:before{content:""!important;display:block!important;position:absolute!important;inset:auto -26px -32px auto!important;width:110px!important;height:110px!important;border:0!important;border-radius:50%!important;filter:blur(8px)!important;opacity:.75!important}.simple-metrics article:nth-child(1):before{background:radial-gradient(circle,rgba(253,168,81,.46),transparent 70%)!important}.simple-metrics article:nth-child(2):before{background:radial-gradient(circle,rgba(35,179,132,.25),transparent 70%)!important}.simple-metrics article:nth-child(3):before{background:radial-gradient(circle,rgba(234,7,27,.23),transparent 70%)!important}.simple-metrics article:nth-child(4):before{background:radial-gradient(circle,rgba(105,137,211,.22),transparent 70%)!important}.simple-metrics article:first-child{transform:none!important}.simple-metrics .metric-label{font-size:9px!important;font-weight:600!important;color:#827a80!important}.simple-metrics strong{font-size:38px!important;font-weight:650!important;letter-spacing:-.055em!important;margin:7px 0 5px!important;color:#2b2529!important}.simple-metrics small{font-size:9px!important;font-weight:450!important;color:#8b8388!important}.metric-primary{background:linear-gradient(135deg,rgba(255,251,247,.78),rgba(255,233,220,.67))!important}

/* section shells */
.ops-section,.conversation-section,.team-section,.shift-section,.quality-section{position:relative;overflow:hidden;padding:28px!important;border-radius:28px!important;background:rgba(255,255,255,.54)!important;border:1px solid rgba(255,255,255,.76)!important;box-shadow:0 20px 60px rgba(73,48,41,.06)!important;backdrop-filter:blur(20px) saturate(132%)!important;-webkit-backdrop-filter:blur(20px) saturate(132%)!important}
.ops-section:before,.conversation-section:before,.team-section:before,.shift-section:before,.quality-section:before{content:"";position:absolute;pointer-events:none;width:170px;height:170px;border-radius:50%;right:-70px;top:-90px;filter:blur(18px);opacity:.55;background:radial-gradient(circle,rgba(253,168,81,.24),transparent 70%)}
.section-head{position:relative;z-index:1;margin-bottom:20px!important}.simple-head h2,.section-head h2{font-size:clamp(23px,2.6vw,34px)!important;line-height:1.08!important;letter-spacing:-.035em!important;font-weight:650!important;margin:5px 0 6px!important}.section-head p{font-size:11px!important;color:#827b81!important}.section-tools{align-items:center!important}.search-box{height:40px!important;border-radius:14px!important;background:rgba(255,255,255,.62)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:inset 0 0 0 1px rgba(81,56,49,.035)!important;color:#928a8f!important}.search-box input{font-size:10px!important;color:#423b40!important}.secondary-btn{height:40px!important;border-radius:13px!important;background:rgba(255,255,255,.65)!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:0 8px 20px rgba(66,44,39,.04)!important;font-weight:600!important;color:#5e565b!important}.secondary-btn:hover{background:#fff!important;color:var(--accent-2)!important;transform:translateY(-1px)!important}

/* queue */
.simple-queue{position:relative;z-index:1;padding:12px!important;border-radius:20px!important;background:rgba(250,248,248,.52)!important;border:1px solid rgba(255,255,255,.76)!important}.segmented{padding:4px!important;border-radius:13px!important;background:rgba(233,225,224,.48)!important;backdrop-filter:blur(8px)}.segmented button{height:31px!important;font-size:8px!important;font-weight:600!important;color:#81777d!important}.segmented button.active{background:linear-gradient(135deg,var(--accent-1),var(--accent-2) 58%,var(--accent-3))!important;color:#fff!important;box-shadow:0 8px 20px rgba(245,90,49,.19)!important}.queue-list{gap:7px!important}.queue-item{padding:12px 13px!important;border-radius:16px!important;background:rgba(255,255,255,.66)!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 6px 20px rgba(58,43,40,.025)!important}.queue-item:hover{transform:translateX(4px)!important;background:rgba(255,255,255,.90)!important;border-color:rgba(245,90,49,.16)!important;box-shadow:0 12px 26px rgba(245,90,49,.07)!important}.queue-icon{background:linear-gradient(145deg,rgba(253,168,81,.18),rgba(245,90,49,.10))!important;color:var(--accent-2)!important;border:1px solid rgba(245,90,49,.09)!important}.queue-main b,.queue-meta b{font-weight:600!important}.queue-main small,.queue-meta small{color:#8f878c!important}.status-pill,.priority-pill{font-weight:600!important}.status-pill.pending,.priority-pill.high{background:rgba(253,168,81,.15)!important;color:#b9651f!important}.status-pill.open{background:rgba(73,178,153,.13)!important;color:#287c68!important}.status-pill.resolved{background:rgba(50,166,113,.12)!important;color:#237555!important}.priority-pill.urgent{background:rgba(234,7,27,.09)!important;color:#c62a38!important}

/* conversation cards */
.conversation-grid-v2{gap:12px!important}.conversation-card-v2{position:relative;overflow:hidden;padding:18px!important;border-radius:22px!important;background:rgba(255,255,255,.61)!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 10px 30px rgba(64,46,42,.04)!important;backdrop-filter:blur(12px)!important}.conversation-card-v2:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-40px;background:radial-gradient(circle,rgba(253,168,81,.23),transparent 70%)}.conversation-card-v2:nth-child(2):before{background:radial-gradient(circle,rgba(245,90,49,.17),transparent 70%)}.conversation-card-v2:nth-child(3):before{background:radial-gradient(circle,rgba(234,7,27,.11),transparent 70%)}.conversation-card-v2:hover{transform:translateY(-4px)!important;border-color:rgba(245,90,49,.13)!important;box-shadow:0 18px 38px rgba(75,48,41,.08)!important}.conversation-card-v2 h3{font-weight:650!important;letter-spacing:-.02em!important}.conversation-card-v2 p{font-size:9px!important;color:#80777d!important}.conversation-owner div{background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.82)!important}.conversation-owner b{font-weight:600!important}

/* supervisors + agents */
.supervisor-section-card,.agent-status-panel{position:relative;z-index:1;background:rgba(250,248,248,.46)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:none!important;backdrop-filter:blur(12px)!important}.supervisor-section-card{border-radius:22px!important}.supervisor-card-v2{background:rgba(255,255,255,.65)!important;border:1px solid rgba(255,255,255,.84)!important;box-shadow:0 8px 24px rgba(66,44,39,.035)!important}.supervisor-card-v2:after{background:radial-gradient(circle,rgba(245,90,49,.15),transparent 70%)!important}.coverage-badge{background:linear-gradient(135deg,var(--accent-1),var(--accent-2))!important;color:#fff!important;font-weight:600!important}.supervisor-kpi{border-color:rgba(103,81,75,.08)!important}.supervisor-kpi span{background:rgba(255,255,255,.46)!important}.supervisor-kpi b{font-weight:650!important;color:#3f363b!important}.assigned-chip{background:rgba(255,255,255,.62)!important;border:1px solid rgba(255,255,255,.80)!important}.agent-status-panel{border-radius:22px!important}.online-panel{box-shadow:inset 0 3px 0 rgba(31,174,121,.48)!important}.busy-panel{box-shadow:inset 0 3px 0 rgba(245,90,49,.46)!important}.simple-agent-list .agent-card-v2{background:rgba(255,255,255,.68)!important;border:1px solid rgba(255,255,255,.84)!important}.simple-agent-list .agent-card-v2:hover{transform:translateX(3px)!important;border-color:rgba(245,90,49,.14)!important;background:rgba(255,255,255,.92)!important}.agent-name b,.agent-metrics b{font-weight:600!important}

/* shift */
.shift-card{background:rgba(255,255,255,.62)!important;border:1px solid rgba(255,255,255,.82)!important;border-radius:22px!important;box-shadow:0 10px 30px rgba(68,45,40,.035)!important}.shift-card:nth-child(1){background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,240,225,.62))!important}.shift-card:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,228,218,.52))!important}.shift-card:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,236,236,.55))!important}.shift-card header h3{font-weight:650!important}.shift-card header>b{background:rgba(255,255,255,.60)!important;color:#727076!important;border:1px solid rgba(255,255,255,.70)!important;font-weight:600!important}.shift-supervisors{background:rgba(255,255,255,.48)!important;border:1px solid rgba(255,255,255,.66)!important}.shift-agent-list span{background:rgba(255,255,255,.54)!important}

/* quality — vivid glass instead of classic black */
.quality-section{background:linear-gradient(135deg,rgba(255,248,243,.68),rgba(255,255,255,.52),rgba(255,239,239,.56))!important}.rating-row{background:rgba(255,255,255,.66)!important;border:1px solid rgba(255,255,255,.82)!important;color:#332c31!important;box-shadow:0 7px 20px rgba(69,45,41,.028)!important}.rating-customer b,.rating-agent b{font-weight:600!important}.stars{color:#F58E37!important}.quality-score strong{font-weight:650!important;color:#332c31!important}.quality-insight{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,158,74,.92),rgba(245,90,49,.94) 56%,rgba(234,7,27,.90))!important;color:#fff!important;border:1px solid rgba(255,255,255,.26)!important;border-radius:22px!important;box-shadow:0 20px 44px rgba(245,90,49,.18)!important}.quality-insight:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-60px;top:-60px;background:rgba(255,255,255,.14);filter:blur(5px)}.quality-insight>*{position:relative;z-index:1}.quality-insight>strong{font-weight:650!important}.quality-insight>small,.quality-insight p{color:rgba(255,255,255,.76)!important}.insight-grid>div{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.10)!important}

/* secondary detail still modern glass */
.secondary-details{border:1px solid rgba(255,255,255,.74)!important;background:rgba(255,255,255,.42)!important;backdrop-filter:blur(16px)!important;border-radius:22px!important;box-shadow:0 12px 34px rgba(64,45,40,.04)!important}.secondary-details>summary{background:rgba(255,255,255,.48)!important;color:#736a70!important;font-weight:600!important}.secondary-details .section{background:rgba(255,255,255,.52)!important}.chart-card,.history-table-wrap,.activity-feed{background:rgba(255,255,255,.64)!important;border-color:rgba(255,255,255,.82)!important}

/* signature modern floating capsule */
.bottom-nav{background:rgba(35,29,36,.68)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(24px) saturate(150%)!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important;box-shadow:0 18px 48px rgba(41,26,32,.22),inset 0 1px 0 rgba(255,255,255,.08)!important}.bottom-nav a{color:rgba(255,255,255,.63)!important}.bottom-nav a:hover{background:rgba(255,255,255,.10)!important;color:#fff!important;transform:translateY(-4px) scale(1.04)!important}.bottom-nav a.active{background:linear-gradient(145deg,var(--accent-1),var(--accent-2) 55%,var(--accent-3))!important;color:#fff!important;box-shadow:0 10px 28px rgba(245,90,49,.32)!important}.nav-badge{background:#fff!important;color:var(--accent-3)!important;border:2px solid rgba(35,29,36,.82)!important}

/* drawer */
.ticket-drawer{background:rgba(252,250,250,.82)!important;backdrop-filter:blur(22px) saturate(135%)!important;-webkit-backdrop-filter:blur(22px) saturate(135%)!important}.ticket-drawer header{background:rgba(255,255,255,.58)!important}.send-btn,.note-btn{background:linear-gradient(135deg,var(--accent-1),var(--accent-2) 58%,var(--accent-3))!important;color:#fff!important;box-shadow:0 10px 22px rgba(245,90,49,.17)!important}

@media(max-width:1100px){
  .dashboard-v2 main{width:min(100% - 34px,980px)!important}
}
@media(max-width:760px){
  .dashboard-v2 main{width:calc(100% - 20px)!important}
  .topbar{background:rgba(255,255,255,.62)!important}
  .command-intro{padding:20px 18px!important;border-radius:22px!important;margin-top:14px!important}.command-intro h1{font-size:29px!important;font-weight:650!important}.command-status{min-width:auto!important;padding:8px 10px!important}.command-status b{font-size:10px!important}
  .simple-metrics{gap:8px!important}.simple-metrics article{min-height:102px!important;padding:14px 15px!important;border-radius:19px!important}.simple-metrics strong{font-size:30px!important}.simple-metrics .metric-label{font-size:7px!important}.simple-metrics small{font-size:8px!important}
  .ops-section,.conversation-section,.team-section,.shift-section,.quality-section{padding:18px 14px!important;border-radius:22px!important;margin-bottom:16px!important}.simple-head h2,.section-head h2{font-size:22px!important;font-weight:650!important}.section-head{margin-bottom:15px!important}
  .queue-item{background:rgba(255,255,255,.72)!important}.conversation-card-v2,.supervisor-card-v2,.shift-card{backdrop-filter:blur(12px)!important}
  .quality-insight{border-radius:18px!important}.quality-insight>strong{font-size:42px!important}
  .bottom-nav{bottom:max(10px,env(safe-area-inset-bottom))!important}
}
@media(max-width:480px){
  .app-shell:before{width:220px;height:220px}.app-shell:after{width:240px;height:240px}.command-intro h1{font-size:27px!important}.simple-metrics strong{font-size:28px!important}
}