.nx-demo-portfolio { margin: 0 0 16px; padding: 16px; background: #191a20; border: 1px solid #393b46; border-radius: 14px; color: #f4f4f6; }
.nx-demo-portfolio header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nx-demo-portfolio h2 { margin: 5px 0 0; font-size: 16px; font-weight: 600; }
.nx-demo-label { font-size: 11px; color: #f5ce84; }
.nx-demo-portfolio p, .nx-demo-portfolio small { color: #a8adba; font-size: 12px; line-height: 1.5; }
.nx-demo-portfolio p { margin: 10px 0; }
.nx-demo-portfolio button { padding: 8px 12px; border: 1px solid #393b46; background: #22232a; color: #f4f4f6; border-radius: 9px; min-height: 44px; }
.nx-demo-portfolio button:disabled { opacity: .6; }
.nx-demo-portfolio button:focus-visible { outline: 2px solid #a6b9ff; outline-offset: 2px; }
.nx-demo-totals { display: flex; flex-wrap: wrap; gap: 20px; margin: 12px 0; }
.nx-demo-totals strong { display: block; font-size: 21px; font-variant-numeric: tabular-nums; }
.nx-demo-table { max-width: 100%; overflow-x: auto; margin-bottom: 10px; }
.nx-demo-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nx-demo-table :is(th,td) { text-align: left; padding: 10px 8px; border-bottom: 1px solid #393b46; white-space: nowrap; }
.nx-demo-table th { color: #a8adba; font-weight: 500; }
.nx-demo-table td { color: #f4f4f6; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .nx-demo-portfolio { padding: 12px; } .nx-demo-table :is(th,td) { padding: 9px 6px; } }