/* FunOn ASO · one persistent application shell
 * Overrides outdated Keyword Monitor v5/v6 full-screen/sidebar layouts.
 * The canonical navigation comes only from site/index.html; never cloned.
 */
:root{
 --funon-side-width:244px;
 --funon-side-collapsed:76px;
 --funon-header-height:70px;
 --funon-accent:var(--blue-strong,#5364db);
 --funon-rail:#101a2e;
}
body.kw5-mode{--kw5-bg:var(--canvas,#f5f7fb);background:var(--canvas,#f5f7fb)}
body.kw5-mode .work-area{background:var(--canvas,#f5f7fb)}
/* One true home sidebar across ALL desktop sections */
@media(min-width:901px){
 .app-shell,body.kw5-mode .app-shell{
  display:grid!important;grid-template-columns:var(--funon-side-width) minmax(0,1fr)!important;
  width:100%;max-width:none;min-width:0;margin:0;align-items:stretch;
 }
 body.nav-collapsed .app-shell,body.kw5-mode.nav-collapsed .app-shell{
  grid-template-columns:var(--funon-side-collapsed) minmax(0,1fr)!important
 }
 .sidebar,body.kw5-mode .sidebar,body.dark.kw5-mode .sidebar{
  display:flex!important;flex-direction:column;position:sticky;top:0;align-self:start;
  height:100vh;height:100svh;width:auto;min-width:0;
  padding:26px 16px 18px!important;overflow-x:hidden;overflow-y:auto;
  background:var(--funon-rail)!important;border-right:0!important;
  scrollbar-width:thin;scrollbar-color:#344565 transparent;z-index:80;
 }
 .sidebar .brand,body.kw5-mode .sidebar .brand{
  display:flex;align-items:center;gap:12px;
  min-width:0;min-height:49px;padding:4px 8px 9px!important;
  margin:0 0 2px!important;color:#fff!important;
  font-size:21px;letter-spacing:-.7px;font-weight:810;
 }
 .sidebar .brand-mark,body.kw5-mode .sidebar .brand-mark{
  height:37px;width:37px;flex:0 0 37px;
  grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);
  gap:4px;background:#4859d6;border-radius:11px;box-shadow:0 7px 17px #0002;
 }
 .sidebar-collapse,body.kw5-mode .sidebar-collapse{
  right:15px;top:34px;width:27px;height:27px;
  color:#91a0b9;background:#192841;border:1px solid #344661;
  border-radius:8px;
 }
 .sidebar .side-group-label,.sidebar .side-nav-caption,
 body.kw5-mode .sidebar .side-group-label,body.kw5-mode .sidebar .side-nav-caption{
  display:block!important;font-size:9px;line-height:1.5;letter-spacing:1.12px;
  color:#7485a2;font-weight:850;text-transform:uppercase;
 }
 .sidebar .side-group-label,body.kw5-mode .sidebar .side-group-label{margin:29px 0 14px 12px}
 .sidebar .side-nav-caption,body.kw5-mode .sidebar .side-nav-caption{margin:19px 0 8px 12px}
 .sidebar .side-links,body.kw5-mode .sidebar .side-links{
  display:flex;align-items:stretch;flex-direction:column;gap:3px;
  min-width:0;width:100%
 }
 .sidebar .side-links a,body.kw5-mode .sidebar .side-links a{
  height:43px;min-height:43px;width:auto;
  padding:0 12px;gap:12px;justify-content:flex-start;
  color:#aebbd0;background:transparent;border:1px solid transparent;
  border-radius:9px;font-size:12.5px;line-height:1.3;font-weight:625;
  letter-spacing:0;white-space:nowrap;
 }
 .sidebar .side-links a:hover,body.kw5-mode .sidebar .side-links a:hover{
  background:#1d2c46;border-color:#2c405f;color:#fff;
 }
 .sidebar .side-links a.active,body.kw5-mode .sidebar .side-links a.active{
  background:#25365c;border-color:#354971;color:#f6f7ff;font-weight:760;
 }
 .sidebar .side-links a.active::before,body.kw5-mode .sidebar .side-links a.active::before{
  display:block;left:auto;top:auto;content:"";width:3px;height:18px;
  position:absolute;margin-left:-13px;background:#97a7ff;border-radius:5px;
 }
 .sidebar .side-links .nav-icon,body.kw5-mode .sidebar .side-links .nav-icon{
  width:19px;flex:0 0 19px;display:grid;place-items:center;color:#8195af;
 }
 .sidebar .side-links a.active .nav-icon,body.kw5-mode .sidebar .side-links a.active .nav-icon{color:#aab6ff}
 .sidebar .side-links a .nav-current,body.kw5-mode .sidebar .side-links a .nav-current{display:block}
 .sidebar .sidebar-bottom,body.kw5-mode .sidebar .sidebar-bottom{display:block;margin-top:auto}
 body.nav-collapsed .sidebar,body.kw5-mode.nav-collapsed .sidebar{
  padding:26px 9px!important
 }
 body.nav-collapsed .sidebar .brand,body.kw5-mode.nav-collapsed .sidebar .brand{
  justify-content:center;padding:4px 0!important;margin:0 0 34px!important
 }
 body.nav-collapsed .sidebar .brand>span:last-child,
 body.kw5-mode.nav-collapsed .sidebar .brand>span:last-child,
 body.nav-collapsed .sidebar .sidebar-bottom,
 body.kw5-mode.nav-collapsed .sidebar .sidebar-bottom,
 body.nav-collapsed .sidebar .side-group-label,
 body.kw5-mode.nav-collapsed .sidebar .side-group-label,
 body.nav-collapsed .sidebar .side-nav-caption,
 body.kw5-mode.nav-collapsed .sidebar .side-nav-caption{display:none!important}
 body.nav-collapsed .sidebar .side-links,
 body.kw5-mode.nav-collapsed .sidebar .side-links{gap:5px;align-items:center}
 body.nav-collapsed .sidebar .side-links a,
 body.kw5-mode.nav-collapsed .sidebar .side-links a{
  width:52px;height:43px;padding:0;justify-content:center;gap:0
 }
 body.nav-collapsed .sidebar .side-links a>span:not(.nav-icon),
 body.kw5-mode.nav-collapsed .sidebar .side-links a>span:not(.nav-icon){display:none!important}
 body.nav-collapsed .sidebar .side-links a.active::before,
 body.kw5-mode.nav-collapsed .sidebar .side-links a.active::before{display:none!important}
 body.nav-collapsed .sidebar-collapse,body.kw5-mode.nav-collapsed .sidebar-collapse{
  top:81px;right:23px;transform:rotate(180deg)
 }
}
/* Unified header and visual tokens across Home and Keyword Monitor */
.topbar,body.kw5-mode .topbar{
 height:var(--funon-header-height)!important;
 min-height:var(--funon-header-height)!important;
 background:var(--paper,#fff)!important;color:var(--ink,#202b42)!important;
 border-bottom:1px solid var(--line,#e3e9f1)!important;
 box-shadow:none!important;
}
body.kw5-mode .topbar{padding:7px 22px 7px 14px}
body:not(.kw5-mode) .ctx-bar{top:var(--funon-header-height)}
body.kw5-mode .topbar .small-divider{background:var(--line,#e3e9f1)}
body.kw5-mode .topbar .global-search,body.kw5-mode .topbar .icon-button{
 background:var(--paper,#fff);color:var(--secondary,#627187);
 border:1px solid var(--line,#e3e9f1);border-radius:9px;
}
body.kw5-mode .topbar .global-search:hover,body.kw5-mode .topbar .icon-button:hover{
 background:var(--blue-bg,#eef1ff);color:var(--funon-accent)
}
body.kw5-mode .topbar .top-help{
 border:1px solid var(--line,#e3e9f1);background:var(--paper,#fff);
 color:var(--secondary,#627187);border-radius:9px;padding:8px 10px;font-size:11.5px
}
body.kw5-mode .topbar .top-help:hover{background:var(--blue-bg,#eef1ff);color:var(--funon-accent)}
body.kw5-mode .topbar .user-circle{background:#4554ca;color:#fff}
body.kw5-mode .kw5-appslot{
 background:var(--soft,#f8faff);border:1px solid var(--line,#e3e9f1);
 color:var(--ink-strong,#111e33);border-radius:10px;
}
body.kw5-mode .kw5-appslot #ctxAppSelect{
 color:var(--ink-strong,#111e33)!important;
}
body.kw5-mode .kw5-appslot #ctxAppSelect option{
 background:var(--paper,#fff);color:var(--ink-strong,#111e33)
}
body.kw5-mode .kw5-appslot .ctx-avatar{background:var(--blue-bg,#eef1ff);color:var(--funon-accent)}
body.kw5-mode .kw5-publisher,body.kw5-mode .kw5-data-note{
 color:var(--secondary,#627187)
}
body.kw5-mode .kw5-head button{
 border:1px solid var(--line,#e3e9f1)!important;
 background:var(--paper,#fff);color:var(--ink,#202b42);border-radius:9px
}
body.kw5-mode .kw5-head button:hover{background:var(--blue-bg,#eef1ff);color:var(--funon-accent)}
body.kw5-mode .kw5-head .kw5-head-add{background:var(--blue-bg,#eef1ff);color:var(--blue-strong,#5364db)}
body.kw5-mode .kw5-breadcrumb .kw5-crumb-name strong{color:var(--ink-strong,#111e33)}
body.kw5-mode .kw5-breadcrumb .kw5-crumb-name{color:var(--secondary,#627187)}
body.kw5-mode .kw5-breadcrumb .kw5-crumb-name a,
body.kw5-mode .kw5-breadcrumb .kw5-crumb-help a{color:var(--blue-strong,#5364db)}
/* Keep keyword-specific dense data table, but common paper/canvas and borders */
body.kw5-mode #kwWorkspace{background:var(--paper,#fff)!important;
 border-color:var(--line,#e3e9f1)!important}
body.kw5-mode #kwWorkspace .kw5-toolbar,
body.kw5-mode #kwWorkspace .kw5-tabs{border-color:var(--line,#e3e9f1)}
/* Canonical icon treatment in the shell, all destinations have distinct SVGs. */
.side-links a,.mobile-bottom a,.mobile-more a{outline-offset:2px}
.side-links .nav-icon svg,.mobile-more .nav-icon svg,.mobile-bottom [data-icon] svg{width:18px;height:18px;stroke-width:1.9}
.mobile-more a{display:flex;align-items:center;gap:10px}
.mobile-more .nav-icon{flex:0 0 19px;width:19px;display:grid;place-items:center;color:var(--blue-strong,#5364db)}
@media(max-width:900px){
 body.kw5-mode .app-shell{display:block!important;grid-template-columns:1fr!important}
 body.kw5-mode .sidebar{display:none!important}
 .topbar,body.kw5-mode .topbar{height:68px!important;min-height:68px!important}
 body:not(.kw5-mode) .ctx-bar{top:68px}
}
@media(max-width:560px){
 body.kw5-mode .kw5-appslot{max-width:45vw;height:51px}
 body.kw5-mode .topbar{padding:6px 10px}
 .mobile-more{max-width:100vw}
}