/* Portfolio mode extends existing LABRIX tokens and shared shell. */
.demo-banner{border:1px solid var(--color-info);background:var(--color-info-soft);padding:var(--space-4);border-radius:var(--radius-panel);margin-bottom:var(--space-4);display:grid;gap:var(--space-3)}
.demo-banner strong{font-size:18px}.demo-banner p{margin:8px 0 0;max-width:80ch;color:var(--color-text-secondary);line-height:1.6}.demo-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.demo-actions form{margin:0}.demo-intro ol{line-height:1.7;padding-left:24px;margin:24px 0}.demo-code{font-size:24px;margin:24px 0;overflow-wrap:anywhere}.demo-code .mono-line{flex-wrap:wrap}
.card form:not(.demo-filters){display:grid;gap:16px;max-width:560px;margin-top:20px}.demo-actions form{display:block!important;margin:0!important}.card label{display:grid;gap:8px}.content>.card+.card,.content>.metric-grid+.card,.content>.card+.grid{margin-top:24px}.demo-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:24px}.demo-filters label{min-width:160px}.card dt{font-weight:600;margin-top:16px}.card dd{margin:8px 0 0}.demo-actions button{min-height:44px}.demo-banner .demo-actions form{margin:0}
@media(max-width:800px){.demo-banner{padding:16px}.demo-actions{gap:8px}.demo-actions>*{max-width:100%}.demo-code{font-size:18px}.page-actions{align-items:stretch}.page-actions>a{white-space:normal;text-align:center}.card form input,.card form select{width:100%;min-width:0}.demo-filters>*{width:100%}}