:root{--primary:#12746a;--primary-dark:#0c5b53;--action:#bb4f21;--action-hover:#a94119;--surface-warm:#faf7f1;--ink:#172c2a;--line:#dde4db}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--surface-warm);color:var(--ink)}
button,a{-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
.preview-page{display:flex;flex-direction:column}
.preview-toolbar{position:relative;z-index:5;flex:none;min-height:68px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line)}
.preview-identity{display:flex;align-items:center;gap:12px;min-width:0}
.preview-icon{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.preview-back,.preview-icon-button{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;color:#657465;background:transparent;border:0;border-radius:6px;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.preview-back:hover,.preview-icon-button:hover{background:#eff3e8;color:var(--ink)}
.preview-name{display:flex;flex-direction:column;min-width:0;gap:5px}
.preview-name strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.35;font-weight:600;color:var(--ink)}
.preview-name>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:1.3;color:#67796a}
.preview-name b{padding:0 5px;font-weight:400;color:#c4c8ce}
.preview-controls{display:flex;align-items:center;justify-content:center;gap:10px}
.preview-devices{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #e7ecde;border-radius:8px;background:#eff3e8}
.preview-devices button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:76px;height:32px;padding:0 13px;font:inherit;font-size:12px;color:#657465;background:transparent;border:1px solid transparent;border-radius:5px;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}
.preview-devices button.active{color:var(--primary);background:#fff;border-color:#dce6d5;box-shadow:0 1px 2px #19372b08}
.preview-devices button:hover{color:var(--ink)}
.preview-control-divider{width:1px;height:18px;margin:0 2px;background:var(--line)}
.preview-controls #previewRotate{width:30px;height:32px}
.preview-controls #previewRotate .preview-icon{width:16px;height:16px}
.preview-controls button:disabled{color:#c5cad1;cursor:default;background:transparent}
.preview-size{min-width:84px;color:#67796a;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.preview-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.preview-consult{display:flex;align-items:center;justify-content:center;gap:12px;height:34px;padding:0 13px;border:1px solid var(--action);border-radius:7px;background:var(--action);color:#fff;font-size:12px;font-weight:600;box-shadow:0 3px 10px #bb4f211a;white-space:nowrap;text-decoration:none;transition:border-color .15s,background .15s}
.preview-consult .preview-icon{width:14px;height:14px}
.preview-consult:hover{background:var(--action-hover);border-color:var(--action-hover)}
.preview-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f3f0e6}
.preview-canvas{position:relative;flex:none;background:white;box-shadow:0 12px 35px #19372b14;transition:border-radius .2s}
.preview-canvas iframe{position:absolute;top:0;left:0;display:block;border:0;transform-origin:top left;background:white}
.preview-canvas[data-device="mobile"],.preview-canvas[data-device="tablet"]{border-radius:12px;outline:5px solid #cbd5c2;box-shadow:0 12px 35px #19372b1a;overflow:hidden}
.preview-canvas[data-device="desktop"]{box-shadow:none}
.preview-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--surface-warm);color:#657465;z-index:2;font-size:12px}
.preview-loading>span{display:block;width:25px;height:25px;border:2px solid #dbe4d4;border-top-color:#657465;border-radius:50%;animation:spin .8s linear infinite}
.preview-loading[hidden],.preview-error[hidden],.preview-show[hidden],.preview-toolbar[hidden]{display:none}
.preview-error{position:absolute;inset:0;z-index:3;background:var(--surface-warm);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;text-align:center}
.preview-error h1{font-size:24px}
.preview-error p{font-size:13px;color:#657465}
.preview-error button{background:var(--action);border:0;border-radius:6px;padding:12px 24px;color:#fff;margin:15px;cursor:pointer}
.preview-error a{font-size:12px;color:var(--primary)}
.preview-show{position:fixed;top:14px;right:20px;z-index:10;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:#59725f;font-size:12px;padding:10px 13px;border-radius:6px;box-shadow:0 2px 10px #19372b0d;cursor:pointer}
.preview-show .preview-icon{width:16px;height:16px}
.preview-show:hover{background:#f7f7ed}
button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){
 .preview-toolbar{gap:16px;padding-right:16px;padding-left:16px}
 .preview-devices button{min-width:64px;padding:0 9px}
 .preview-controls{gap:8px}.preview-actions{gap:5px}
}
@media(max-width:800px){
 .preview-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:12px 14px 10px}
 .preview-identity{gap:8px}.preview-name strong{font-size:12px}.preview-name>span{font-size:10px}
 .preview-actions{grid-column:2;grid-row:1}.preview-controls{grid-column:1 / -1;grid-row:2}
 .preview-consult{gap:8px}.preview-devices button{min-width:66px}
}
@media(max-width:480px){
 .preview-toolbar{gap:10px 8px;padding-right:12px;padding-left:12px}
 .preview-back{width:28px}.preview-actions{gap:4px}
 .preview-actions .preview-icon-button{width:28px;height:32px}
 .preview-actions>a.preview-icon-button{display:none}
 .preview-consult{height:32px;padding:0 10px;font-size:11px}.preview-consult .preview-icon{display:none}
 .preview-controls{gap:7px}.preview-devices button{min-width:54px;gap:5px;padding:0 6px;font-size:11px}
 .preview-devices .preview-icon{width:16px;height:16px}.preview-control-divider{display:none}
 .preview-size{min-width:76px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.preview-canvas,.preview-devices button,.preview-back,.preview-icon-button,.preview-consult{transition:none}.preview-loading>span{animation:none}}