.tool.tool-wide{width:min(100%, var(--page-width))}.dropzone[hidden],.editor[hidden]{display:none}.dropzone{padding:var(--space-xl) var(--space-lg);border-radius:var(--radius);text-align:center;cursor:pointer;border:2px dashed #ccc;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;transition:border-color .15s,background .15s;display:flex}.dropzone:hover,.dropzone.dragover{background:#fafafa;border-color:#999}.dropzone-title{margin:0;font-size:1.15rem;font-weight:600}.dropzone-sub{color:#666;margin:0;font-size:.9rem}.editor{gap:var(--space-lg);grid-template-columns:minmax(0,1fr) 320px;align-items:start;display:grid}.canvas-column{min-width:0}.canvas-frame{border-radius:calc(var(--radius) + 6px);background:linear-gradient(#eef0f3,#e4e7eb);border:1px solid #d7dade;padding:1.25rem;box-shadow:0 6px 18px #0f141e14}.canvas-stage{border-radius:calc(var(--radius) - 2px);outline-offset:-2px;background-color:#0000;background-image:linear-gradient(45deg,#eee 25%,#0000 25%),linear-gradient(-45deg,#eee 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#eee 75%),linear-gradient(-45deg,#0000 75%,#eee 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border:1px solid #00000059;outline:1px solid #fff9;width:100%;line-height:0;position:relative;overflow:hidden}.canvas-stage canvas{width:100%;height:auto;display:block}#overlayCanvas{touch-action:none;cursor:default;width:100%;height:100%;position:absolute;top:0;left:0}.canvas-hint{color:#666;text-align:center;margin:.6rem 0 0;font-size:.85rem}.tool-actions .action-button{font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:.45rem;padding:.65rem 1.1rem;font-size:.9rem;font-weight:600;transition:transform .1s,box-shadow .15s,background .15s,border-color .15s;display:inline-flex}.tool-actions .action-button:hover{transform:translateY(-1px)}.tool-actions .action-button:active{transform:translateY(0)}.btn-icon{flex:none;width:16px;height:16px}.tool-actions .primary-button{color:#fff;background:#111;border:1px solid #111;box-shadow:0 2px 6px #0003}.tool-actions .primary-button:hover{background:#2a2a2a;box-shadow:0 4px 10px #00000040}.tool-actions .secondary-button{color:#111;background:#fff;border:1px solid #ccc}.tool-actions .secondary-button:hover{background:#f5f5f5;border-color:#999}.tool-actions .danger-button{color:#c62828;background:#fff;border:1px solid #ef9a9a}.tool-actions .danger-button:hover{background:#fff5f5;border-color:#e57373}.sidebar{gap:var(--space-md);flex-direction:column;display:flex}.panel{border-radius:var(--radius);border:1px solid #ddd;padding:1rem}.panel-header{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.panel-header h2{margin:0;font-size:1rem}.hint-text{color:#777;margin:0;font-size:.85rem}.layer-list{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.layer-chip{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem .6rem;display:flex}.layer-chip:hover{border-color:#999}.layer-chip.selected{background:#f5f5f5;border-color:#111}.layer-chip-label{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.9rem;overflow:hidden}.layer-chip-remove{color:#999;cursor:pointer;background:0 0;border:none;padding:.1rem .3rem;font-size:1rem;line-height:1}.layer-chip-remove:hover{color:#c62828}.field-label{color:#555;margin-bottom:.3rem;font-size:.8rem;display:block}.field-row{gap:.75rem;margin-top:.9rem;display:flex}.field{flex:1;min-width:0}.field-narrow{flex:none;width:6rem}.layer-textarea{width:100%;min-height:4.5rem;font:inherit;border-radius:var(--radius);resize:vertical;border:1px solid #ccc;padding:.6rem;line-height:1.5;display:block}select,input[type=color]{width:100%;font:inherit;background:#fff;border:1px solid #ccc;border-radius:8px;padding:.4rem}input[type=color]{cursor:pointer;height:2.2rem;padding:.2rem}.range-row{align-items:center;gap:.5rem;display:flex}.range-row input[type=range]{flex:1}.range-value{text-align:right;color:#555;flex:none;min-width:2.5rem;font-size:.85rem}.checkbox-label{cursor:pointer;align-items:center;gap:.4rem;font-size:.9rem;display:flex}.button-group{border:1px solid #ccc;border-radius:8px;display:flex;overflow:hidden}.toggle-button{font:inherit;cursor:pointer;background:#fff;border:none;border-right:1px solid #ccc;flex:1;padding:.4rem .5rem;font-size:.85rem}.toggle-button:last-child{border-right:none}.toggle-button:hover{background:#f0f0f0}.toggle-button[aria-pressed=true]{color:#fff;background:#111}.small-button{font:inherit;border-radius:var(--radius);cursor:pointer;background:#fff;border:1px solid #ccc;padding:.4rem .7rem;font-size:.8rem}.small-button:hover{background:#f0f0f0;border-color:#999}@media (width<=860px){.editor{grid-template-columns:1fr}}.tool-info{width:min(100%, var(--content-width));padding:var(--space-xl) 0 var(--space-lg);border-top:1px solid #eee;margin:0 auto}.tool-info h2{margin:var(--space-lg) 0 .75rem;font-size:1.15rem}.tool-info h2:first-child{margin-top:0}.tool-info p{color:#333;margin:0 0 .75rem}.info-steps{margin:0;padding-left:1.25rem}.info-steps li{margin-bottom:.5rem}.faq-item{border-bottom:1px solid #eee;padding:.85rem 0}.faq-item summary{cursor:pointer;font-weight:600}.faq-item p{color:#555;margin:.6rem 0 0}