.webprod{display:grid;gap:20px}.webprod-toolbar,.webprod-panel,.webprod-preview,.webprod-report,.webprod-export{padding:20px;border-radius:22px;background:var(--surface,#eef3f8);box-shadow:var(--shadow-out,8px 8px 18px #cbd3dc,-8px -8px 18px #fff)}.webprod-main{display:grid;grid-template-columns:310px minmax(0,1fr);gap:20px}.webprod-panel{display:grid;align-content:start;gap:13px}.webprod-panel label,.webprod-toolbar label,.webprod-export label{display:grid;gap:6px;font-size:.78rem;font-weight:800;color:var(--muted,#64748b)}.webprod-upload{display:grid;place-items:center;padding:22px;text-align:center;border:2px dashed var(--accent,#14b8a6);border-radius:16px;cursor:pointer}.webprod-preview-box{min-height:320px;display:grid;place-items:center;overflow:auto;border-radius:15px;background:#fff;padding:14px}.webprod-preview-box img,.webprod-preview-box canvas{max-width:100%;max-height:58vh}.webprod-toolbar{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px}.webprod-actions,.webprod-export{display:flex;align-items:end;flex-wrap:wrap;gap:10px}.webprod-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.webprod-metric{padding:14px;border-radius:15px;background:rgba(100,116,139,.09)}.webprod-metric strong{display:block;font-size:1.15rem}.webprod-code{width:100%;min-height:170px;font:13px/1.5 ui-monospace,monospace}.webprod-status{flex:1;min-width:220px}.webprod-pass{color:#059669}.webprod-warn{color:#d97706}.webprod-fail{color:#dc2626}@media(max-width:900px){.webprod-main{grid-template-columns:1fr}.webprod-toolbar{grid-template-columns:repeat(3,1fr)}.webprod-report-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.webprod-toolbar{grid-template-columns:1fr 1fr}}[data-theme=dark] .webprod-toolbar,[data-theme=dark] .webprod-panel,[data-theme=dark] .webprod-preview,[data-theme=dark] .webprod-report,[data-theme=dark] .webprod-export{background:#172235;box-shadow:8px 8px 18px #0a1220,-7px -7px 16px #22314a}[data-theme=dark] .webprod-preview-box{background:#0f1929}