/* Category Charts v1: clear app-scoped Top Free analytics, visually aligned with Keyword Monitor. */
body[data-page="trends"] #page-trends>.ctx-scoped-panel:not(.cat-page){display:none!important}
body[data-page="trends"] #page-trends>.cat-page{display:block!important}
body[data-page="trends"] .main-col{max-width:1600px;padding:24px 28px 54px}
.cat-page{--cat-border:var(--line,#e4eaf4);--cat-muted:var(--secondary,#6b7890);
 --cat-accent:#526fe6;--cat-soft:var(--soft,#f7f9fc);
 min-width:0;color:var(--ink,#24334b);font-variant-numeric:tabular-nums}
.cat-page .cat-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:17px}
.cat-kicker{font-size:10px;letter-spacing:1px;font-weight:840;color:#6170cb}
.cat-head h2{font-size:27px;line-height:1.28;letter-spacing:-.6px;font-weight:820;color:var(--ink-strong,#15243a);margin:6px 0}
.cat-head p{font-size:12px;line-height:1.55;color:var(--cat-muted);margin:0;max-width:760px}
.cat-head-tools{display:flex;gap:8px;flex:0 0 auto}
.cat-head-tools button{min-height:40px;border:1px solid var(--cat-border);border-radius:8px;
 background:var(--paper,#fff);color:var(--ink,#24334b);padding:8px 13px;
 font-size:11.5px;font-weight:775;cursor:pointer}
.cat-head-tools button:hover{background:var(--blue-bg,#eef1ff);border-color:#c7cff2;color:var(--cat-accent)}
.cat-head-tools button:disabled{opacity:.5}
.cat-source{min-height:47px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 17px;
 background:var(--paper,#fff);border:1px solid var(--cat-border);border-radius:10px;
 padding:10px 15px;margin-bottom:13px;color:var(--cat-muted);font-size:11.5px;line-height:1.5}
.cat-source strong{color:var(--ink-strong,#15243a);font-weight:780}
.cat-state{font-size:10.5px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;
 border-radius:7px;border:1px solid transparent;white-space:nowrap;font-weight:770}
.cat-state.good{color:#267f65;background:#e9f8f1;border-color:#cbeadd}
.cat-state.warning{color:#a66b2c;background:#fff6e9;border-color:#f1dfbd}
.cat-state.bad{color:#bc4b52;background:#fff0f1;border-color:#f2d0d4}
.cat-filters{display:flex;flex-wrap:wrap;align-items:end;gap:9px;padding:17px 18px;
 background:var(--paper,#fff);border:1px solid var(--cat-border);border-radius:11px;margin-bottom:14px}
.cat-filters>label{display:flex;flex-direction:column;gap:6px;color:var(--cat-muted);
 font-weight:750;font-size:10.5px;min-width:0;flex:1 1 160px}
.cat-filters>label:first-child{flex:2 1 220px}
.cat-filters select{width:100%;height:42px;min-width:0;border:1px solid var(--cat-border);
 background:var(--paper,#fff);color:var(--ink-strong,#15243a);border-radius:8px;
 padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer;text-overflow:ellipsis}
.cat-filters select:disabled{opacity:.63;cursor:default}
.cat-filters select:focus-visible,.cat-filters button:focus-visible,
.cat-page button:focus-visible,.cat-page a:focus-visible{outline:3px solid #a0aeff;outline-offset:2px}
.cat-chart-type{display:flex;flex-direction:column;gap:6px;min-width:236px;flex:1 1 250px}
.cat-chart-type>span{font-size:10.5px;font-weight:750;color:var(--cat-muted)}
.cat-type-tabs{display:flex;gap:3px;background:var(--cat-soft);border:1px solid var(--cat-border);
 border-radius:8px;padding:3px;height:42px}
.cat-type-tabs button{border:0;border-radius:6px;background:transparent;color:var(--cat-muted);
 padding:6px 13px;font-size:11.5px;white-space:nowrap;font-weight:730;cursor:default}
.cat-type-tabs button.active{background:#526fe6;color:white;box-shadow:0 1px 5px #526fe622}
.cat-type-tabs button:disabled{opacity:.5}
.cat-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;margin-bottom:13px}
.cat-card{display:flex;align-items:flex-start;flex-direction:column;gap:8px;text-align:left;
 padding:16px 17px;background:var(--paper,#fff);border:1px solid var(--cat-border);
 border-radius:10px;color:var(--ink-strong,#15243a);cursor:pointer;min-width:0;transition:border .15s}
.cat-card.active{border-color:#8498ef;background:var(--blue-bg,#eff1ff);box-shadow:0 0 0 1px #b5befd}
.cat-card:hover{border-color:#859eec}
.cat-card-label{font-size:11.5px;font-weight:760;color:var(--cat-muted);line-height:1.35}
.cat-card strong{font-size:25px;letter-spacing:-.5px;line-height:1.15;font-weight:850;word-break:break-word}
.cat-card-foot{display:flex;width:100%;justify-content:space-between;gap:8px;
 font-size:10px;color:var(--cat-muted);font-weight:700;margin-top:3px}
.cat-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:15px}
.cat-kpi{display:flex;flex-direction:column;gap:7px;min-width:0;background:var(--paper,#fff);
 border:1px solid var(--cat-border);border-radius:10px;padding:16px 17px}
.cat-kpi strong{font-size:24px;letter-spacing:-.5px;font-weight:850;line-height:1.15;
 color:var(--ink-strong,#15243a)}
.cat-kpi span{font-size:11.5px;font-weight:760;line-height:1.45}
.cat-kpi small{font-size:10px;color:var(--cat-muted);line-height:1.55}
.cat-surface{min-width:0;background:var(--paper,#fff);border:1px solid var(--cat-border);
 border-radius:11px;overflow:hidden;margin-bottom:15px}
.cat-section-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:18px 20px 13px}
.cat-section-head h3{font-size:18px;line-height:1.3;margin:5px 0 4px;letter-spacing:-.25px;
 font-weight:820;color:var(--ink-strong,#15243a)}
.cat-section-head p{font-size:11px;color:var(--cat-muted);line-height:1.6;margin:0}
.cat-graph-meta{font-size:10.5px;color:var(--cat-muted);background:var(--cat-soft);
 border:1px solid var(--cat-border);padding:8px 10px;border-radius:7px;white-space:nowrap}
.cat-plot{padding:5px 18px 7px;min-height:225px;display:grid;place-items:center;color:var(--cat-muted)}
.cat-plot svg{display:block;width:100%;max-height:360px;min-height:215px;height:auto;color:var(--cat-muted)}
.cat-plot-empty{max-width:590px;margin:auto;text-align:center;font-size:12px;line-height:1.8;
 color:var(--cat-muted);padding:38px 20px}
.cat-graph-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
 padding:12px 20px;font-size:10.5px;color:var(--cat-muted);line-height:1.55;
 background:var(--cat-soft);border-top:1px solid var(--cat-border)}
.cat-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start}
.cat-bottom>.cat-surface{margin-bottom:0}
.cat-bottom .cat-section-head{padding-bottom:14px}
.cat-table-holder{max-width:100%;overflow:auto;max-height:425px;scrollbar-color:#c9d2e3 transparent}
.cat-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:340px;
 color:var(--ink,#24334b)}
.cat-table th{background:var(--cat-soft);color:var(--cat-muted);text-align:left;
 font-weight:800;font-size:10.5px;position:sticky;top:0;z-index:2;white-space:nowrap}
.cat-table th,.cat-table td{border-top:1px solid var(--cat-border);padding:12px 14px;vertical-align:middle}
.cat-table td{font-size:11.7px;line-height:1.5}
.cat-table td b{color:var(--ink-strong,#15243a);font-size:12.4px;white-space:nowrap}
.cat-table td strong{font-size:11.7px;font-weight:765}
.cat-table tbody tr:hover td{background:var(--cat-soft)}
.cat-table tbody .cat-row-selected td{background:var(--blue-bg,#eef1ff)}
.cat-table tbody .cat-own-outside td{border-top:2px dashed #a4afe3;background:var(--cat-soft)}
.cat-table .cat-rank-emphasis{color:#455ece}
.cat-pill{display:inline-flex;margin-left:8px;border-radius:5px;padding:3px 6px;
 color:#5068cf;background:#e7edff;font-size:9px;font-weight:770;vertical-align:middle}
.cat-muted{color:var(--cat-muted)}
.cat-table a{color:var(--blue-strong,#5364db);font-weight:750;white-space:nowrap}
.cat-history-table{min-width:600px}
.cat-history-table .cat-tr-empty{color:var(--cat-muted)}
.cat-history-table .cat-tr-empty td b{color:var(--cat-muted);font-weight:630}
.cat-history-toggle{border-top:1px solid var(--cat-border)}
.cat-history-toggle summary{list-style:none;padding:11px 18px;cursor:pointer;color:var(--blue-strong,#5364db);
 font-size:11px;font-weight:780}
.cat-history-toggle summary::-webkit-details-marker{display:none}
.cat-history-toggle summary:hover{background:var(--cat-soft)}
.cat-method{border:1px solid var(--cat-border);border-radius:9px;color:var(--cat-muted);
 background:var(--cat-soft);padding:13px 16px;font-size:11px;line-height:1.7;margin:14px 0 25px}
.cat-empty{padding:23px;color:var(--cat-muted);font-size:12px;line-height:1.8}
@media (max-width:1200px){
 body[data-page="trends"] .main-col{padding:22px 20px}
 .cat-filters{gap:10px}
 .cat-bottom{grid-template-columns:1fr}
 .cat-table-holder{max-height:340px}
}
@media(max-width:900px){
 body[data-page="trends"] .main-col{padding:17px 14px 90px}
 .cat-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cat-head{flex-direction:column;align-items:stretch!important}
 .cat-head-tools{justify-content:flex-end}
}
@media(max-width:650px){
 body[data-page="trends"] .main-col{padding:14px 10px 92px}
 .cat-page .cat-head h2{font-size:22px}
 .cat-filters{padding:12px}
 .cat-filters>label{flex:1 1 calc(50% - 10px)}
 .cat-chart-type{flex:1 1 100%}
 .cat-type-tabs button{flex:1}
 .cat-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .cat-card{padding:12px}
 .cat-card strong{font-size:21px}
 .cat-kpis{gap:8px}
 .cat-kpi{padding:12px}
 .cat-kpi strong{font-size:21px}
 .cat-kpi small{font-size:9.5px}
 .cat-section-head{padding:13px;display:block}
 .cat-graph-meta{display:inline-block;margin-top:8px}
 .cat-plot{min-height:160px;padding:7px 8px}
 .cat-plot svg{min-height:160px}
 .cat-graph-foot{padding:11px 13px}
 .cat-bottom{gap:10px}
 .cat-method{font-size:10.5px}
}
body.dark .cat-page .cat-type-tabs button.active{background:#526fe6;color:white}
body.dark .cat-page .cat-card.active{background:var(--blue-bg);border-color:#798de1}
body.dark .cat-page .cat-state.good{background:#1c443b;color:#a2f1d3;border-color:#306554}
body.dark .cat-page .cat-state.warning{background:#4a3726;color:#ffdcba;border-color:#76563a}
body.dark .cat-page .cat-state.bad{background:#4d2a34;color:#ffb9c4;border-color:#704652}
body.dark .cat-table tbody .cat-row-selected td{background:var(--blue-bg)}
body.dark .cat-pill{background:#303d66;color:#b7c8ff}


/* Categories use the chart's period selector; collapse redundant global fields on phones. */
@media(max-width:650px){
 body[data-page="trends"] #contextBar{padding:9px 12px 10px;gap:6px}
 body[data-page="trends"] #contextBar .ctx-top{min-height:18px}
 body[data-page="trends"] #contextBar .ctx-fields{gap:7px}
 body[data-page="trends"] #contextBar .ctx-field:has(#ctxLanguage),
 body[data-page="trends"] #contextBar .ctx-field:has(#ctxPeriod){display:none!important}
 body[data-page="trends"] #contextBar .ctx-footer{display:none!important}
 body[data-page="trends"] #contextBar .ctx-app{grid-column:1/-1}
 body[data-page="trends"] #contextBar .ctx-app-field select{height:40px}
 .cat-head{margin-bottom:12px!important}
 .cat-head p{font-size:11.4px}
 .cat-head-tools button{min-height:37px;font-size:10.8px}
 .cat-source{margin-bottom:9px}
 .cat-filters{margin-bottom:11px}
}