/* overlays */
.overlay{position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto;display:none}
.overlay.open{display:block;animation:su 0.25s cubic-bezier(0.16,1,0.3,1)}
@keyframes su{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ohdr{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:0 2rem;height:54px;background:rgba(8,8,9,0.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.backbtn{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-size:0.73rem;color:var(--muted2);cursor:pointer;background:none;border:none;padding:5px 10px;border-radius:7px;transition:all 0.13s}
.backbtn:hover{background:var(--s3);color:var(--text)}
.oname{font-family:var(--fd);font-weight:700;font-size:0.88rem;letter-spacing:-0.02em}
.ocontent{max-width:1080px;margin:0 auto;padding:1.75rem 2rem 4rem}

/* workspace */
.ws{display:grid;grid-template-columns:1fr 285px;gap:1.2rem;align-items:start}
@media(max-width:800px){.ws{grid-template-columns:1fr}}
.wpanel{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.wphdr{padding:0.75rem 1.1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.wpt{font-family:var(--fm);font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}
.wpsub{font-family:var(--fm);font-size:0.6rem;color:var(--muted)}

.dz{min-height:220px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:1.5rem;transition:background 0.16s}
.dz:hover,.dz.drag{background:rgba(255,255,255,0.015)}
.dz.drag .dzi,.dz:hover .dzi{border-color:rgba(212,245,60,0.38)}
.dzi{border:1.5px dashed var(--border2);border-radius:9px;padding:2rem 1.5rem;text-align:center;width:100%;transition:border-color 0.16s}
.dicon{font-size:1.6rem;margin-bottom:0.6rem;display:block}
.dzi h3{font-family:var(--fd);font-weight:700;font-size:0.9rem;margin-bottom:0.22rem}
.dzi p{font-size:0.72rem;color:var(--muted2)}

.csplit{display:grid;grid-template-columns:1fr 1fr}
.ccol{position:relative}
.ccol+.ccol{border-left:1px solid var(--border)}
.ccol canvas{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;background:#080808}
.clabel{position:absolute;top:6px;left:6px;font-family:var(--fm);font-size:0.56rem;color:var(--muted2);background:rgba(0,0,0,0.82);padding:2px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:0.06em;pointer-events:none}
.checker{background:repeating-conic-gradient(#1b1b22 0% 25%,#111118 0% 50%) 0 0/16px 16px}

.cbody{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:0.95rem}
.cg label{display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:0.6rem;color:var(--muted2);margin-bottom:0.42rem;text-transform:uppercase;letter-spacing:0.06em}
.cg label span{color:var(--accent)}
input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--s3);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px rgba(212,245,60,0.45)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mbtn{padding:6px 4px;background:var(--s3);border:1px solid var(--border);border-radius:6px;color:var(--muted2);font-size:0.6rem;font-family:var(--fm);cursor:pointer;transition:all 0.12s;text-align:center;text-transform:uppercase;letter-spacing:0.04em}
.mbtn.on{background:rgba(212,245,60,0.09);border-color:rgba(212,245,60,0.32);color:var(--accent)}
.cdiv{height:1px;background:var(--border);margin:0.05rem 0}
.dlbtn{width:100%;padding:11px;background:var(--accent);color:#080809;border:none;border-radius:8px;font-family:var(--fd);font-weight:700;font-size:0.85rem;cursor:pointer;transition:all 0.16s}
.dlbtn:hover:not(:disabled){background:#e0ff50;box-shadow:0 0 18px rgba(212,245,60,0.2);transform:translateY(-1px)}
.dlbtn:disabled{background:var(--s3);color:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}
.rstbtn{width:100%;padding:7px;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:8px;font-family:var(--fm);font-size:0.65rem;cursor:pointer;transition:all 0.12s;margin-top:3px}
.rstbtn:hover{color:#ff7070;border-color:rgba(255,112,112,0.38)}
select,.numinp{width:100%;padding:7px 9px;background:var(--s3);border:1px solid var(--border);color:var(--text);border-radius:7px;font-family:var(--fm);font-size:0.67rem;outline:none}
select:focus,.numinp:focus{border-color:rgba(212,245,60,0.38)}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:3px}
.pbtn{padding:6px 3px;background:var(--s3);border:1px solid var(--border);border-radius:6px;color:var(--muted2);font-family:var(--fm);font-size:0.57rem;cursor:pointer;text-align:center;transition:all 0.12s;line-height:1.35}
.pbtn:hover,.pbtn.on{border-color:var(--accent);color:var(--accent);background:rgba(212,245,60,0.06)}

/* color picker row */
.cprow{display:flex;align-items:center;gap:8px;margin-top:4px}
.cpick-swatch{width:28px;height:28px;border-radius:6px;border:1px solid var(--border2);flex-shrink:0;transition:background 0.2s}
.cpick-hex{font-family:var(--fm);font-size:0.68rem;color:var(--muted2)}
.cpalette{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.cp-sw{width:22px;height:22px;border-radius:5px;border:2px solid transparent;cursor:pointer;transition:transform 0.1s,border-color 0.1s;flex-shrink:0}
.cp-sw:hover{transform:scale(1.18)}
.cp-sw.sel{border-color:var(--accent)}
input[type=color]{width:22px;height:22px;border:1px solid var(--border2);border-radius:5px;background:none;cursor:pointer;padding:1px}

/* AI loading */
.aiload{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem;gap:0.9rem;text-align:center}
.spinner{width:32px;height:32px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.aiload p{font-size:0.78rem;color:var(--muted2);font-family:var(--fm)}
.aiload small{font-size:0.65rem;color:var(--muted)}

/* 3D preview */
#rt-preview{display:block;width:100%;height:230px;background:#06060a;cursor:grab}
#rt-preview:active{cursor:grabbing}
.noimgph{height:230px;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:0.68rem;color:var(--muted)}

/* sdot */
.sdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.sdot.on{background:var(--accent);box-shadow:0 0 5px var(--accent)}
.stxt{font-family:var(--fm);font-size:0.6rem;color:var(--muted)}

.infobox{margin-top:1.4rem;padding:1rem 1.2rem;border:1px solid rgba(212,245,60,0.12);border-radius:9px;background:rgba(212,245,60,0.022)}
.infobox-t{font-family:var(--fm);font-size:0.62rem;color:var(--accent);margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:0.06em}
.infobox p{font-size:0.76rem;color:var(--muted2);line-height:1.7}
.infobox strong{color:var(--text);font-weight:500}

footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:1.4rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer p{font-family:var(--fm);font-size:0.68rem;color:var(--muted)}
footer a{color:var(--muted2);text-decoration:none;transition:color 0.13s}
footer a:hover{color:var(--accent)}
input[type=file]{display:none}
button.tcard{font:inherit;text-align:left;color:inherit;width:100%;cursor:pointer}.tcard>span,.tmeta>span{display:block}.tcard .tmeta{display:flex}.tcard .tbadge{display:inline-block}.tcard .tarr{display:grid}.tname,.tdesc{display:block}
:focus-visible{outline:3px solid #d4f53c;outline-offset:5px}.cg label,.tdesc{font-size:1rem}.sec-t,.pi,.nbadge,.stat-l,footer,.wpt,.wpsub,.oname,.clabel,.stxt{font-size:.875rem}.dz [type=file]{display:none}.cp-sw{min-width:32px;min-height:32px}:root{--muted:#a6a6b5;--muted2:#b5b5c4} .dz:focus-within{border-color:#d4f53c}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Match the shared Free Browser Tools design. */
:root{--s1:#0f141d;--s2:#151c28;--s3:#202938;--border:#29303d;--border2:#58667c;--accent:#59d0ff;--muted2:#b7c2d4;--r:12px;--fd:system-ui,sans-serif;--fm:system-ui,sans-serif}
.overlay{position:relative;inset:auto;z-index:auto;overflow:visible;background:transparent;display:none}.overlay.open{animation:none}.ohdr{position:static;max-width:1160px;margin:auto;height:auto;min-height:64px;padding:16px 0;background:none;flex-wrap:wrap}.oname{font-size:1.4rem}.backbtn{font-size:.9rem;min-height:44px;border:1px solid #58667c}.ocontent{max-width:1208px;padding:24px;margin:auto}.ws{grid-template-columns:minmax(0,1fr) 340px}.wpanel[style]{position:static!important}.wpt,.wpsub,.cg label,.clabel,.mbtn,.pbtn,.dzi p{font-family:system-ui,sans-serif;font-size:.85rem;letter-spacing:normal;text-transform:none}.cg label{line-height:1.6}.cbody{gap:1rem}.cbody p{font-size:.9rem!important;line-height:1.7;color:#b7c2d4!important}.wphdr{gap:12px;flex-wrap:wrap}.oname:focus{outline:none}.dlbtn{background:linear-gradient(135deg,#9c7cff,#59d0ff);font-size:.95rem;min-height:44px}.dlbtn:hover:not(:disabled){background:linear-gradient(135deg,#ae95ff,#83ddff);box-shadow:none}.rstbtn,.mbtn,.pbtn{min-height:40px}.mbtn.on,.pbtn.on{color:#72dbff;background:#182c3b;border-color:#59d0ff}.cbody input:not([type=range]):not([type=color]),.cbody select,.numinp{width:100%;padding:.75rem;background:#080b10;color:#f4f7fb;border:1px solid #58667c;border-radius:8px;font:inherit}.cbody input[type=color]{width:60px;height:40px}.cbody label{color:#f4f7fb;font-weight:600}.cbody canvas{max-width:100%;max-height:420px;object-fit:contain;background:repeating-conic-gradient(#243040 0% 25%,#151c28 0% 50%) 0 0/16px 16px}.checker canvas{background:transparent}.cbody .btn{justify-content:center}.infobox{color:#b7c2d4;background:#0f141d;border-color:#29303d}.infobox-t{color:#59d0ff}.cp-sw{width:36px;height:36px}.overlay input[type=file]{display:block}input[type=range]{height:8px;margin:10px 0}.stxt{font-size:.85rem}#image-error:not(:empty){padding:1rem;border:1px solid #f5b84b;border-radius:8px;color:#ffe0a3}#image-error:empty{display:none}.ohdr,.overlay{scroll-margin-top:150px}
@media(max-width:800px){.ws{grid-template-columns:1fr}.ohdr{padding:16px 24px}.csplit{grid-template-columns:1fr}.ccol+.ccol{border-left:0;border-top:1px solid #29303d}.ocontent{padding:16px}.oname{font-size:1.15rem}}

.oname{scroll-margin-top:160px}.rstbtn{font-size:.9rem}.dzi{padding:2rem;text-align:center;border:1px dashed #58667c;border-radius:8px;width:100%}.dzi h3{font-size:1.1rem}.dicon{display:block;font-size:1.5rem;margin-bottom:.6rem}.dz{flex-direction:column;gap:1rem}.dz input[type=file]{max-width:100%;font-size:.9rem}.oname{scroll-margin-top:170px}