.an-page { max-width: 1680px; margin: auto; }
.an-header { background: linear-gradient(120deg, #112445, #1c3b68); color: #fff; border-radius: 16px; padding: 26px 30px; display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 20px; }
.an-header h1 { font: 800 30px Manrope, sans-serif; margin: 4px 0 8px; letter-spacing: -.8px; }
.an-header p { margin: 0; color: #b8cee9; font-size: 14px; }.an-header span { font-size: 14px; }.an-sync { display: grid; gap: 10px; justify-items: end; }.an-sync small { color: #c2d2e7; font-size: 12px; }.an-sync-btn { background: #fff; color: #16315b; }
.an-filters { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding: 18px; margin-bottom: 20px; }
.an-filters label, .an-table-tools label { display: grid; gap: 7px; font-size: 14px; color: var(--muted); flex: 1; min-width: 150px; }
.an-filters input, .an-filters select, .an-table-tools select { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; min-height: 42px; padding: 8px 10px; min-width: 0; max-width: 100%; }
.an-page button:disabled { opacity: .5; cursor: not-allowed; }.an-page :focus-visible { outline: 3px solid #67a4ff; outline-offset: 3px; }
.an-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.an-kpi { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 12px; padding: 20px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); min-width: 0; }
.an-kpi > span { color: var(--muted); font-size: 14px; }.an-kpi > strong { font: 800 clamp(22px, 2vw, 32px) Manrope, sans-serif; overflow-wrap: anywhere; color: var(--ink); font-variant-numeric: tabular-nums; }.an-kpi > small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.an-green { border-top-color: var(--teal); }.an-orange { border-top-color: var(--amber); }.an-red { border-top-color: var(--rose); }
.an-panel { margin-bottom: 20px; min-width: 0; }.an-panel .panel-header h2 { font-size: 18px; }.an-panel .panel-header p { font-size: 14px; line-height: 1.5; }.an-panel-body { padding: 20px; }.an-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }.an-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.an-bars { display: grid; gap: 20px; }.an-bar-label { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; margin-bottom: 8px; }.an-bar-label small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }.an-bars progress { display: block; width: 100%; height: 10px; border: none; border-radius: 8px; overflow: hidden; background: var(--blue-soft); accent-color: var(--blue); }.an-bars progress::-webkit-progress-bar { background: var(--blue-soft); border-radius: 8px; }.an-bars progress::-webkit-progress-value { background: var(--blue); border-radius: 8px; }
.an-table-wrap { max-width: 100%; overflow-x: auto; }.an-table-wrap table { min-width: 680px; width: 100%; border-collapse: collapse; }.an-table-wrap th { text-align: left; color: var(--muted); background: var(--soft); font-size: 12px; letter-spacing: .3px; }.an-table-wrap td { font-size: 14px; }.an-table-wrap td, .an-table-wrap th { padding: 15px 12px; border-bottom: 1px solid var(--line); }.an-money { font-weight: 700; color: var(--teal); }.an-id { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }.an-rank { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); font-weight: 800; color: var(--muted); }.an-rank-1 { background: #fff0ba; color: #735100; }.an-rank-2 { background: #e5edf7; color: #415471; }.an-rank-3 { background: #f7e3d7; color: #814727; }
.an-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }.an-winner { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 25px; }.an-winner h2 { font-size: 19px; margin: 15px 0; }.an-winner > strong { font-size: 30px; color: var(--teal); overflow-wrap: anywhere; }.an-winner p { color: var(--muted); font-size: 14px; }
.an-chart-scroll { overflow-x: auto; }.an-chart { width: 100%; min-width: 600px; height: auto; }.an-chart text { fill: var(--muted); font-size: 12px; }.an-gridline { stroke: var(--line); }.an-created-bar { fill: var(--blue); }.an-won-bar { fill: var(--teal); }.an-legend { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 15px; }.an-blue-dot, .an-green-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }.an-green-dot { background: var(--teal); margin-left: 14px; }
.an-method { font-size: 13px; color: var(--muted); line-height: 1.8; border-left: 3px solid var(--line); padding: 0 16px; }.an-alert { border: 1px solid var(--rose); background: var(--rose-soft); color: var(--ink); padding: 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; line-height: 1.6; }.an-loading { color: var(--muted); font-size: 14px; }.an-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }.an-setup { padding: 40px; text-align: center; }.an-setup p { color: var(--muted); line-height: 1.7; }.an-table-tools { display: flex; max-width: 260px; margin-bottom: 16px; }.an-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 10px; font-size: 14px; }
@media(max-width: 1200px) { .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }.an-two-col { grid-template-columns: 1fr; } }
@media(max-width: 680px) { .an-header { padding: 22px; flex-direction: column; align-items: start; }.an-header h1 { font-size: 25px; }.an-sync { justify-items: start; }.an-kpis, .an-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); }.an-kpi { padding: 15px; }.an-panel-body { padding: 14px; }.an-filters label { min-width: 120px; }.an-podium .an-winner:first-child { grid-column: 1 / -1; } }
@media(max-width: 380px) { .an-kpis, .an-summary, .an-podium { grid-template-columns: 1fr; } }
.an-funnel { display: grid; gap: 12px; }.an-funnel-row { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 18px; align-items: center; }.an-funnel-row > div:first-child { text-align: right; font-size: 13px; }.an-funnel-row small { display: block; color: var(--muted); font-weight: 500; margin-top: 3px; }.an-funnel-track { display: flex; justify-content: center; }.an-funnel-track > span { min-width: 90px; min-height: 42px; border-radius: 8px; display: flex; gap: 7px; align-items: center; justify-content: center; color: #0c2448; font-weight: 800; background: linear-gradient(90deg, #8ab7ff, #c6dcff); box-shadow: 0 5px 14px rgba(49,111,226,.18); }.an-funnel-track > span small { color: #36577e; margin: 0; }
@media(max-width: 680px) { .an-funnel-row { grid-template-columns: 1fr; gap: 7px; }.an-funnel-row > div:first-child { text-align: left; }.an-funnel-track { justify-content: start; } }

/* Chat analytics — independent operational report */
.chat-analytics-page .an-header { background: radial-gradient(circle at 88% 18%, rgba(83,210,171,.28), transparent 24%), linear-gradient(120deg, #062d27, #075f4d 58%, #088269); box-shadow: 0 20px 52px rgba(4,91,73,.18); }
.chat-analytics-page .an-header p, .chat-analytics-page .an-header span { color: #bdeade; }.chat-analytics-page .an-sync > span { color: #8ff0d2; font-weight: 800; }.chat-analytics-page .an-sync > span::first-letter { color: #41e8b5; }.an-export-btn { color: #07654f; background: #fff; box-shadow: none; }
.chat-range-bar { display: flex; align-items: center; gap: 6px; padding: 9px 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }.chat-range-bar > span { padding: 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; }.chat-range-bar button { min-height: 34px; padding: 0 14px; color: #566579; border: 0; border-radius: 9px; background: var(--soft); font-size: 10px; font-weight: 800; }.chat-range-bar button:hover { color: #067c5e; background: #e4f7f0; }
.chat-analytics-page .an-filters { padding: 13px; }.chat-analytics-page .an-filters .btn { background: #0a9b76; }.chat-analytics-page .an-filters .btn.secondary { color: #08765b; border-color: #cce9df; background: #eefaf6; }
.chat-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }.chat-kpis .an-kpi { border-top: 0; border-left: 4px solid #25b88d; border-radius: 16px; }.chat-kpis .an-red { border-left-color: var(--rose); }.chat-kpis .an-orange { border-left-color: var(--amber); }
.chat-main-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .8fr); gap: 20px; }.chat-lower-grid { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr); }
.chat-daily-chart { min-height: 275px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(24px, 1fr); align-items: end; gap: 7px; overflow-x: auto; padding: 12px 5px 2px; }.chat-daily-chart > div { height: 245px; min-width: 24px; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 5px; }.chat-daily-chart > div > span { width: min(34px, 78%); height: 100%; display: flex; align-items: flex-end; border-radius: 9px 9px 4px 4px; background: #edf8f4; }.chat-daily-chart i { width: 100%; display: block; border-radius: inherit; background: linear-gradient(180deg, #78d9bd, #0bad7f); }.chat-daily-chart strong { color: #16856a; font-size: 9px; }.chat-daily-chart small { color: var(--muted); font-size: 8px; white-space: nowrap; }
.chat-channel-cards { display: grid; gap: 13px; }.chat-channel-cards article { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--soft) 60%, var(--surface)); }.chat-channel-cards article > div { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; }.chat-channel-mark { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: #2aaae8; }.chat-channel-mark.instagram { background: linear-gradient(145deg,#fd4d81,#8247d5); }.chat-channel-cards strong { font-size: 12px; }.chat-channel-cards b { font: 800 17px Manrope, sans-serif; }.chat-channel-cards progress { width: 100%; height: 7px; margin: 12px 0 7px; border: 0; border-radius: 99px; overflow: hidden; accent-color: #13af83; }.chat-channel-cards progress::-webkit-progress-bar { border-radius: 99px; background: var(--soft); }.chat-channel-cards progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg,#75d8bb,#0aaa7e); }.chat-channel-cards small { color: var(--muted); font-size: 9px; }
.chat-recent-list { display: grid; }.chat-recent-list button { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 11px 4px; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.chat-recent-list button:hover strong { color: #07805f; }.chat-recent-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: #08795e; border-radius: 50%; background: #dcf5ed; font-weight: 900; }.chat-recent-list button > span:nth-child(2) { min-width: 0; }.chat-recent-list strong, .chat-recent-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.chat-recent-list strong { font-size: 11px; }.chat-recent-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }.chat-recent-list time { color: var(--muted); font-size: 9px; }.chat-recent-list button > b { min-width: 19px; height: 19px; display: grid; place-items: center; color: #fff; border-radius: 99px; background: #0caf82; font-size: 8px; }
.chat-attention-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }.chat-attention-grid .an-kpi { min-height: 125px; box-shadow: none; }.chat-open-inbox { width: 100%; margin-top: 14px; background: #078565; }
.chat-topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }.chat-topic-list > div { display: grid; grid-template-columns: 26px minmax(120px,.7fr) minmax(90px,1fr) 44px; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }.chat-topic-list span { width: 24px; height: 24px; display: grid; place-items: center; color: #08795e; border-radius: 8px; background: #e1f7ef; font-size: 9px; font-weight: 900; }.chat-topic-list strong { font-size: 11px; }.chat-topic-list > div > div { height: 6px; overflow: hidden; border-radius: 99px; background: var(--soft); }.chat-topic-list i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#8ce0c7,#0caf80); }.chat-topic-list b { color: var(--muted); font-size: 10px; text-align: right; }
:root[data-theme="dark"] .chat-daily-chart > div > span, :root[data-theme="dark"] .chat-channel-cards progress::-webkit-progress-bar { background: #172c2c; }:root[data-theme="dark"] .chat-channel-cards article { background: var(--soft); }
@media(max-width: 1180px) { .chat-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }.chat-main-grid, .chat-lower-grid { grid-template-columns: 1fr; } }
@media(max-width: 680px) { .chat-range-bar { overflow-x: auto; }.chat-kpis, .chat-attention-grid, .chat-topic-list { grid-template-columns: 1fr; }.chat-daily-chart { min-width: 700px; }.chat-topic-list > div { grid-template-columns: 26px minmax(100px,.8fr) minmax(70px,1fr) 35px; } }