*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Arial,sans-serif;color:#23343f;background:#ffffff;display:flex;flex-direction:column}.preview-bar{flex:none;background:#fff;border-bottom:1px solid #ccd3d7;padding:15px 24px 10px;box-shadow:0 2px 14px #142b3d0c;z-index:1}.top{display:flex;align-items:center;justify-content:space-between;gap:16px}.label{font-size:9px;letter-spacing:2px;font-weight:700;color:#536b78}h1{font-size:21px;margin:3px 0 0;letter-spacing:-.5px}h1 span{font-size:10px;letter-spacing:0;font-weight:500;margin-left:8px;color:#517561;background:#edf6ef;border-radius:20px;padding:4px 8px}.actions{display:flex;gap:7px}button,select{font:inherit;font-size:12px;cursor:pointer}button{background:#fff;border:1px solid #c8d2d7;border-radius:7px;padding:8px 11px;color:#253e4c}button:hover{background:#f0f5f7}button[aria-pressed=true]{background:#e6f0f5;border-color:#00556e;color:#00556e}button:focus-visible,select:focus-visible{outline:3px solid #6ba2b8;outline-offset:3px}#share{background:#00556e;color:#fff;border-color:#00556e}nav{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0 13px}nav button{font-weight:600}nav button[aria-pressed=true]{background:#203e4e;color:#fff;border-color:#203e4e}.controls{display:flex;gap:25px;align-items:flex-start;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:500;color:#62717b}.field b{font-weight:500}select{height:32px;background:#f8fafb;border:1px solid #ccd5da;border-radius:6px;padding:0 8px;color:#263f4c;max-width:100%}#swatches{display:flex;gap:6px;flex-wrap:wrap}#swatches button{height:32px;padding:5px 8px;display:flex;align-items:center;gap:6px;font-size:11px}#swatches button::before{content:'';width:14px;height:14px;background:var(--swatch);border-radius:50%;border:1px solid #0002;flex:none}#swatches button[aria-pressed=true]{box-shadow:0 0 0 1px #00556e}#swatches small{font-size:9px;opacity:.6}.bottom{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#6a7780;margin-top:12px}#status{color:#385e70}#canvas{flex:1;min-height:0;display:flex;justify-content:center;padding:0;overflow:hidden}iframe{width:100%;height:100%;border:0;background:#fff;transition:width .2s}.mobile iframe{width:390px;max-width:100%;border-left:1px solid #c6d0d6;border-right:1px solid #c6d0d6}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:9px;background:#203e4e;color:#fff;font-size:13px;opacity:0;pointer-events:none}#toast.show{opacity:1}@media(max-width:760px){.preview-bar{padding:12px}.top{align-items:flex-start}h1{font-size:18px}.actions{flex-wrap:wrap;justify-content:flex-end;max-width:195px}.actions button{font-size:10px;padding:6px}h1 span{display:none}nav{gap:5px;margin:12px 0}nav button{font-size:10px;padding:7px}.controls{gap:10px}.field{font-size:9px}.bottom{font-size:9px}.bottom span:last-child{max-width:130px;text-align:right}#swatches button{font-size:10px;padding:4px 6px}#swatches small{display:none}}

.background-controls{display:flex;align-items:center;gap:6px}.background-controls input[type=color]{width:35px;height:32px;padding:2px;border:1px solid #ccd5da;border-radius:6px;background:white;cursor:pointer}.background-controls input[type=text],#background-hex{width:78px;height:32px;padding:6px;border:1px solid #ccd5da;border-radius:6px;font:11px monospace}.background-controls button{height:32px;padding:5px 8px;font-size:11px}