:root{--bg-color: #1e1e1e;--sidebar-bg: #252525;--text-color: #ffffff;--accent-color: #d946ef;--border-color: #333;--input-bg: #333;--font-family: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);height:100vh;overflow:hidden}#app{display:flex;height:100%}.preview-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background-color:#1e1e1e;background-image:radial-gradient(#333 1px,transparent 1px);background-size:20px 20px}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:40px;overflow:auto}.capture-target{background:linear-gradient(135deg,#8b5cf6,#3b82f6);padding:20px;border-radius:0;box-shadow:0 20px 50px #00000080;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:400px;min-height:300px}.image-wrapper{background:transparent;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px #0000004d;position:relative;transition:all .2s ease}.image-wrapper img{display:block;max-width:100%;max-height:80vh;object-fit:contain}#placeholder-text{color:#ffffff80;padding:40px;border:2px dashed rgba(255,255,255,.2);border-radius:10px;cursor:pointer}.sidebar{width:320px;background-color:var(--sidebar-bg);border-left:1px solid var(--border-color);padding:20px;display:flex;flex-direction:column;gap:24px;overflow-y:auto}.sidebar-section{display:flex;flex-direction:column;gap:12px}.sidebar-section label{font-size:12px;font-weight:600;color:#aaa;display:flex;justify-content:space-between}.control-group{display:flex;flex-direction:column;gap:8px}.control-row{display:flex;gap:12px}.control-group.half{flex:1}input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:#444;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#ddd;border-radius:50%;cursor:pointer;border:2px solid var(--sidebar-bg)}input[type=range]:focus::-webkit-slider-thumb{background:var(--accent-color)}.background-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.bg-option{width:100%;aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent}.bg-option.active{border-color:var(--text-color)}.ratio-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.ratio-btn{background:#333;border:none;color:#aaa;padding:6px 0;border-radius:4px;font-size:11px;cursor:pointer}.ratio-btn:hover{background:#444;color:#fff}.ratio-btn.active{background:#555;color:#fff}.bottom-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#2a2a2a;padding:8px 16px;border-radius:12px;display:flex;gap:12px;box-shadow:0 4px 12px #0000004d;border:1px solid #333}.tool-btn{background:#3a3a3a;border:1px solid #444;color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}.tool-btn:hover{background:#4a4a4a}#btn-copy{background:#444}