#artifact-badge { position:absolute; bottom:2px; right:2px; background:#6e7681; color:#fff; font-size:9px; font-weight:600; border-radius:8px; padding:1px 4px; min-width:14px; text-align:center; line-height:14px; }

.artifact-card { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:10px 14px; cursor:pointer; margin:8px 0; transition:border-color 150ms ease; max-width:420px; }
.artifact-card:hover { border-color:rgba(255,255,255,.3); }
.artifact-card-icon { flex-shrink:0; opacity:.7; }
.artifact-card-body { flex:1; min-width:0; }
.artifact-card-title { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artifact-card-meta { font-size:11px; opacity:.5; margin-top:2px; }
.artifact-card-arrow { opacity:.4; font-size:18px; }

#right-panel.panel-artifacts { --_panel-width: var(--panel-map-width, 50vw); }
#right-panel.panel-artifacts #right-panel-content { overflow:hidden; padding:0; display:flex; flex-direction:column; flex:1; min-height:0; }
#panel-artifacts.active { display:flex; flex-direction:column; height:100%; overflow:hidden; }
#artifact-panel-root { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.artifact-library { padding:12px; overflow-y:auto; flex:1; }
.artifact-library-empty { opacity:.5; text-align:center; padding:40px 16px; font-size:14px; line-height:1.7; }
.artifact-library-card { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:12px 14px; cursor:pointer; margin-bottom:8px; transition:border-color 150ms ease; }
.artifact-library-card:hover { border-color:rgba(255,255,255,.25); }

.artifact-viewer { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.artifact-viewer-header { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.artifact-back-btn { background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; font-size:20px; padding:2px 6px; border-radius:4px; line-height:1; }
.artifact-back-btn:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); }
.artifact-viewer-title { flex:1; font-size:14px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artifact-version-select { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:inherit; border-radius:4px; padding:3px 6px; font-size:12px; cursor:pointer; }
#artifact-content { flex:1; overflow-y:auto; padding:16px; min-height:0; }
.artifact-code-block { background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:12px; overflow-x:auto; margin:0; }
.artifact-code-block code { font-family:monospace; font-size:13px; }
.artifact-toolbar { display:flex; gap:6px; padding:10px 14px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.artifact-toolbar-btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:inherit; border-radius:6px; padding:5px 12px; font-size:12px; cursor:pointer; transition:border-color 150ms ease; }
.artifact-toolbar-btn:hover { border-color:rgba(255,255,255,.3); }
.artifact-toolbar-btn.danger:hover { border-color:#f85149; color:#f85149; }
.artifact-publish-url { font-size:11px; opacity:.7; padding:4px 14px 8px; word-break:break-all; }
.artifact-iframe { width:100%; border:none; border-radius:4px; display:block; min-height:200px; background:#0d1117; }
.artifact-edit-textarea { width:100%; height:100%; min-height:200px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); color:inherit; font-family:monospace; font-size:13px; padding:12px; border-radius:4px; resize:vertical; outline:none; box-sizing:border-box; }