/* BeginThings free tools, Phase 1 (24 Oct 2026): image editor, PSD viewer, contrast checker, gradient & shadow builder, SVG path editor. Builds on bt-ft.css variables. */
.p1-checker{background-color:#fff;background-image:linear-gradient(45deg,#d6dbe3 25%,transparent 25%),linear-gradient(-45deg,#d6dbe3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6dbe3 75%),linear-gradient(-45deg,transparent 75%,#d6dbe3 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.p1-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.p1-grow{flex:1 1 auto}
.p1-k{font-size:13px;color:var(--ft-muted)}
.p1-mono{font:13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.p1-pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:12px;border:1px solid var(--ft-border);border-radius:var(--ft-r-sm);background:var(--ft-surface2);font:13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-height:320px;overflow:auto}
/* image editor */
.ie-stage{position:relative;border:1px solid var(--ft-border);border-radius:var(--ft-r);overflow:hidden;background:var(--ft-surface2)}
.ie-stage iframe{display:block;width:100%;height:min(82vh,820px);min-height:560px;border:0;background:#0c111b}
.ie-stage:fullscreen iframe{height:100vh;min-height:0}
.ie-ph{display:grid;place-items:center;gap:14px;text-align:center;padding:48px 20px;min-height:360px}
.ie-ph .bt-ic--p1-big{width:56px;height:56px;color:var(--ft-accent)}
.ie-ph p{margin:0;color:var(--ft-muted);max-width:52ch}
.ie-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.ie-feats li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;color:var(--ft-muted)}
.ie-feats li svg{flex:none;margin-top:3px;color:var(--ft-ok)}
/* PSD viewer */
.pv-drop{border:2px dashed var(--ft-ctl);border-radius:var(--ft-r);padding:28px 16px;text-align:center;background:var(--ft-surface2);transition:border-color .15s,background .15s}
.pv-drop.over{border-color:var(--ft-accent);background:color-mix(in srgb,var(--ft-accent) 10%,var(--ft-surface2))}
.pv-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.pv-view{border:1px solid var(--ft-border);border-radius:var(--ft-r-sm);overflow:auto;max-height:72vh;display:flex;justify-content:center;align-items:flex-start}
.pv-view canvas{display:block;max-width:100%;height:auto}
.pv-layers{list-style:none;margin:0;padding:0;border:1px solid var(--ft-border);border-radius:var(--ft-r-sm);max-height:72vh;overflow:auto;background:var(--ft-bg)}
.pv-layers li{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--ft-border)}
.pv-layers li:last-child{border-bottom:0}
.pv-layers li.grp{background:var(--ft-surface2)}
.pv-layers li.off .pv-name{opacity:.55}
.pv-eye{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--ft-border);background:var(--ft-surface);color:var(--ft-fg);cursor:pointer}
.pv-eye[aria-pressed="false"]{color:var(--ft-muted)}
.pv-thumb{width:44px;height:32px;border-radius:4px;border:1px solid var(--ft-border);object-fit:contain}
.pv-name{min-width:0;font-size:14px;line-height:1.3}
.pv-name b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-name small{color:var(--ft-muted);font-size:12px}
.pv-dl{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--ft-border);background:var(--ft-surface);color:var(--ft-fg);cursor:pointer}
@media (max-width:900px){.pv-grid{grid-template-columns:1fr}.pv-view,.pv-layers{max-height:60vh}}
/* contrast checker */
.cc-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}
.cc-sw{display:flex;gap:8px;align-items:center}
.cc-sw input[type=color]{width:52px;height:44px;padding:2px;border-radius:var(--ft-r-sm);border:1px solid var(--ft-ctl);background:var(--ft-bg);cursor:pointer;flex:none}
.cc-prev{border-radius:var(--ft-r);padding:22px;border:1px solid var(--ft-border)}
.cc-prev .big{font-size:28px;font-weight:700;line-height:1.2;margin:0 0 6px}
.cc-prev .norm{font-size:16px;margin:0 0 12px}
.cc-prev .ui{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:2px solid currentColor;font-weight:600}
.cc-ratio{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em}
.cc-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:14px}
.cc-checks div{padding:10px 12px;border-radius:var(--ft-r-sm);border:1px solid var(--ft-border);background:var(--ft-surface2);font-size:14px}
.cc-checks b{display:block;font-size:15px}
.cc-checks .ok b{color:var(--ft-ok)}.cc-checks .no b{color:var(--ft-err)}
.cc-sugg{display:flex;flex-wrap:wrap;gap:8px}
.cc-sugg button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border-radius:10px;border:1px solid var(--ft-border);background:var(--ft-surface);color:var(--ft-fg);font:inherit;font-size:14px;cursor:pointer}
.cc-sugg i{width:20px;height:20px;border-radius:6px;border:1px solid var(--ft-border);display:inline-block}
@media (max-width:640px){.cc-pair{grid-template-columns:1fr}.cc-pair .ft-btn{justify-self:start}}
/* gradient & shadow */
.gs-prev{height:220px;border-radius:var(--ft-r);border:1px solid var(--ft-border)}
.gs-stage{display:grid;place-items:center;min-height:260px;border-radius:var(--ft-r);border:1px solid var(--ft-border);padding:30px}
.gs-box{width:180px;height:120px;border-radius:16px}
.gs-stops,.gs-layers{display:grid;gap:8px}
.gs-stop,.gs-layer{display:grid;gap:8px;align-items:end;padding:10px;border:1px solid var(--ft-border);border-radius:var(--ft-r-sm);background:var(--ft-bg)}
.gs-stop{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) 44px}
.gs-layer{grid-template-columns:repeat(4,minmax(0,1fr)) 52px minmax(0,1fr) auto 44px}
.gs-stop input[type=color],.gs-layer input[type=color]{width:52px;height:44px;padding:2px;border-radius:var(--ft-r-sm);border:1px solid var(--ft-ctl);background:var(--ft-bg);cursor:pointer}
.gs-x{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--ft-border);background:var(--ft-surface);color:var(--ft-fg);cursor:pointer}
.gs-lbl{display:block;font-size:12.5px;color:var(--ft-muted);margin-bottom:4px}
@media (max-width:720px){.gs-layer{grid-template-columns:repeat(2,minmax(0,1fr)) 52px minmax(0,1fr)}.gs-stop{grid-template-columns:52px minmax(0,1fr) 44px}.gs-stop .gs-hex{display:none}}
/* SVG path editor */
.sp-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.sp-canvas{border:1px solid var(--ft-border);border-radius:var(--ft-r-sm);aspect-ratio:1/1;width:100%;touch-action:none;display:block}
.sp-canvas .sp-path{fill:color-mix(in srgb,var(--ft-accent) 22%,transparent);stroke:var(--ft-accent);vector-effect:non-scaling-stroke;stroke-width:2}
.sp-canvas .sp-ctl{stroke:var(--ft-muted);stroke-dasharray:3 3;vector-effect:non-scaling-stroke;stroke-width:1}
.sp-canvas .sp-pt{fill:var(--ft-surface);stroke:var(--ft-accent);vector-effect:non-scaling-stroke;stroke-width:2;cursor:grab}
.sp-canvas .sp-pt.c{fill:var(--ft-warn);stroke:var(--ft-warn)}
.sp-canvas .sp-pt.on{fill:var(--ft-accent)}
.sp-stats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ft-muted)}
.sp-stats b{color:var(--ft-fg)}
@media (max-width:900px){.sp-grid{grid-template-columns:1fr}}
.pv-copytext{display:block;margin-top:2px;padding:0;border:0;background:none;color:var(--ft-accent);font:inherit;font-size:12.5px;text-align:start;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pv-copytext:hover{text-decoration:underline}