
.insights { --member:#8270db; --message:#4e94dc; --ticket:#d7a847; --suggestion:#4fa993; --moderation:#d97891; font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; display:grid; gap:22px; }
.insights h1,.insights h2 { font-family:inherit; }
.insights h1 { font-size:30px; letter-spacing:-.9px; font-weight:700; }
.insights h2 { font-size:17px; letter-spacing:-.3px; font-weight:650; }
.insights p { font-size:13px; color:var(--muted); line-height:1.6; }
.insights-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.insights-header p { margin-top:7px; }
.insights-header-actions { display:flex; align-items:center; gap:8px; }
.insights-body { display:grid; gap:22px; min-width:0; }
.insights .button { font-size:13px; min-height:38px; }
.insights-header-actions .icon { width:16px; height:16px; }
.insights-header-actions .insights-export { background:var(--paper); }
.insights-header-actions .insights-refresh { background:transparent; border-color:transparent; }
.insights-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:2px; }
.insights-periods { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.insights .insights-periods button.button { background:transparent; color:var(--muted); padding:8px 12px; margin:0; min-height:40px; border:1px solid transparent; border-radius:8px; box-shadow:none; font-size:13px; font-weight:600; transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease; }
.insights .insights-periods button.button[aria-pressed=true] { background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent-ink); }
.insights .insights-periods button.button:hover:not([aria-pressed=true]) { background:var(--paper); border-color:var(--line); color:var(--ink); }
.insights .insights-periods button.button:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.insights-custom .icon { width:15px; height:15px; }
.insights-range-label { color:var(--muted); font-size:12px; text-align:right; }
.insights-feedback:empty { display:none; }
.insights-feedback .notice { margin:0; flex-wrap:wrap; }
.insights-content { display:grid; gap:22px; min-width:0; }
.insights-content[aria-busy=true] { opacity:.65; }
.insights-workspace { border:1px solid var(--line); border-radius:16px; background:var(--paper); overflow:hidden; min-width:0; }
.insights-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--line); background:var(--paper); }
.insights-metric { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:10px; border:0; border-right:1px solid var(--line); padding:23px 22px 21px; background:transparent; text-align:left; }
.insights-metric:last-child { border-right:0; }
.insights-metric::after { content:""; position:absolute; left:22px; right:22px; bottom:0; height:3px; background:transparent; border-radius:3px 3px 0 0; }
.insights-metric[aria-selected=true] { background:color-mix(in srgb,var(--tone) 5%,var(--paper)); }
.insights-metric[aria-selected=true]::after { background:var(--tone); }
.insights-metric:hover { background:var(--wash); }
.insights-metric:focus-visible { outline:2px solid var(--tone); outline-offset:-3px; }
.insights .tone-members { --tone:var(--member); }
.insights .tone-messages { --tone:var(--message); }
.insights .tone-tickets { --tone:var(--ticket); }
.insights .tone-suggestions { --tone:var(--suggestion); }
.insights .tone-moderation { --tone:var(--moderation); }
.insights-metric-label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--muted); }
.insights-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--tone); display:inline-block; }
.insights-metric-value { font-size:29px; font-weight:650; line-height:1.1; letter-spacing:-.9px; font-variant-numeric:tabular-nums; }
.insights-metric small { font-size:11px; line-height:1.4; }
.insights-main { padding:26px 26px 16px; min-width:0; }
.insights-chart-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:24px; }
.insights-chart-heading p { font-size:12px; margin-top:5px; }
.insights-recorded-days { display:inline-block; margin-top:8px; border:1px solid var(--line); border-radius:5px; padding:3px 6px; font-size:10px; color:var(--muted); }
.insights-grouping { display:flex; align-items:center; gap:2px; padding:3px; background:var(--wash); border-radius:8px; }
.insights .insights-grouping .button { min-height:28px; padding:4px 10px; font-size:11px; border:0; border-radius:6px; background:transparent; box-shadow:none; }
.insights .insights-grouping .button[aria-pressed=true] { background:var(--paper); box-shadow:0 1px 3px #00000012; }
.insights-plot { position:relative; width:100%; min-width:0; }
.insights-plot-main { height:280px; }
.insights-plot-support { height:205px; }
.insights-plot canvas { display:block; width:100%; height:100%; }
.insights-canvas:focus-visible { outline:2px solid var(--accent-line); outline-offset:5px; border-radius:2px; }
.insights-chart-footer { border-top:1px solid var(--line); margin-top:16px; padding-top:13px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; min-height:36px; }
.insights-selection { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); min-height:19px; }
.insights-selection strong { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.insights-partial { color:var(--muted); font-size:11px; }
.insights-period-total { color:var(--muted); font-size:11px; text-align:right; }
.insights .insights-chart-help { font-size:10px; color:var(--muted); margin-top:9px; }
.insights-support { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:22px; }
.insights-support-panel { background:var(--paper); padding:24px 25px 20px; border:1px solid var(--line); border-radius:14px; min-width:0; }
.insights-support-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.insights-support-heading>.icon { width:19px; height:19px; color:var(--muted); }
.insights-support-heading p { font-size:12px; margin-top:5px; }
.insights-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:19px 0 10px; }
.insights .insights-legend .button { min-height:28px; padding:2px 0; gap:7px; border:0; background:transparent; box-shadow:none; font-size:11px; font-weight:400; }
.insights-legend .button strong { color:var(--ink); font-weight:600; margin-left:3px; }
.insights-legend .button[aria-pressed=false] { opacity:.5; text-decoration:line-through; }
.insights-action-total { display:flex; align-items:baseline; gap:9px; margin:20px 0 20px; }
.insights-action-total strong { font-size:29px; font-weight:650; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.insights-action-total span { font-size:12px; color:var(--muted); }
.insights-action-rows { display:grid; gap:18px; max-height:220px; overflow-y:auto; padding-right:3px; }
.insights-action-row>div:first-child { display:flex; align-items:center; gap:12px; font-size:12px; margin-bottom:8px; }
.insights-action-row strong { margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }
.insights-action-row small { width:35px; text-align:right; font-size:11px; }
.insights-action-track { height:7px; background:var(--wash); border-radius:4px; overflow:hidden; }
.insights-action-fill { display:block; height:100%; background:var(--moderation); border-radius:4px; }
.insights .empty { min-height:220px; padding:34px 20px; }
.insights .empty h3 { font-size:15px; font-weight:600; }
.insights .empty p { font-size:12px; max-width:48ch; }
.insights .insights-moderation .empty { min-height:160px; }
.insights-loading { min-height:400px; border:1px solid var(--line); border-radius:16px; background:var(--paper); display:flex; align-items:center; justify-content:center; gap:12px; color:var(--muted); }
.insights-loading strong { font-weight:500; }
.insights-coverage { display:flex; gap:10px; align-items:flex-start; }
.insights-coverage .icon { width:17px; height:17px; color:var(--muted); margin-top:2px; }
.insights-coverage p,.insights-panel-note { font-size:11px; max-width:90ch; }
.insights-records { background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.insights-records summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:19px 23px; cursor:pointer; list-style:none; font-size:13px; font-weight:600; }
.insights-records summary::-webkit-details-marker { display:none; }
.insights-records summary>span { display:flex; align-items:center; gap:10px; }
.insights-records summary>span:last-child { color:var(--muted); font-size:12px; font-weight:400; }
.insights-records summary .icon { width:17px; height:17px; }
.insights-records[open] summary>span:last-child .icon { transform:rotate(180deg); }
.insights-table-scroll { overflow-x:auto; }
.insights-table-scroll:focus-visible { outline:2px solid var(--accent-line); outline-offset:-2px; }
.insights-records table { border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.insights-records caption { text-align:left; font-size:11px; color:var(--muted); padding:0 23px 16px; white-space:normal; }
.insights-records th,.insights-records td { padding:12px 23px; border-top:1px solid var(--line); text-align:right; }
.insights-records th:first-child { text-align:left; }
.insights-records thead { background:var(--wash); }
.insights-records tbody th { font-weight:400; }
.insights-records tbody tr:hover { background:var(--wash); }
.insights-footer { display:flex; justify-content:space-between; gap:14px; color:var(--muted); font-size:10px; }
.insights-dates { display:grid; gap:18px; }
.insights-dates>div { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.insights-dates label { display:grid; gap:8px; font-size:12px; font-weight:600; color:var(--ink); }
.insights-dates input { min-width:0; width:100%; min-height:44px; padding:10px 12px; font-size:13px; font-weight:400; border:1px solid var(--edge); border-radius:8px; background:var(--canvas); color:var(--ink); }
.insights-dates input:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.insights-date-error { color:var(--red); font-size:12px; }
.insights-date-error:empty { display:none; }
@media(max-width:1100px) {
  .insights-metric { padding:20px 14px; }
  .insights-metric::after { left:14px; right:14px; }
  .insights-metric-value { font-size:25px; }
  .insights-metric-label { font-size:11px; gap:6px; }
  .insights-support { grid-template-columns:1.2fr 1fr; gap:18px; }
  .insights-support-panel { padding:20px 18px; }
  .insights-toolbar { align-items:flex-start; }
  .insights-range-label { padding-top:10px; max-width:165px; line-height:1.5; }
}
@media(max-width:750px) {
  .insights,.insights-body { gap:18px; }
  .insights-header { align-items:flex-start; }
  .insights-header-actions { gap:2px; }
  .insights-toolbar { align-items:flex-start; flex-direction:column; gap:6px; }
  .insights-range-label { padding-top:0; max-width:none; text-align:left; }
  .insights-metrics { display:flex; overflow-x:auto; scrollbar-width:thin; }
  .insights-metric { flex:0 0 145px; padding:18px; }
  .insights-metric-label { font-size:12px; }
  .insights-main { padding:22px 18px 14px; }
  .insights-plot-main { height:270px; }
  .insights-chart-footer { align-items:flex-start; flex-direction:column; gap:7px; }
  .insights-period-total { text-align:left; }
  .insights-support { grid-template-columns:minmax(0,1fr); }
  .insights-footer { flex-direction:column; gap:6px; }
}
@media(max-width:450px) {
  .insights-header { flex-wrap:wrap; gap:14px; }
  .insights-header-actions { width:100%; justify-content:flex-end; margin-top:-2px; }
  .insights h1 { font-size:28px; }
  .insights-periods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .insights-chart-heading { gap:10px; margin-bottom:20px; }
  .insights-chart-heading p { max-width:22ch; }
  .insights .insights-grouping .button { padding:4px 7px; }
  .insights-main { padding:20px 13px 14px; }
  .insights-records summary { padding:17px; }
  .insights-dates>div { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .insights .insights-periods button.button { transition:none; } }
