/* Neutral enterprise demo shell — no site/personal branding */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: #0f172a; background: #f1f5f9; }
button, input, select { font: inherit; }
.demo-app { min-height: 100%; display: flex; flex-direction: column; }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 1rem; background: #1e293b; color: #e2e8f0; }
.demo-top h1 { margin: 0; font-size: .9375rem; font-weight: 700; }
.demo-top p { margin: .15rem 0 0; font-size: .6875rem; color: #94a3b8; }
.demo-nav { display: flex; gap: .35rem; flex-wrap: wrap; }
.demo-nav button { border: 0; background: transparent; color: #94a3b8; padding: .35rem .6rem; border-radius: 6px; cursor: pointer; font-size: .75rem; font-weight: 600; }
.demo-nav button.active, .demo-nav button:hover { background: #334155; color: #f8fafc; }
.demo-body { flex: 1; padding: 1rem; overflow: auto; }
.demo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.demo-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .75rem; }
.demo-kpi strong { display: block; font-size: 1.25rem; color: #0d4f8a; }
.demo-kpi span { font-size: .6875rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.demo-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; align-items: center; }
.demo-toolbar input, .demo-toolbar select { padding: .4rem .55rem; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; min-width: 140px; }
.demo-toolbar button { padding: .4rem .75rem; border: 0; border-radius: 6px; background: #1668b2; color: #fff; font-weight: 600; cursor: pointer; }
.demo-toolbar button.ghost { background: #e2e8f0; color: #334155; }
.demo-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.demo-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.demo-table th, .demo-table td { padding: .55rem .65rem; text-align: left; border-bottom: 1px solid #f1f5f9; }
.demo-table th { background: #f8fafc; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.demo-table tr { cursor: pointer; transition: background .15s; }
.demo-table tbody tr:hover { background: #f8fafc; }
.demo-table tr.selected { background: #eff6ff; }
.badge { display: inline-block; padding: .15rem .45rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.demo-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; min-height: 280px; }
@media (max-width: 768px) { .demo-pipeline { grid-template-columns: 1fr 1fr; } }
.demo-col { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: .5rem; }
.demo-col h3 { margin: 0 0 .5rem; font-size: .6875rem; text-transform: uppercase; color: #64748b; }
.demo-card-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: .5rem; margin-bottom: .4rem; font-size: .75rem; cursor: grab; }
.demo-chart { display: flex; align-items: flex-end; gap: .35rem; height: 120px; padding: .75rem; }
.demo-bar { flex: 1; background: linear-gradient(180deg, #37b54a, #1668b2); border-radius: 4px 4px 0 0; min-height: 8px; transition: height .3s; }
.demo-modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.demo-modal-back.open { display: flex; }
.demo-modal { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; padding: 1.25rem; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.demo-modal h3 { margin: 0 0 .5rem; font-size: 1rem; }
.demo-modal p { margin: 0 0 1rem; font-size: .8125rem; color: #64748b; }
.demo-modal-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.demo-toast { position: fixed; bottom: 1rem; right: 1rem; background: #1e293b; color: #fff; padding: .55rem .85rem; border-radius: 8px; font-size: .75rem; opacity: 0; transform: translateY(8px); transition: all .25s; z-index: 60; }
.demo-toast.show { opacity: 1; transform: translateY(0); }
.demo-form label { display: block; font-size: .6875rem; font-weight: 700; color: #64748b; margin-bottom: .25rem; }
.demo-form input { width: 100%; padding: .45rem .55rem; border: 1px solid #cbd5e1; border-radius: 6px; margin-bottom: .65rem; }
.demo-form input.invalid { border-color: #dc2626; }
.demo-tabs { display: flex; gap: .25rem; margin-bottom: .75rem; border-bottom: 1px solid #e2e8f0; }
.demo-tabs button { border: 0; background: transparent; padding: .5rem .75rem; cursor: pointer; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.demo-tabs button.active { color: #1668b2; border-bottom-color: #1668b2; }
.demo-pane { display: none; }
.demo-pane.active { display: block; }