.sn-layout{display:flex;flex:1;min-height:calc(100vh - 56px)}
.sn-sidebar{
  width:240px;min-width:240px;
  border-right:1px solid var(--border);
  background:var(--surface);padding:16px;
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;
}
.sn-sidebar h4{
  font-size:12px;font-weight:600;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:8px;
}
.sn-cat-btn{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--radius);
  font-size:13px;color:var(--text-muted);
  transition:all var(--transition);text-align:left;
}
.sn-cat-btn:hover{background:var(--surface-2);color:var(--text)}
.sn-cat-btn.active{background:var(--primary-glow);color:var(--primary)}
.sn-cat-btn .count{margin-left:auto;font-size:11px;color:var(--text-dim)}

.sn-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.sn-toolbar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--border);
}
.sn-toolbar .sn-search{flex:1;position:relative}
.sn-toolbar .sn-search input{width:100%;padding-left:32px;font-size:13px}
.sn-toolbar .sn-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:13px}

.sn-grid{
  flex:1;overflow-y:auto;padding:16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;
  align-content:start;
}
.sn-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition);display:flex;flex-direction:column;
}
.sn-card:hover{border-color:var(--border-hover)}
.sn-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.sn-card-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.sn-card-title .cat-tag{
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:999px;
  background:var(--surface-3);color:var(--text-dim);
}
.sn-card-actions{display:flex;gap:4px}
.sn-card-desc{padding:10px 16px;font-size:12px;color:var(--text-muted);line-height:1.5}
.sn-card-code{
  flex:1;padding:12px 16px;
  background:var(--bg);font-family:var(--font-mono);font-size:12px;
  line-height:1.6;overflow-x:auto;white-space:pre;
  max-height:200px;overflow-y:auto;
}

@media(max-width:768px){
  .sn-layout{flex-direction:column}
  .sn-sidebar{width:100%;min-width:100%;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--border);padding:12px}
  .sn-sidebar h4{width:100%}
  .sn-grid{grid-template-columns:1fr}
}