/* ficklestudio26 · Image tools (builds on /timer/timer.css) */
.i-drop { display:grid; place-items:center; gap:6px; padding:30px 14px; border:3px dashed #e8590c; border-radius:18px; background:#fff4e6; cursor:pointer; text-align:center; }
.i-drop.over, .i-drop.has { background:#d3f9d8; border-color:#40c057; }
.i-drop strong { font:800 clamp(20px,4vw,28px) system-ui,sans-serif; color:#d9480f; } .i-drop span { color:#5b5b66; font-weight:600; word-break:break-all; }
.i-drop input { display:none; }
.i-opts { margin-top:14px; text-align:left; }
.i-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:10px; }
.i-row label { display:grid; gap:4px; font:700 12px system-ui,sans-serif; color:#5b5b66; text-transform:uppercase; letter-spacing:.05em; }
.i-row input[type=number], .i-row select { padding:11px; border:2px solid #e8e8ec; border-radius:12px; font:600 18px system-ui,sans-serif; background:#fff; width:100%; }
.i-row input[type=range] { width:100%; accent-color:#e8590c; }
.i-chk { display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 10px; font:600 15px system-ui,sans-serif; } .i-chk label { display:flex; gap:6px; align-items:center; text-transform:none; letter-spacing:0; }
.i-chips { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.c-out { margin:14px auto 4px; padding:16px 12px; background:#fff4e6; border-radius:16px; text-align:center; max-width:760px; }
.c-label { display:block; font:700 clamp(16px,3vw,22px) system-ui,sans-serif; color:#5b5b66; }
.c-value { display:block; font:800 clamp(52px,15vw,120px)/1.05 system-ui,sans-serif; color:#d9480f; }
.c-note { display:block; margin-top:4px; font:700 clamp(15px,2.8vw,20px) system-ui,sans-serif; color:#1d1d22; }
.i-prev { max-width:100%; max-height:340px; border-radius:10px; margin:10px auto 0; display:block; background:repeating-conic-gradient(#f1f3f5 0 25%, #fff 0 50%) 50%/16px 16px; }
.f-canvas { max-width:100%; max-height:520px; border-radius:12px; display:block; margin:12px auto; background:repeating-conic-gradient(#f1f3f5 0 25%, #fff 0 50%) 50%/16px 16px; }
.f-sliders { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; text-align:left; }
.f-sliders label { display:grid; gap:4px; font:700 12px system-ui,sans-serif; color:#5b5b66; text-transform:uppercase; letter-spacing:.05em; }
.f-sliders input { width:100%; accent-color:#e8590c; }
.i-chips button.is-on, .f-chips button.is-on { background:#fff4e6; border-color:#e8590c; color:#d9480f; }
.f-chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:10px 0; }
#c-canvas { touch-action:none; cursor:crosshair; }
.c-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; text-align:left; margin:10px 0; }
.c-opts label { display:grid; gap:4px; font:700 12px system-ui,sans-serif; color:#5b5b66; text-transform:uppercase; letter-spacing:.05em; }
.c-opts select, .c-opts input[type=range] { width:100%; padding:9px; border:2px solid #e8e8ec; border-radius:10px; font:600 16px system-ui,sans-serif; background:#fff; accent-color:#e8590c; }
.c-shapes { display:flex; gap:12px; flex-wrap:wrap; font:700 15px system-ui,sans-serif; align-items:center; }
.c-shapes label { display:flex; gap:6px; align-items:center; text-transform:none; letter-spacing:0; font:700 15px system-ui,sans-serif; color:#1d1d22; }
.c-warn { margin:12px 0; padding:12px 14px; border:2px solid #fa5252; background:#fff5f5; color:#c92a2a; font:800 clamp(15px,2.6vw,18px)/1.45 system-ui,sans-serif; border-radius:12px; text-align:left; }
.c-effect-note { margin:6px 0; font:800 16px system-ui,sans-serif; text-align:left; } .c-effect-note.bad { color:#c92a2a; } .c-effect-note.ok { color:#2b8a3e; }