:root { --ink:#172033; --muted:#66768c; --line:#dce4ed; --panel:#fff; --bg:#f5f7fa; --nav:#111827; --nav-muted:#c7d1df; --blue:#16748d; --blue-soft:#e7f4f7; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); }
button, input, select { font:inherit; }
button { cursor:pointer; }
.login-shell { width:min(100% - 32px, 920px); margin:72px auto; display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:.74rem; font-weight:850; letter-spacing:.13em; }
.login-brand h1 { margin:0; font-size:clamp(3rem, 8vw, 5.8rem); line-height:.9; letter-spacing:-.075em; }
.login-brand p:last-child { color:var(--muted); font-size:1.1rem; max-width:430px; }
.login-card,.modal { padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 20px 52px #1f30421a; }
.login-card h2,.modal h2 { margin:0 0 20px; }
form { display:grid; gap:15px; }
label { display:grid; gap:7px; color:#334155; font-size:.84rem; font-weight:800; }
input,select { min-height:40px; width:100%; padding:8px 10px; border:1px solid #bfccda; border-radius:7px; background:#fff; color:var(--ink); }
input:focus,select:focus { outline:3px solid #b8e0e9; border-color:var(--blue); }
button { min-height:38px; border:1px solid var(--blue); border-radius:7px; padding:8px 12px; background:var(--blue); color:#fff; font-weight:800; }
button.secondary,.logout { border-color:var(--line); background:#fff; color:var(--ink); }
button:disabled { opacity:.6; cursor:default; }
.error { min-height:1.2em; margin:0; color:#c42f2f; font-size:.9rem; }
.top-nav { position:sticky; z-index:10; top:0; display:grid; grid-template-columns:minmax(190px,auto) 1fr auto; align-items:center; gap:20px; padding:12px 24px; background:var(--nav); color:#fff; }
.brand h1 { margin:0; font-size:18px; letter-spacing:-.02em; }.brand p { margin:2px 0 0; color:#aab4c5; font-size:12px; }
nav { display:flex; gap:6px; min-width:0; overflow:auto; }.nav-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 12px; border:0; border-radius:7px; background:transparent; color:var(--nav-muted); font-weight:800; text-decoration:none; }.nav-btn.active { background:#ffffff21; color:#fff; }.nav-btn.nav-separator { margin-left:8px; border-left:1px solid #ffffff35; border-radius:0 7px 7px 0; padding-left:20px; }
.top-actions { display:flex; align-items:center; gap:8px; }.settings-menu { position:relative; }.settings-toggle { border-color:#ffffff2b; background:#ffffff14; }.settings-toggle::after { content:"⌄"; margin-left:6px; color:#aab4c5; }.settings-menu.open .settings-toggle::after { content:"⌃"; }.settings-dropdown { display:none; position:absolute; right:0; top:calc(100% + 8px); width:190px; padding:6px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 18px 36px #0f172a40; }.settings-menu.open .settings-dropdown { display:block; }.settings-link { width:100%; justify-content:start; border:0; background:transparent; color:var(--ink); text-decoration:none; display:inline-flex; min-height:38px; align-items:center; padding:8px 12px; border-radius:6px; font-weight:800; }
main { min-width:0; }
.view { display:none; width:min(90%, 1760px); margin:0 auto; padding:24px 0; }.view.active { display:block; }.filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:14px; border:1px solid var(--line); border-radius:9px; background:#fff; }.filters label { min-width:150px; }.filters input,.filters select { opacity:.7; }.source-status { align-self:center; margin-left:auto; color:#7b6132; font-size:.85rem; font-weight:700; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:14px; margin-top:18px; }.metric-card { min-height:150px; padding:18px; border:1px solid var(--line); border-radius:10px; background:#fff; }.metric-card .category { color:var(--blue); font-size:.72rem; font-weight:850; letter-spacing:.08em; }.metric-card h3 { margin:9px 0 7px; font-size:18px; }.metric-card p { margin:0; color:var(--muted); font-size:.89rem; line-height:1.45; }.metric-card .pending { display:inline-block; margin-top:15px; padding:5px 8px; border-radius:999px; background:#f3f6f8; color:#64748b; font-size:.74rem; font-weight:800; }
.table-card { margin-top:18px; overflow:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }.report-table { width:100%; min-width:1440px; border-collapse:collapse; font-size:.82rem; }.report-table th { position:sticky; top:0; background:#f8fafc; color:#53657a; font-size:.72rem; letter-spacing:.02em; white-space:nowrap; }.report-table th,.report-table td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }.report-table th:first-child,.report-table td:first-child { position:sticky; left:0; z-index:1; text-align:left; background:#fff; font-weight:850; }.report-table th:first-child { z-index:2; background:#f8fafc; }.report-table tr:last-child td { border-bottom:0; }
.grouped-table { font-variant-numeric:tabular-nums; }.grouped-table th,.grouped-table td { padding:11px 10px; overflow:hidden; text-overflow:ellipsis; }
.grouped-table thead th { position:sticky; z-index:3; }.grouped-table thead tr:first-child th { top:0; }.grouped-table thead tr:last-child th { top:34px; }.grouped-table thead .group-head { height:34px; padding:6px 10px; text-align:center; text-transform:uppercase; letter-spacing:.05em; font-size:.66rem; font-weight:850; color:#41546b; background:#eef2f7; }.grouped-table thead th:first-child { left:0; z-index:5; }.grouped-table thead tr:last-child th:first-child { left:auto; z-index:3; text-align:right; font-weight:800; background:#f8fafc; }
.grouped-table .group-start { border-left:2px solid #cdd7e2; }.grouped-table tbody td:first-child { z-index:1; }.grouped-table tbody tr:hover td { background:#eef5f8; }.grouped-table tbody tr.latest-row td { background:var(--blue-soft); font-weight:750; }.grouped-table tbody tr.latest-row:hover td { background:#d7eaf0; }
.growth-report-table { table-layout:fixed; min-width:1700px; }.growth-report-table col { width:96px; }.growth-report-table col.col-label { width:78px; }
.adoption-report-table { table-layout:fixed; min-width:1260px; }.adoption-report-table col { width:10%; }.adoption-report-table th,.adoption-report-table td { padding:10px 12px; white-space:normal; }
.growth-reports { display:grid; gap:28px; }.report-toolbar,.report-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }.report-toolbar { padding:4px 0; }.report-toolbar h2,.report-title h3 { margin:0; }.report-actions { display:flex; align-items:center; gap:10px; }.report-actions label { display:block; }.report-actions select { min-width:106px; min-height:36px; padding:6px 8px; }.report-status { min-height:1em; color:#8b5e19; font-size:.8rem; font-weight:700; }.report-section { display:grid; gap:0; }.report-section .table-card { margin-top:12px; } #daily-growth-table { min-height:500px; max-height:500px; } #weekly-growth-table,#monthly-growth-table { min-height:335px; max-height:335px; } #daily-growth-table.has-data,#weekly-growth-table.has-data,#monthly-growth-table.has-data { min-height:0; }
.report-toolbar p,.report-title p { margin:4px 0 0; color:var(--muted); font-size:.88rem; }.report-controls { display:flex; align-items:end; gap:10px; }.report-controls label { min-width:120px; }.definition-note { margin:0; color:var(--muted); font-size:.82rem; line-height:1.5; }.cohort-table { min-width:800px; }.cohort-table th,.cohort-table td { text-align:center; }.cohort-table th:first-child,.cohort-table td:first-child { text-align:left; }.cohort-value { background:color-mix(in srgb, var(--blue-soft) calc(var(--strength) * 100%), white); }.cohort-value strong,.cohort-value small { display:block; }.cohort-value small { margin-top:3px; color:var(--muted); font-size:.68rem; }.cohort-pending { color:#94a3b8; background:#f8fafc; }
.adoption-actions { align-items:end; }.adoption-actions label { min-width:92px; color:var(--muted); font-size:.72rem; font-weight:800; }.adoption-actions select,.adoption-actions input { display:block; width:100%; min-height:36px; margin-top:4px; padding:6px 8px; }.adoption-actions input { max-width:100px; }
.funnel-table { min-width:1380px; }.funnel-table th,.funnel-table td { text-align:center; }.funnel-table th:first-child,.funnel-table td:first-child { text-align:left; }.funnel-table td strong,.funnel-rate { display:block; }.funnel-rate { margin-top:3px; color:var(--muted); font-size:.7rem; font-weight:700; }.funnel-overall { color:#075f76; background:var(--blue-soft); }.funnel-groups th { text-align:center !important; background:#eef3f7; border-right:1px solid var(--line); }.funnel-groups th:first-child { text-align:left !important; }
.placeholder-view { min-height:240px; padding:28px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }.placeholder-view h2 { margin:0; }.placeholder-view p { margin:8px 0 0; color:var(--muted); }
.support-summary { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:2px 0; }.support-kpi { display:flex; flex-direction:column; gap:1px; padding:7px 14px; border:1px solid var(--line); border-radius:9px; background:#fff; min-width:82px; }.support-kpi strong { font-size:1.35rem; line-height:1.05; }.support-kpi span { color:var(--muted); font-size:.72rem; font-weight:800; }.support-kpi.kpi-open { background:#fff8ec; border-color:#f0dcb8; }.support-kpi.kpi-open strong { color:#8b5e19; }.support-kpi.kpi-resolved { background:#eef8f1; border-color:#c9e6d3; }.support-kpi.kpi-resolved strong { color:#27623e; }.support-kpi.kpi-danger { background:#fdeaea; border-color:#f0c8c8; }.support-kpi.kpi-danger strong { color:#a3282a; }.support-table-actions { display:flex; align-items:end; gap:10px; }.support-table-actions .source-status { align-self:center; margin-right:4px; }.support-table-actions label { min-width:100px; }.support-table { min-width:1120px; table-layout:fixed; }.support-table th,.support-table td { text-align:left; white-space:nowrap; }.support-table th:nth-child(1),.support-table td:nth-child(1) { width:70px; text-align:right; }.support-table th:nth-child(2),.support-table td:nth-child(2) { width:150px; }.support-table th:nth-child(3),.support-table td:nth-child(3) { width:230px; overflow:hidden; text-overflow:ellipsis; }.support-table th:nth-child(5),.support-table td:nth-child(5) { width:150px; }.support-table th:nth-child(6),.support-table td:nth-child(6) { width:120px; }.support-table th:nth-child(7),.support-table td:nth-child(7) { width:90px; text-align:center; }.support-table tbody tr { cursor:pointer; }.support-table tbody tr:hover td { background:#f4f7fa; }.support-issue { overflow:hidden; text-overflow:ellipsis; }.ticket-source { display:inline-block; padding:4px 9px; border-radius:999px; background:#eef2f6; color:#475569; font-size:.72rem; font-weight:800; text-transform:capitalize; }.source-support_chat { background:#e8f1fb; color:#245a97; }.source-cancellation_flow { background:#f3eef8; color:#6b4d8a; }.ticket-status { display:inline-block; padding:5px 8px; border-radius:999px; background:#eef2f6; font-size:.72rem; font-weight:850; text-transform:capitalize; }.status-open { background:#fff1d6; color:#8b5e19; }.status-responded { background:#e6effb; color:#245a97; }.status-escalated { background:#fdeaea; color:#a3282a; }.status-resolved,.status-closed,.status-active,.status-completed { background:#e7f5ec; color:#27623e; }.status-canceled,.status-cancelled { background:#fdeaea; color:#a3282a; }.status-past-due { background:#fff1d6; color:#8b5e19; }.status-trialing { background:#e6effb; color:#245a97; }.ticket-detail-button { min-height:32px; white-space:nowrap; font-size:.78rem; }.drawer-backdrop { position:fixed; inset:0; z-index:20; background:#0f172a78; animation:backdrop-in .2s ease; }.ticket-drawer { display:flex; flex-direction:column; width:min(92vw,720px); height:100%; margin-left:auto; overflow:hidden; border-left:1px solid var(--line); background:var(--panel); box-shadow:-20px 0 60px #0f172a40; animation:drawer-in .22s ease; }.ticket-drawer .modal-head { flex:0 0 auto; margin:0; padding:12px 28px; border-bottom:1px solid var(--line); background:var(--panel); }.ticket-drawer .modal-head h2 { margin:0; font-size:18px; line-height:1.2; }.ticket-drawer .modal-head p { margin:2px 0 0; font-size:12px; }.ticket-drawer > div:last-child { flex:1; min-height:0; overflow:auto; padding:24px 28px; }.meta-chip { display:inline-block; padding:5px 9px; border-radius:999px; background:#e6eaf0; color:#475569; font-size:.72rem; font-weight:800; letter-spacing:.02em; }#ticket-detail,#chat-detail { padding:0; display:flex; flex-direction:column; overflow:hidden; }.ticket-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 28px; flex:0 0 auto; }.ticket-strip:first-child { background:#eef3fb; }.ticket-issue-strip { gap:12px; background:#f8f3ec; }.ticket-issue-strip strong { color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }.ticket-issue-strip span { font-weight:650; }#ticket-detail .ticket-history,#chat-detail .ticket-history { flex:1; min-height:0; display:flex; flex-direction:column; margin:0; padding:18px 28px; background:#f5f7f9; }#ticket-detail .ticket-history h3,#chat-detail .ticket-history h3 { flex:0 0 auto; }.ticket-history-scroll { flex:1; min-height:0; overflow:auto; }@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }@keyframes drawer-in { from { transform:translateX(28px); opacity:.3; } to { transform:none; opacity:1; } }@media (prefers-reduced-motion:reduce) { .drawer-backdrop,.ticket-drawer { animation:none; } }.ticket-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 24px; }.ticket-facts div { padding:12px; border-radius:8px; background:#f6f8fa; }.ticket-facts dt { color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; }.ticket-facts dd { margin:5px 0 0; font-weight:750; }.ticket-transcript,.ticket-history { margin-top:22px; }.ticket-transcript h3,.ticket-history h3 { margin:0 0 12px; font-size:1rem; }.ticket-transcript pre { max-height:240px; overflow:auto; margin:0; padding:14px; border-radius:8px; background:#f6f8fa; white-space:pre-wrap; font:inherit; font-size:.82rem; line-height:1.45; }.ticket-message { max-width:84%; margin:0 0 12px; }.ticket-message.from-user { margin-left:auto; text-align:right; }.ticket-message-meta { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }.ticket-message.from-user .ticket-message-meta { justify-content:flex-end; }.ticket-message strong { text-transform:capitalize; }.ticket-message span { color:var(--muted); font-size:.75rem; }.ticket-message p { display:inline-block; margin:0; padding:10px 13px; border-radius:12px; white-space:pre-wrap; line-height:1.45; text-align:left; }.ticket-message.from-agent p { background:#fff; border:1px solid var(--line); border-top-left-radius:3px; }.ticket-message.from-user p { background:var(--blue-soft); border:1px solid #cfe6ec; border-top-right-radius:3px; }
#support-summary,#cancellation-summary,#chat-summary { flex:1; justify-content:center; margin:0 12px; }.support-report-title > :first-child { flex:0 0 auto; }
.cancellation-table { min-width:1240px; table-layout:fixed; }.cancellation-table th,.cancellation-table td { text-align:left; white-space:nowrap; }.cancellation-table th:nth-child(1),.cancellation-table td:nth-child(1) { width:220px; overflow:hidden; text-overflow:ellipsis; }.cancellation-table th:nth-child(2),.cancellation-table td:nth-child(2) { width:150px; }.cancellation-table th:nth-child(4),.cancellation-table td:nth-child(4) { width:80px; text-align:center; }.cancellation-table th:nth-child(5),.cancellation-table td:nth-child(5) { width:120px; }.cancellation-table th:nth-child(6),.cancellation-table td:nth-child(6) { width:150px; }.cancellation-table th:nth-child(7),.cancellation-table td:nth-child(7) { width:150px; }.cancellation-table th:nth-child(8),.cancellation-table td:nth-child(8) { width:150px; }.cancellation-table tbody tr { cursor:pointer; }.cancellation-table tbody tr:hover td { background:#f4f7fa; }
#cancellation-detail { padding:0; display:flex; flex-direction:column; overflow:hidden; }.cancel-scroll { flex:1; min-height:0; overflow:auto; padding:18px 28px; background:#f5f7f9; }.cancel-block { margin:0 0 18px; }.cancel-block:last-child { margin-bottom:0; }.cancel-block h4 { margin:0 0 8px; font-size:.95rem; }.cancel-block p { margin:0; line-height:1.5; white-space:pre-wrap; }.cancel-block .ticket-facts { margin:0; }.cancellation-detail-button { min-height:32px; white-space:nowrap; font-size:.78rem; }.cancellation-drawer { margin-left:auto; border-right:0; border-left:1px solid var(--line); box-shadow:-20px 0 60px #0f172a40; }
.chat-table { min-width:1280px; table-layout:fixed; }.chat-table th,.chat-table td { text-align:left; white-space:nowrap; }.chat-table th:nth-child(1),.chat-table td:nth-child(1) { width:150px; }.chat-table th:nth-child(2),.chat-table td:nth-child(2) { width:220px; overflow:hidden; text-overflow:ellipsis; }.chat-table th:nth-child(4),.chat-table td:nth-child(4) { width:80px; text-align:center; }.chat-table th:nth-child(5),.chat-table td:nth-child(5) { width:130px; }.chat-table th:nth-child(6),.chat-table td:nth-child(6) { width:90px; text-align:center; }.chat-table th:nth-child(7),.chat-table td:nth-child(7) { width:150px; }.chat-table th:nth-child(8),.chat-table td:nth-child(8) { width:130px; }.chat-table tbody tr { cursor:pointer; }.chat-table tbody tr:hover td { background:#f4f7fa; }.chat-noticket { color:var(--muted); }.status-active { background:#e5f2fb; color:#185b83; }.status-escalated { background:#fde9e7; color:#9b352d; }.chat-ticket { color:#27623e; font-weight:800; }.chat-detail-button { min-height:32px; white-space:nowrap; font-size:.78rem; }.chat-message-user,.chat-message-asher { padding:14px; margin-top:10px; border:1px solid var(--line); border-radius:10px; }.chat-message-user { margin-left:36px; background:#f6f8fa; }.chat-message-asher { margin-right:36px; background:var(--blue-soft); }.chat-message-user div,.chat-message-asher div { display:flex; justify-content:space-between; gap:12px; }.chat-message-user span,.chat-message-asher span { color:var(--muted); font-size:.75rem; }.chat-message-user p,.chat-message-asher p { margin:7px 0 0; white-space:pre-wrap; line-height:1.45; }
.settings-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 18px; }.settings-head h3 { margin:0; font-size:22px; }.settings-head p { margin:4px 0 0; color:var(--muted); }.team-list { border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }.team-row { display:grid; grid-template-columns:minmax(160px,1fr) minmax(200px,1fr) 120px 110px; align-items:center; gap:15px; padding:16px 18px; border-bottom:1px solid var(--line); }.team-row:last-child { border-bottom:0; }.team-name { font-weight:800; }.team-email { color:var(--muted); font-size:.9rem; }.role-badge { width:max-content; padding:5px 8px; border-radius:999px; background:var(--blue-soft); color:#075f76; font-size:.75rem; font-weight:850; text-transform:capitalize; }.access { color:#3d6952; font-size:.85rem; font-weight:700; }.empty { padding:28px; color:var(--muted); text-align:center; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:#0f172a78; }.modal { width:min(100%,460px); box-shadow:0 25px 70px #0f172a61; }.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.modal-head p { margin:-12px 0 20px; color:var(--muted); font-size:.9rem; }.icon-button { flex:0 0 auto; align-self:flex-start; display:grid; place-items:center; height:34px; width:34px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:26px; line-height:1; transition:background .15s, color .15s; }.icon-button:hover { background:#eef2f6; color:var(--ink); }.icon-button:focus { outline:none; }.icon-button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }.modal-actions { display:flex; justify-content:end; gap:8px; margin-top:6px; }
@media (max-width:780px) { .login-shell{grid-template-columns:1fr;margin:42px auto;gap:28px}.top-nav{grid-template-columns:1fr;padding:14px}.top-actions{justify-content:space-between}.view{padding:16px}.source-status{margin-left:0}.team-row{grid-template-columns:1fr 1fr}.team-email{grid-column:1/-1}.support-summary{grid-template-columns:1fr 1fr}.ticket-facts{grid-template-columns:1fr} }