/* assets/hgn/remake.css */
body[data-page="hub"],
body[data-page="plugin"]{
  overflow:auto;
}

.main {
  min-height: 100%;
  background: linear-gradient(180deg, #0f131a, #0b0e14);
}

.hubWrap,
.pluginApp{
  width:min(1600px, 96vw);
  margin:0 auto;
  padding:20px 18px 28px;
}

.homeOptionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 640px) {
  .homeOptionGrid {
    grid-template-columns: 1fr;
  }
}

.hubHeader h1{
  margin:0;
  font-size:32px;
}

.hubHeader p{
  margin:8px 0 20px;
  color:var(--muted);
}

.pluginGrid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
}

.pluginCard{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:220px;
}

.pluginCardTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.pluginCard h3{
  margin:0;
  font-size:18px;
}

.pluginCard p{
  margin:0;
  color:var(--muted);
  min-height:66px;
}

.pluginCardMeta{
  color:var(--muted2);
  font-size:13px;
}

.pluginApp{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:16px;
  align-items:start;
}

.pluginSidebar{
  position:sticky;
  top:16px;
}

.pluginSidebar .body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pluginNav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pluginNavItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:11px;
  transition:background .12s ease, border-color .12s ease;
}

.pluginNavItem:hover{
  background:rgba(255,255,255,.06);
}

.pluginNavItem.active{
  border-color:rgba(96,165,250,.36);
  background:rgba(96,165,250,.16);
}

.pluginMain{
  min-width:0;
}

.pluginMain > .card{
  min-height:calc(100vh - 56px);
}

#sectionTabs{
  position:sticky;
  top:12px;
  z-index:20;
  margin-bottom:12px;
}

.sectionMeta h3{
  margin:14px 0 6px;
  font-size:20px;
}

.sectionMeta p{
  margin:0 0 12px;
  color:var(--muted);
}

.settingsForm{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:12px;
}

.settingsForm .field{
  grid-column:span 6;
}

.settingsForm .fieldWide,
.settingsForm .fieldToggle{
  grid-column:1 / -1;
}

.fieldDesc{
  font-size:12px;
  color:var(--muted2);
  margin-bottom:4px;
}

.fieldToggle{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:rgba(0,0,0,.14);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.fieldToggle input{
  width:20px;
  height:20px;
}

.settingsForm textarea{
  min-height:180px;
}

.miniToast{
  position:fixed;
  right:14px;
  bottom:14px;
  border:1px solid rgba(34,197,94,.4);
  background:rgba(7,20,10,.92);
  color:#d8ffe7;
  border-radius:12px;
  padding:10px 12px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease;
  z-index:300;
  box-shadow:var(--shadow2);
}

.miniToast.show{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 980px){
  .pluginApp{
    grid-template-columns:1fr;
  }

  .pluginSidebar{
    position:static;
  }

  .pluginMain > .card{
    min-height:auto;
  }

  .settingsForm .field,
  .settingsForm .fieldWide,
  .settingsForm .fieldToggle{
    grid-column:1 / -1;
  }
}