:root{
  --rocwp-kb-accent: #1e6cff;
  --rocwp-kb-bg: #ffffff;
  --rocwp-kb-muted: rgba(0,0,0,.55);
  --rocwp-kb-line: rgba(0,0,0,.08);
  --rocwp-kb-hover: rgba(0,0,0,.04);
  --rocwp-kb-active: rgba(30,108,255,.08);
}

/* Base layout */
.rocwp-kb{
  display:flex;
  gap:40px;
  align-items:flex-start;
  width:100%;
  position:relative;
}

.rocwp-kb__mobile-toggle{
  display:none;
  margin: 0 0 14px 0;
  padding:10px 12px;
  border:1px solid var(--rocwp-kb-line);
  border-radius:12px;
  background: var(--rocwp-kb-bg);
  font-weight:600;
}

.rocwp-kb__overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.25);
  z-index: 9998;
}

.rocwp-kb__sidebar{
  width:340px;
  max-width:42%;
  position:sticky;
  top:24px;
  height: calc(100vh - 48px);
  overflow:auto;
  z-index: 9999;
}

.rocwp-kb__sidebar-inner{
  padding-right: 8px;
}

/* Search (optional) */
.rocwp-kb__search{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:16px;
}
.rocwp-kb__search-input{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--rocwp-kb-line);
  outline:none;
}
.rocwp-kb__search-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--rocwp-kb-line);
  background: var(--rocwp-kb-bg);
  cursor:pointer;
}
.rocwp-kb__search-btn:hover{background: var(--rocwp-kb-hover)}
.rocwp-kb__icon{
  display:inline-block;
  width:18px;
  height:18px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 18a8 8 0 1 1 0-16a8 8 0 0 1 0 16m11.7 2.3l-5.2-5.2a9.5 9.5 0 1 0-1.4 1.4l5.2 5.2a1 1 0 0 0 1.4-1.4"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 18a8 8 0 1 1 0-16a8 8 0 0 1 0 16m11.7 2.3l-5.2-5.2a9.5 9.5 0 1 0-1.4 1.4l5.2 5.2a1 1 0 0 0 1.4-1.4"/></svg>') center / contain no-repeat;
}

/* Navigation */
.rocwp-kb__section{margin-bottom:18px;}
.rocwp-kb__section-title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  background:transparent;
  border:0;
  cursor:pointer;
  font-weight:700;
  text-align:start!important;
}
.rocwp-kb__section-label{font-size:16px;text-align: left!important;}
.rocwp-kb__chev{
  width:16px;height:16px;
  background: currentColor;
  opacity:.55;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.4 8.6a1 1 0 0 1 1.4 0L12 11.8l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1 1 0 0 1-1.4 0L7.4 10a1 1 0 0 1 0-1.4"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.4 8.6a1 1 0 0 1 1.4 0L12 11.8l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1 1 0 0 1-1.4 0L7.4 10a1 1 0 0 1 0-1.4"/></svg>') center/contain no-repeat;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.rocwp-kb__section-title[aria-expanded="false"] .rocwp-kb__chev{
  transform: rotate(-90deg);
}

/* lists */
.rocwp-kb__list{
  list-style:none;
  padding:0;
  margin:6px 0 0;
}
.rocwp-kb__item{margin:2px 0; position:relative;}
.rocwp-kb__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  font-size:14px;
  line-height:1.2;
  position:relative;
}
.rocwp-kb__link:hover{background: var(--rocwp-kb-hover);}

.rocwp-kb__item.is-active > .rocwp-kb__link{
  background: var(--rocwp-kb-active);
  font-weight:600;
}
.rocwp-kb__item.is-active > .rocwp-kb__link:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background: var(--rocwp-kb-accent);
}

/* indentation like docs */
.rocwp-kb__list--depth-1 .rocwp-kb__link{padding-left:22px; color: rgba(0,0,0,.72);}
.rocwp-kb__list--depth-2 .rocwp-kb__link{padding-left:32px; color: rgba(0,0,0,.68);}

.rocwp-kb__main{flex:1; min-width:0;}
.rocwp-kb__breadcrumb{margin: 4px 0 10px;}
.rocwp-kb__crumbs{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:0;
  color: var(--rocwp-kb-muted);
  font-size:13px;
}
.rocwp-kb__crumb::after{
  content:"/";
  margin-left:8px;
  opacity:.6;
}
.rocwp-kb__crumb:last-child::after{display:none;}

.rocwp-kb__header{margin-bottom:12px;}
.rocwp-kb__title{margin:0; font-size:44px; line-height:1.05;}
.rocwp-kb__lead{margin:10px 0 0; color: rgba(0,0,0,.70); font-size:16px; line-height:1.6;}

.rocwp-kb__content{font-size:16px; line-height:1.75;}
.rocwp-kb__loading{opacity:.55; pointer-events:none;}

/* Preset: SIMPLE (fallback to previous minimal card feel) */
.rocwp-kb--preset-simple .rocwp-kb__sidebar{
  border:1px solid var(--rocwp-kb-line);
  border-radius:14px;
  padding:16px;
  background: var(--rocwp-kb-bg);
}
.rocwp-kb--preset-simple .rocwp-kb__section-title{padding:10px 8px; border-radius:12px;}
.rocwp-kb--preset-simple .rocwp-kb__section-title:hover{background: var(--rocwp-kb-hover);}
.rocwp-kb--preset-simple .rocwp-kb__item.is-active > .rocwp-kb__link:before{display:none;}

/* Mobile drawer */
@media (max-width: 1024px){
  .rocwp-kb{
    flex-direction:column;
    gap:16px;
  }
  .rocwp-kb__mobile-toggle{display:inline-flex;}
  .rocwp-kb__sidebar{
    position:fixed;
    top:0;
    left:-380px;
    height:100vh;
    width:340px;
    max-width:85vw;
    background: var(--rocwp-kb-bg);
    padding:18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    border-right:1px solid var(--rocwp-kb-line);
    transition:left .2s ease;
  }
  .rocwp-kb.is-open .rocwp-kb__sidebar{left:0;}
  .rocwp-kb.is-open .rocwp-kb__overlay{display:block;}
  .rocwp-kb__overlay{display:block;}
  .rocwp-kb__title{font-size:34px;}
}

/* User custom: white panels */
.rocwp-kb__main {
    flex: 1;
    min-width: 0;
    background: white;
    padding: 10px;
    border-radius: 15px;
}

.rocwp-kb__sidebar-inner {
    background: white;
    padding: 10px;
    border-radius: 15px;
}