.canvas-main{min-width:0}
.canvas-toolbar{border-bottom:1px solid #e7e9ec;background:#fff}
.canvas-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;min-height:64px;padding-block:12px}
.canvas-tools h1{font-size:18px;line-height:1.5;font-weight:700}
.canvas-actions{display:flex;align-items:center;gap:8px}
.canvas-tool{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border:1px solid #e2e6e9;border-radius:6px;background:#fff;color:#394550;cursor:pointer}
.canvas-tool:hover{border-color:#c46b5f;background:#fff8f6}
.canvas-tool .icon{width:18px;height:18px}
.canvas-open{width:auto;padding-inline:12px;gap:7px;font-size:12px;font-weight:600;white-space:nowrap}
.canvas-frame-wrap{position:relative;height:calc(100vh - 148px);min-height:480px;background:#f7f8fa}
.canvas-frame-wrap iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.canvas-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:#f7f8fa;text-align:center;color:#66717e;font-size:13px}
.canvas-spinner{display:block;width:32px;height:32px;margin:0 auto 12px;border:3px solid #e4e7ec;border-top-color:#cf4c3e;border-radius:50%;animation:canvas-spin .8s linear infinite}
.canvas-notice{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:1;width:max-content;max-width:calc(100% - 24px);padding:10px 14px;border:1px solid #e2e6e9;border-radius:6px;background:#fff;color:#5f6d7a;font-size:12px;line-height:1.7;box-shadow:0 3px 15px #2328310d}
.canvas-noscript{padding-block:16px;font-size:13px}
@keyframes canvas-spin{to{transform:rotate(360deg)}}
@media(max-width:540px){
  .canvas-tools{min-height:60px;gap:8px}
  .canvas-tools h1{font-size:16px}
  .canvas-open{padding-inline:9px;gap:5px}
}
@media(prefers-reduced-motion:reduce){.canvas-spinner{animation:none}}