.artifact-intro { color:var(--text-muted); line-height:1.7; margin-bottom:20px; }
.artifact-layout { display:grid; grid-template-columns:minmax(210px,270px) minmax(0,1fr); gap:24px; }
.artifact-sidebar { display:flex; flex-direction:column; gap:12px; min-width:0; }
.artifact-filters { display:grid; gap:8px; }
.artifact-filters input,.artifact-filters select,.artifact-toolbar select,.artifact-editor input,.artifact-editor textarea,.artifact-editor select { width:100%; min-width:0; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); padding:10px; }
.artifact-list { display:flex; flex-direction:column; gap:8px; max-height:75vh; overflow:auto; }
.artifact-nav { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:12px; text-align:left; cursor:pointer; line-height:1.6; }
.artifact-nav[aria-current=true] { border-color:var(--primary); background:var(--surface2); }
.artifact-small { font-size:12px; color:var(--text-muted); overflow-wrap:anywhere; }
.artifact-detail { min-width:0; }
.artifact-detail h3 { margin:12px 0; font-size:24px; }
.artifact-detail p { line-height:1.7; white-space:pre-wrap; }
.artifact-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0; }
.artifact-toolbar select { flex:1 1 220px; width:auto; max-width:100%; }
.artifact-badges { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.artifact-badge { padding:4px 9px; border:1px solid var(--border); border-radius:6px; font-size:12px; overflow-wrap:anywhere; max-width:100%; }
.artifact-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.artifact-step,.artifact-section { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.artifact-step img { width:100%; aspect-ratio:1; display:block; object-fit:contain; cursor:zoom-in; background:#f7f9f5; }
.artifact-step img:not([src]) { visibility:hidden; }
.artifact-caption,.artifact-section { padding:16px; }
.artifact-caption h4,.artifact-section h4 { margin-bottom:10px; }
.artifact-caption p { font-size:14px; }
.artifact-details { display:grid; gap:12px; }
.artifact-details pre { font-size:12px; overflow-wrap:anywhere; white-space:pre-wrap; max-height:450px; overflow:auto; }
.artifact-section video { display:block; max-width:100%; max-height:560px; margin:12px auto; border-radius:10px; background:#f7f9f5; }
.artifact-section summary { cursor:pointer; }
.artifact-error { color:var(--danger); padding:12px; overflow-wrap:anywhere; }
.artifact-editor { margin-top:20px; padding:18px; border:1px solid var(--primary); border-radius:12px; }
.artifact-editor h4 { margin:20px 0 10px; }
.artifact-copy-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.artifact-editor label { display:grid; gap:7px; font-size:13px; }
.artifact-editor textarea { min-height:100px; resize:vertical; line-height:1.6; }
.artifact-stats { margin-bottom:14px; color:var(--text-muted); }
.artifact-zoom { margin:auto; padding:0; border:0; background:transparent; max-width:96vw; max-height:96vh; }
.artifact-zoom::backdrop { background:#000b; }
.artifact-zoom img { display:block; max-width:92vw; max-height:85vh; object-fit:contain; }
.artifact-zoom button { display:block; margin:8px auto; }
@media(max-width:1150px) { .artifact-steps { grid-template-columns:1fr; } .artifact-step img { max-height:440px; } }
@media(max-width:760px) { .artifact-layout { grid-template-columns:1fr; } .artifact-list { max-height:240px; } .artifact-copy-fields { grid-template-columns:1fr; } .artifact-toolbar .btn { flex:1 1 110px; } }