/* V4.6.9.2 hierarchy + spacing polish — keep logic untouched */
:root{
  --hierarchy-shadow: 0 6px 18px rgba(15,23,42,.035), 0 1px 4px rgba(15,23,42,.025);
  --hierarchy-shadow-strong: 0 14px 34px rgba(15,23,42,.055), 0 4px 12px rgba(15,23,42,.03);
}
html.dark{
  --hierarchy-shadow: 0 10px 22px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.12);
  --hierarchy-shadow-strong: 0 18px 42px rgba(0,0,0,.28), 0 6px 16px rgba(0,0,0,.16);
}

/* Sidebar hierarchy */
.sidebar{padding:18px 14px 16px!important}
.sidebar-top{min-height:42px!important;gap:12px!important}
.sidebar-nav{gap:6px!important}
.sidebar-tags{gap:6px!important;padding-bottom:10px!important}
.sidebar-section-title{padding:12px 12px 6px!important;font-size:11px!important;letter-spacing:.12em!important;opacity:.72!important}
.nav-item{
  padding:12px 13px!important;
  border-radius:16px!important;
  font-weight:620!important;
  letter-spacing:-.01em!important;
}
.nav-item:hover{
  background:color-mix(in srgb, var(--surface-soft) 88%, var(--background))!important;
  box-shadow:var(--hierarchy-shadow)!important;
}
.nav-item.active{
  background:color-mix(in srgb, var(--foreground) 9%, var(--surface-panel))!important;
  color:var(--foreground)!important;
  box-shadow:var(--hierarchy-shadow)!important;
}
html.dark .nav-item.active{
  background:color-mix(in srgb, var(--foreground) 8%, var(--surface-panel))!important;
}
.nav-item svg,.nav-item i{opacity:.82}
.nav-item.active svg,.nav-item.active i,.nav-item:hover svg,.nav-item:hover i{opacity:1}
.tag-list{gap:8px!important;padding:0 8px 2px 12px!important}
.tag-chip{
  padding:6px 10px!important;
  font-weight:650!important;
  background:color-mix(in srgb, var(--secondary) 8%, var(--surface-soft))!important;
  box-shadow:none!important;
}
.tag-chip.active{
  background:color-mix(in srgb, var(--secondary) 14%, var(--surface-soft))!important;
  border-color:transparent!important;
  box-shadow:var(--hierarchy-shadow)!important;
}
.sidebar-toggle,.card-menu,.icon-btn{
  border-radius:14px!important;
}

/* Topbar hierarchy */
.topbar{
  height:60px!important;
  min-height:60px!important;
  padding:12px 16px!important;
}
.topbar .header-card{padding:0 2px!important}
.topbar-title-wrap{gap:12px!important}
.title-bar{height:18px!important;opacity:.7}
.topbar-title{
  font-size:18px!important;
  font-weight:760!important;
  letter-spacing:-.02em!important;
}
.topbar-actions{gap:10px!important}
.icon-btn{
  height:38px!important;
  min-width:38px!important;
  background:color-mix(in srgb, var(--surface-soft) 86%, transparent)!important;
  color:color-mix(in srgb, var(--foreground) 62%, var(--desc))!important;
  box-shadow:none!important;
}
.icon-btn:hover{
  background:var(--surface-soft)!important;
  color:var(--foreground)!important;
  box-shadow:var(--hierarchy-shadow)!important;
}
.search-btn{
  height:40px!important;
  border:none!important;
  background:var(--surface-soft)!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(15,23,42,.025)!important;
}
html.dark .search-btn{box-shadow:0 8px 20px rgba(0,0,0,.16)!important}
.search-btn .kbd{
  background:color-mix(in srgb, var(--surface-panel) 86%, var(--surface-soft))!important;
  border:none!important;
}
.segment-bar{padding:2px 14px 12px!important;gap:10px!important}
.segment-chip{
  padding:8px 13px!important;
  border-radius:999px!important;
  font-weight:630!important;
  box-shadow:none!important;
}
.segment-chip.active{
  box-shadow:var(--hierarchy-shadow)!important;
}

/* Content spacing rhythm */
.content-shell{padding:0 12px 18px!important}
.content-wrap{max-width:1120px!important}
.desktop-composer{
  margin:8px 4px 16px!important;
  padding:16px 16px 12px!important;
  border-radius:22px!important;
}
.composer-head{margin-bottom:12px!important}
.editor-footer{margin-top:12px!important;gap:12px!important}
.masonry{column-gap:12px!important;padding:0 4px 8px!important}
.note-card{
  margin:0 0 12px!important;
  padding:16px 16px 14px!important;
  border-radius:22px!important;
}
.card-top{margin-bottom:12px!important}
.card-content{line-height:1.68!important}
.detail-card,.panel,.review-card,.stream-card,.metric{border-radius:22px!important}
.section-card,.row,.resource-preview,.qa-row,.result-item,.comment-item,.history-item,.ref-item,.attachment-card{border-radius:18px!important}

/* Buttons and chips refinement */
.action-btn{
  border-radius:14px!important;
  padding:10px 15px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.08)!important;
}
html.dark .action-btn{box-shadow:0 12px 24px rgba(0,0,0,.22)!important}
.secondary-btn{
  border:none!important;
  background:var(--surface-soft)!important;
  border-radius:14px!important;
  font-weight:650!important;
}
.warning-btn{
  width:54px!important;
  height:54px!important;
  box-shadow:0 12px 24px rgba(255,191,71,.28)!important;
}
.quick-btn{
  width:42px!important;
  height:42px!important;
  box-shadow:0 10px 22px rgba(124,58,237,.20)!important;
}
.type-switch{padding:5px!important;border-radius:999px!important}
.type-pill{padding:7px 12px!important;font-weight:720!important}
.type-pill.active{box-shadow:var(--hierarchy-shadow)!important}
.editor-status{padding:5px 10px!important}

/* Modal and drawer visual hierarchy */
.modal,.drawer-pane,.filter-panel,.menu-panel{
  border-radius:26px!important;
}
.modal-head{
  padding:16px 18px!important;
}

/* Mobile keep proportions calm */
@media (max-width:767px){
  .topbar{padding:11px 12px!important;height:58px!important;min-height:58px!important}
  .segment-bar{padding:2px 12px 10px!important;gap:8px!important}
  .content-shell{padding:0 10px 16px!important}
  .desktop-composer{border-radius:20px!important;padding:15px 14px 12px!important}
  .note-card{border-radius:20px!important;padding:15px 14px 13px!important}
}