.spn-demo{--spn-brand:var(--live-demo-primary,#f97316);font:14px/1.5 Arial,sans-serif;background:var(--ui-demo-bg,#f6f6f6);color:var(--ui-demo-text,#242424);border:1px solid var(--ui-demo-line,#ddd);border-radius:var(--ui-demo-radius,12px);text-align:left;width:100%;min-width:0;overflow:hidden;isolation:isolate}.spn-demo *{box-sizing:border-box}.spn-demo [hidden]{display:none!important}.product-page .spn-demo :is(h3,h4,p,small,label,strong,span){font-family:Arial,sans-serif;letter-spacing:normal;text-wrap:initial;color:inherit}.product-page .spn-demo h3{font-size:20px;line-height:1.4;margin:0}.product-page .spn-demo h4{font-size:15px;margin:0 0 8px}.product-page .spn-demo p{font-size:13px;line-height:1.6;margin:7px 0;max-width:none;color:var(--ui-demo-muted,#777)}.spn-demo small{display:block;font-size:11px;color:var(--ui-demo-muted,#777)!important}.spn-brand{display:flex;align-items:center;gap:14px;background:var(--ui-demo-surface,#fff);padding:15px 20px;border-bottom:1px solid var(--ui-demo-line,#ddd)}.spn-brand [data-demo-app-icon]{color:var(--ui-demo-accent-text,var(--spn-brand))}.spn-brand [data-demo-logo]{display:flex;max-width:110px}.spn-brand img{max-width:110px;max-height:30px;object-fit:contain}.spn-brand>span:last-child{margin-left:auto}.spn-demo [data-spn-content]{padding:18px}.spn-card{background:var(--ui-demo-surface,#fff);border:1px solid var(--ui-demo-line,#ddd);padding:17px;border-radius:var(--ui-demo-radius,10px);min-width:0}.spn-toolbar,.spn-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.spn-actions{justify-content:start}.spn-demo button{font:inherit;min-height:40px;border:1px solid var(--ui-demo-line,#ddd);background:var(--ui-demo-surface,#fff);color:var(--ui-demo-text,#242424);border-radius:var(--ui-demo-radius,8px);padding:8px 13px;cursor:pointer}.spn-demo button.spn-primary{background:var(--spn-brand);border-color:var(--spn-brand);color:var(--live-demo-ink,#fff)}.spn-demo :focus-visible{outline:2px solid var(--ui-demo-accent-text,var(--spn-brand));outline-offset:3px}.spn-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:14px 0}.spn-metrics strong{font-size:20px}.spn-metrics .spn-card{padding:13px}.spn-workspace{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px}.spn-queues{padding:15px 8px}.spn-queues h4,.spn-queues>small{padding:0 8px}.spn-queues button{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;border:0;margin-top:5px;font-size:12px}.spn-queues [aria-pressed=true]{background:color-mix(in srgb,var(--spn-brand) 14%,transparent);color:var(--ui-demo-accent-text,var(--spn-brand))}.spn-filters{display:grid;grid-template-columns:minmax(0,1fr) 135px 145px;gap:10px;margin:14px 0}.spn-demo label{display:block;font-size:12px;min-width:0}.spn-demo label>span{display:block;margin-bottom:6px}.spn-demo :is(input,select,textarea){font:inherit;color:var(--ui-demo-text,#242424);background:var(--ui-demo-surface,#fff);border:1px solid var(--ui-demo-line,#ddd);border-radius:var(--ui-demo-field-radius,8px);padding:10px;width:100%;min-width:0;min-height:42px}.spn-demo textarea{min-height:135px;resize:vertical}.spn-demo input[type=range]{padding-inline:0;accent-color:var(--spn-brand);border:0}.spn-demo input:is([type=checkbox],[type=radio]){width:18px;min-height:18px;accent-color:var(--spn-brand);flex:none}.spn-demo input[type=number]{max-width:100%}.spn-ticket{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--ui-demo-line,#ddd)}.spn-ticket strong{font-size:14px}.spn-ticket small{margin-top:6px}.spn-ticket>div:last-child{text-align:right;flex:none}.spn-badge{display:inline-block;padding:4px 9px;background:color-mix(in srgb,var(--spn-brand) 12%,transparent);border-radius:var(--ui-demo-radius,8px);font-size:11px}.spn-demo .spn-boundary{font-size:11px;border-top:1px solid var(--ui-demo-line,#ddd);padding-top:12px}.spn-empty{text-align:center;padding:50px 10px}.spn-demo .spn-notice{font-size:11px;margin:0;padding:12px 18px;border-top:1px solid var(--ui-demo-line,#ddd)}.spn-steps{display:flex;list-style:none;padding:20px 0;gap:8px;margin:0}.spn-steps li{flex:1;min-width:0;border-top:2px solid var(--ui-demo-line,#ddd);padding-top:8px}.spn-steps span{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--ui-demo-line,#ddd);margin-bottom:6px}.spn-steps [aria-current=step]{border-color:var(--spn-brand)}.spn-steps [aria-current=step] span{background:var(--spn-brand);color:var(--live-demo-ink,#fff)}.spn-two{display:grid;grid-template-columns:1fr 1fr;gap:15px}.spn-setup-body{display:grid;gap:12px;margin:18px 0}.spn-hours{display:grid;grid-template-columns:150px 1fr 1fr;gap:15px;align-items:center}.spn-demo .spn-toggle{display:flex;align-items:center;gap:10px}.spn-demo form>.spn-card{margin:14px 0}.spn-demo .spn-customer{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--ui-demo-line,#ddd)}.spn-customer span{margin:0!important}.spn-priorities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}.spn-priorities label{display:flex;align-items:center;gap:10px;padding:15px;background:color-mix(in srgb,var(--spn-brand) 9%,transparent);border-radius:var(--ui-demo-radius,8px)}.spn-submit{width:100%}.feature-art-space.spn-placement{display:block!important;height:auto!important;aspect-ratio:auto!important;padding:0!important;overflow:visible!important;background:none!important;border:0!important}.cm-support:has(.spn-placement){grid-template-columns:1.1fr 1fr}.cm-support .spn-placement{grid-column:1/-1}.sc-support:has(.spn-placement){grid-template-columns:1fr}.sc-support .spn-placement{margin-bottom:20px}.pc-support-sample{border:1px solid var(--ui-demo-line,#ddd);background:var(--ui-demo-surface,#fff);border-radius:var(--ui-demo-radius,8px);padding:16px;margin:12px 0}.pc-support-sample strong{font-size:14px}.pc-support-sample small{display:block;font-size:11px;margin-top:8px;color:var(--ui-demo-muted,#777)}
@media(max-width:800px){.spn-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.spn-workspace{grid-template-columns:1fr}.spn-queues{display:flex;gap:6px;overflow:auto}.spn-queues>h4,.spn-queues>small{display:none}.spn-queues button{width:auto;flex:none;gap:10px;margin:0}.spn-filters{grid-template-columns:1fr 1fr}.spn-filters>label:first-child{grid-column:1/-1}.spn-hours{grid-template-columns:1fr 1fr}.spn-hours>.spn-toggle{grid-column:1/-1}.cm-support:has(.spn-placement){grid-template-columns:1fr}}
@media(max-width:480px){.spn-demo [data-spn-content]{padding:12px}.spn-card{padding:12px}.spn-metrics .spn-card{padding:10px}.spn-metrics small{font-size:10px}.spn-ticket{align-items:start;gap:12px;flex-direction:column}.spn-ticket>div:last-child{text-align:left}.spn-steps small{font-size:9px}.spn-priorities{grid-template-columns:1fr 1fr}.spn-two{grid-template-columns:1fr}.spn-toolbar h3{font-size:18px}.spn-demo .spn-actions{gap:7px}.spn-demo button{padding:8px 10px;font-size:12px}}

/* Keep the app glyph legible over the live brand color. */
html .spn-demo [data-demo-app-icon] i{color:var(--ui-demo-icons,var(--live-demo-primary))!important}