model-diagnosis-demo { --mdd-bg:var(--pst-color-surface,#fff); --mdd-panel:var(--pst-color-background,#f5f7fa); --mdd-text:var(--pst-color-text-base,#172033); --mdd-muted:#64748b; --mdd-border:var(--pst-color-border,#cbd5e1); display:block; margin:1.5rem 0; color:var(--mdd-text); }
@media (prefers-color-scheme:dark){model-diagnosis-demo{--mdd-bg:#191b1f;--mdd-panel:#111318;--mdd-text:#f1f5f9;--mdd-muted:#a7b0bd;--mdd-border:#3c424c}}
.mdd-widget,.mdd-widget *{box-sizing:border-box}.mdd-widget{padding:.85rem;border:1px solid var(--mdd-border);border-radius:.7rem;background:var(--mdd-bg)}
.mdd-toolbar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.65rem}
.mdd-widget button,.mdd-widget select{min-height:2rem;padding:.3rem .55rem;border:1px solid var(--mdd-border);border-radius:.38rem;background:var(--mdd-bg);color:var(--mdd-text);font-size:.76rem}.mdd-widget button{cursor:pointer}.mdd-widget button:focus-visible,.mdd-widget select:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.mdd-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:.65rem}.mdd-card{min-width:0;padding:.65rem;border:1px solid var(--mdd-border);border-radius:.5rem;background:var(--mdd-panel)}.mdd-card h3{margin:0 0 .5rem;font-size:.86rem}.mdd-heading{display:flex;justify-content:space-between;gap:.5rem}.mdd-heading span{color:var(--mdd-muted);font-size:.68rem}
.mdd-card canvas{display:block;width:100%;height:210px;border-radius:.3rem;background:var(--mdd-bg)}.mdd-legend{display:flex;gap:1rem;margin:.35rem 0;color:var(--mdd-muted);font-size:.68rem}.mdd-legend span:before{content:"";display:inline-block;width:1.2rem;margin-right:.3rem;vertical-align:middle;border-top:2px solid #2563eb}.mdd-legend .is-validation:before{border-top:2px dashed #d97706}
.mdd-metrics{display:grid;gap:.3rem;margin:0}.mdd-metrics div{display:flex;justify-content:space-between;padding:.3rem .4rem;border-radius:.3rem;background:var(--mdd-bg)}.mdd-metrics dt{color:var(--mdd-muted);font-size:.68rem}.mdd-metrics dd{margin:0;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.mdd-evidence{display:grid;gap:.35rem;margin-top:.55rem}.mdd-evidence>div{display:flex;gap:.45rem;align-items:center;padding:.4rem;border-left:3px solid #2563eb;background:var(--mdd-bg)}.mdd-evidence>div>span{font-size:1rem}.mdd-evidence p{margin:0;font-size:.68rem}.mdd-evidence b{display:block;font-size:.7rem}
.mdd-diagnosis,.mdd-actions{margin-top:.65rem}.mdd-answer-row{display:flex;gap:.4rem}.mdd-answer-row select{flex:1;min-width:0}.mdd-primary{color:#fff!important;border-color:#2563eb!important;background:#2563eb!important}.mdd-card>p{min-height:1.1rem;margin:.45rem 0 0;color:var(--mdd-muted);font-size:.7rem}
.mdd-actions>div{display:flex;flex-wrap:wrap;gap:.35rem}.mdd-actions button.is-selected{color:#fff;border-color:#2563eb;background:#2563eb}
.mdd-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.mdd-grid{grid-template-columns:1fr}.mdd-answer-row{align-items:stretch;flex-direction:column}.mdd-heading{align-items:start;flex-direction:column}.mdd-card canvas{height:190px}}
@media(max-width:400px){.mdd-widget{padding:.6rem}.mdd-toolbar{align-items:stretch;flex-direction:column}.mdd-toolbar select,.mdd-toolbar button{width:100%}.mdd-actions>div{display:grid}.mdd-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.mdd-widget *{scroll-behavior:auto!important;transition:none!important}}