:root{
  --header-h:64px;
  --sidebar-w:280px;
  --accent:#19a876;
  --accent-dark:#0e8a62;
  --border:#e6eaee;
  --bg:#f5f7f8;
}
*{box-sizing:border-box}
body,html{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif}
body{display:flex;flex-direction:column;overflow:hidden}

/* Header */
header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:#fff;border-bottom:1px solid var(--border);z-index:100;
}
.brand{font-weight:bold;font-size:18px;display:flex;align-items:center;gap:10px}
.menu-btn,.nav-toggle{
  display:none;width:40px;height:40px;border:none;background:#f7f9fb;
  border-radius:6px;align-items:center;justify-content:center;cursor:pointer;
}
.menu-btn svg,.nav-toggle svg{width:22px;height:22px}

nav.top-nav{display:flex;gap:14px}
nav.top-nav a{text-decoration:none;color:var(--accent-dark);font-weight:600;padding:6px 10px;border-radius:6px}
nav.top-nav a.pill{background:#eaf8f0;color:var(--accent)}

.nav-dropdown{display:none;position:absolute;top:var(--header-h);left:0;right:0;
  background:#fff;border-bottom:1px solid var(--border);flex-direction:column;padding:10px 0;z-index:99}
.nav-dropdown a{padding:10px 16px;display:block;text-decoration:none;color:#333}
.nav-dropdown a.pill{background:#eaf8f0;color:var(--accent);border-radius:4px;margin:4px 12px}
.nav-dropdown.show{display:flex}

/* Layout */
.layout{
  flex:1;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  overflow:hidden;
  margin-top:var(--header-h);
  height:calc(100% - var(--header-h));
}
aside.sidebar{
  background:#fff;border-right:1px solid var(--border);overflow:auto;padding:14px
}
main{
  background:var(--bg);
  position:relative;
  height:100%;
}
iframe{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

/* Sidebar search */
.search{margin-bottom:12px}
.search input{
  width:100%;padding:8px;
  border:1px solid var(--border);
  border-radius:6px;
}

/* Sidebar menu list */
ul.topics{
  list-style:none;margin:0;padding:0;
}
ul.topics li{
  padding:10px 14px;
  margin-bottom:6px;
  cursor:pointer;
  border-radius:8px;
  font-weight:500;
  color:#333;
  transition:background 0.25s,color 0.25s,transform 0.1s;
  position:relative;
}
ul.topics li:hover{
  background:#f0f6ff;
  color:#0b57a1;
  transform:translateX(4px);
}

/* Active menu item */
ul.topics li.active{
  background:linear-gradient(135deg,#19a876,#0e8a62);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  font-weight:600;
}
ul.topics li.active::before{
  content:"";
  position:absolute;
  top:0;left:0;bottom:0;
  width:5px;
  border-radius:8px 0 0 8px;
  background:#fff;
}

/* Responsive */
@media(max-width:920px){
  .menu-btn{display:flex}
  .layout{grid-template-columns:1fr;} /* iframe always visible */
  aside.sidebar{
    position:fixed;
    top:var(--header-h);
    left:-100%;
    width:var(--sidebar-w);
    height:calc(100% - var(--header-h));
    transition:left .3s;
    z-index:90;
  }
  aside.sidebar.open{left:0}
}
@media(max-width:768px){
  nav.top-nav{display:none}
  .nav-toggle{display:flex}
}
@media(min-width:768px){
.vv{
    display:none;
}
}
a{
    text-decoration:none;
}