.top-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.top-bar-left { display: flex; align-items: center; gap: 12px; }
.page-title { font-weight: 600; font-size: 15px; }
.run-count { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }

.btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; font-family: var(--sans); font-size: 12px; font-weight: 600;
    color: var(--text-secondary); background: var(--bg-tertiary);
    border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.btn-back:hover { color: var(--text-primary); border-color: var(--accent); }

.content { max-width: 1200px; margin: 0 auto; padding: 32px; }
.loading, .empty { text-align: center; padding: 80px 0; color: var(--text-muted); font-size: 14px; }

/* Run card */
.run-card {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 24px; overflow: hidden;
}
.run-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.run-header-left { display: flex; align-items: center; gap: 16px; }
.run-id { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent); }
.run-intent { font-size: 13px; color: var(--text-secondary); max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-header-right { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.run-budget { color: var(--text-secondary); font-weight: 500; }
.run-body { padding: 20px; }
.run-section { margin-bottom: 20px; }
.run-section:last-child { margin-bottom: 0; }

/* Assets grid */
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.asset-tile {
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden; transition: border-color 0.2s;
}
.asset-tile:hover { border-color: var(--accent); }
.asset-img-wrap {
    width: 100%; aspect-ratio: 1; background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.asset-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.asset-img-wrap .no-img { font-size: 10px; color: var(--text-muted); }
.asset-meta { padding: 8px; }
.asset-uid { font-family: var(--mono); font-size: 10px; color: var(--accent); word-break: break-all; }
.asset-cat { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.asset-price { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-primary); }

/* Layout canvas */
.layout-canvas-wrap {
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px; display: inline-block;
}
.layout-canvas-wrap canvas { display: block; border-radius: 4px; }
.no-layout {
    font-family: var(--mono); font-size: 11px; color: var(--text-muted);
    padding: 20px; text-align: center; background: var(--bg-tertiary);
    border: 1px solid var(--border); border-radius: 8px;
}
.layouts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.layout-step { min-width: 0; }
.layout-step .layout-canvas-wrap { width: 100%; display: block; }
.layout-step canvas { width: 100% !important; height: auto !important; }

/* Lazy load placeholder */
.run-body-placeholder {
    padding: 40px 20px; text-align: center; color: var(--text-muted);
    font-family: var(--mono); font-size: 12px;
}