/* Locally bundled homepage UI. All selectors stay inside the OPC studio. */
.opcf-studio [data-hu-preview]{min-width:0}
.opcf-studio .hu-preview-tabs{display:flex;gap:4px;padding:4px;border:1px solid #dfe5ed;border-radius:12px;background:#f0f3f7}
.opcf-studio .hu-preview-tabs button{flex:1;min-height:40px;border:1px solid transparent;border-radius:8px;background:transparent;color:#687589;font:inherit;font-size:13px;transition:background-color .16s,border-color .16s,box-shadow .16s}
.opcf-studio .hu-preview-tabs button[aria-pressed=true]{background:#fff;border-color:#dae2ed;color:#263b55;box-shadow:0 1px 3px #18334f0b}
.opcf-studio .hu-preview-devices{display:flex;justify-content:center;gap:7px;margin:12px 0 2px}
.opcf-studio .hu-preview-devices button{display:grid;place-items:center;width:40px;height:40px;border:1px solid transparent;border-radius:9px;background:transparent;color:#768398;transition:background-color .16s,border-color .16s,transform .16s}
.opcf-studio .hu-preview-devices button[aria-pressed=true]{background:#edf3fc;border-color:#cbd9ed;color:#315f98}
.opcf-studio .hu-preview-devices svg{width:19px;height:19px;fill:none}
.opcf-studio .hu-preview-state{font-size:12px;line-height:1.7;color:#708097;min-height:38px;padding:8px 2px;font-variant-numeric:tabular-nums}
.opcf-studio .hu-preview-state[data-error=true]{color:#ad3f3f}
.opcf-studio .hu-preview-stage{overflow:hidden;border:1px solid #dce4ef;border-radius:14px;background:#edf1f6;box-shadow:0 2px 4px #21364c06,0 12px 26px #21364c09}
.opcf-studio .hu-preview-chrome{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 10px;color:#8b98ab;background:#f8fafc;border-bottom:1px solid #e5eaf2}
.opcf-studio .hu-preview-chrome>span{font-size:8px;letter-spacing:2px;color:#c7cfda}
.opcf-studio .hu-preview-chrome small{font-size:11px}.opcf-studio .hu-preview-chrome button{border:0;background:transparent;font-size:20px;min-width:40px;min-height:34px;color:#708097}
.opcf-studio .hu-preview-viewport{overflow:auto;overscroll-behavior:contain;min-width:0;height:clamp(400px,calc(100dvh - 295px),750px)}
.opcf-studio .hu-preview-viewport iframe{display:block;border:0;min-height:100%;height:100%;background:#fff;max-width:none}
.opcf-studio .hu-image{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e1e7ef;border-radius:12px;background:#fff}
.opcf-studio .hu-image img,.opcf-studio .hu-image-empty{width:64px;height:48px;object-fit:cover;border-radius:7px;flex:none}.opcf-studio .hu-image img{outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
.opcf-studio .hu-image-empty{display:grid;place-items:center;background:#f1f4f8;color:#94a0b1}.opcf-studio .hu-image-empty svg{width:22px;height:22px}
.opcf-studio .hu-image>div:not(.hu-image-actions){display:grid;gap:5px;min-width:0}.opcf-studio .hu-image strong{font-size:13px}.opcf-studio .hu-image small{font-size:11px;color:#7c899b}
.opcf-studio .hu-image-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opcf-studio [data-hu-preview] button:focus-visible{outline:2px solid #315f98;outline-offset:3px}
.opcf-studio [data-hu-preview] button:active{transform:scale(.96)}
@media(max-width:600px){.opcf-studio .hu-image{flex-wrap:wrap}.opcf-studio .hu-image-actions{margin-left:0;width:100%}.opcf-studio .hu-preview-viewport{height:70dvh;min-height:430px}}
@media(prefers-reduced-motion:reduce){.opcf-studio [data-hu-preview] button{transition:none}.opcf-studio [data-hu-preview] button:active{transform:none}}