/* Bear Skins — misma paleta que bearclient.com */
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/geist-mono-latin-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --bg:#08090b; --raise:#0b0d10; --surface:#0f1216; --s2:#14181d; --s3:#1a1f25; --line:rgba(226,236,245,.08); --line2:rgba(226,236,245,.15); --text:#eef2f5; --text2:#a9b3bc; --text3:#78838d; --accent:#c3cad9; --ink:#10131a; --danger:#df8080;--k1:#7dd3fc;--k2:#a78bfa;--k3:#f9a8d4;--k4:#fbbf24;--grad:linear-gradient(135deg,#7dd3fc,#a78bfa); color-scheme:dark; }
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text2);font:400 .88rem/1.45 "Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
button,input{font:inherit;color:inherit}
svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
kbd{font:500 .72rem "Geist Mono",ui-monospace,monospace;padding:1px 6px;border-radius:5px;border:1px solid var(--line2);background:var(--s2);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* barra superior */
.top{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--raise);flex:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:650;letter-spacing:.02em;text-decoration:none}
.brand small{display:block;font:500 .58rem/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.3em;color:var(--text3);margin-top:3px}
.top-mid{display:flex;gap:6px;margin-left:18px}
.top-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:rgba(255,255,255,.09)} .btn:disabled{opacity:.35;cursor:default}
.btn.primary{background:var(--accent);color:var(--ink);border-color:transparent;font-weight:600} .btn.primary:hover{background:#b4bdd0}
.btn.ico{width:36px;padding:0}.btn.sm{height:30px;padding:0 10px;font-size:.82rem}.btn.block{width:100%;margin-top:10px}
.btn.danger{color:var(--danger)}

/* estructura */
.app{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr) 316px}
.tools{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--raise);overflow-y:auto;padding:10px 8px}
.tgroup{font:500 .66rem "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:12px 8px 6px}
.tgroup:first-child{padding-top:2px}
.tool{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--text2);cursor:pointer;text-align:left}
.tool:hover{background:rgba(255,255,255,.06);color:var(--text)}
.tool.on{background:var(--accent);color:var(--ink);font-weight:550}
.tool span{flex:1}
.tool kbd{background:transparent;border-color:transparent;color:var(--text3)} .tool.on kbd{color:var(--ink);opacity:.6}
.info{margin-top:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px;font-size:.8rem;color:var(--text3)}
.info b{display:block;color:var(--text);font-size:.88rem;margin-bottom:4px}
.info em{display:block;font-style:normal;margin-top:8px;color:var(--text2)}

.stage{display:flex;min-width:0;min-height:0}
.stage .view{flex:1}
.view{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 28%,#161b22,#08090b 72%)}
.view.bg1{background:radial-gradient(ellipse at 50% 28%,#59616d,#2b3038 80%)}
.view.bg2{background:radial-gradient(ellipse at 50% 28%,#f0f3f7,#b9c1cc 85%)}
.panel2d{position:absolute;right:12px;bottom:34px;width:min(400px,46%);aspect-ratio:1/1.12;border:1px solid var(--line2);border-radius:14px;background:rgba(11,13,16,.94);backdrop-filter:blur(10px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 50px -12px rgba(0,0,0,.7);z-index:3}
#c3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.vbar{position:absolute;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;z-index:2}
.vbar>*{pointer-events:auto}
.vbar.top-left{left:10px;right:10px;top:10px}
.vlabel{position:absolute;left:12px;bottom:10px;font-size:.74rem;color:var(--text3);pointer-events:none;max-width:90%}
.view.bg2 .vlabel{color:#3b4350}
.vhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font:500 .72rem "Geist Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);flex:none;flex-wrap:wrap}
.vh-actions{display:flex;gap:6px}
.c2wrap{position:relative;flex:1;min-height:0}
#c2d{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;image-rendering:pixelated}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line2);background:rgba(11,13,16,.8);color:var(--text2);cursor:pointer;font-size:.8rem;backdrop-filter:blur(8px);white-space:nowrap}
.chip svg{width:15px;height:15px}
.chip:hover{color:var(--text);border-color:var(--text3)}
.chip.sq{width:30px;padding:0;justify-content:center;font-size:1rem}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:transparent}

/* módulos */
.side{border-left:1px solid var(--line);background:var(--raise);overflow-y:auto;padding:10px}
.mod{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.mod-h{display:flex;align-items:center;gap:10px;width:100%;height:42px;padding:0 12px;background:transparent;border:0;color:var(--text);font-weight:550;cursor:pointer;text-align:left}
.mod-h:hover{background:rgba(255,255,255,.03)}
.mod-h svg{color:var(--text3)}
.mod-h i{margin-left:auto;width:8px;height:8px;border-right:2px solid var(--text3);border-bottom:2px solid var(--text3);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.mod-h[aria-expanded="false"] i{transform:rotate(-45deg)}
.mod-b{padding:2px 12px 14px;border-top:1px solid var(--line);padding-top:12px}
.mod-h[aria-expanded="false"]+.mod-b{display:none}
.lbl{font:500 .66rem "Geist Mono",ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);margin:12px 0 6px}
.note{margin:0 0 10px;font-size:.78rem;color:var(--text3)}
.colors{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sw{position:relative;width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);overflow:hidden;cursor:pointer;display:block}
.sw.big{width:46px;height:46px}
.sw input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);border:0;padding:0;cursor:pointer;background:none}
.hex{flex:1;min-width:70px;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--s2);padding:0 10px;font-family:"Geist Mono",ui-monospace,monospace}
.pal{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.pal.one{grid-template-columns:repeat(9,1fr)}
.pal i{aspect-ratio:1;border-radius:5px;border:1px solid var(--line);cursor:pointer;display:block}
.pal i:hover{outline:2px solid var(--accent)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin-bottom:8px;font-size:.84rem}
.row b{font:500 .76rem "Geist Mono",ui-monospace,monospace;color:var(--text)}
.row input[type=range]{grid-column:1/-1;width:100%;accent-color:#c3cad9}
.seg{display:flex;align-items:center;gap:4px;margin:0 0 10px;flex-wrap:wrap}
.seg span{flex:1 1 100%;font-size:.78rem;color:var(--text3);margin-bottom:2px}
.seg button{flex:1;height:32px;border-radius:9px;border:1px solid var(--line2);background:var(--s2);cursor:pointer}
.seg button.on{background:var(--accent);color:var(--ink);border-color:transparent;font-weight:550}
.switch{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 4px;margin-bottom:8px;background:transparent;border:0;color:var(--text);cursor:pointer;text-align:left}
.switch span{position:relative;width:34px;height:20px;border-radius:999px;background:var(--s3);border:1px solid var(--line2);flex:none;transition:.15s}
.switch span::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--text3);transition:.15s}
.switch[aria-pressed="true"] span{background:var(--accent);border-color:transparent}
.switch[aria-pressed="true"] span::after{left:16px;background:var(--ink)}
.parts{display:grid;gap:4px}
.prt{display:grid;grid-template-columns:1fr 30px 30px;gap:6px;align-items:center;font-size:.84rem}
.prt .h{display:flex;justify-content:center;align-items:center;height:28px;border-radius:8px;border:1px solid var(--line2);background:var(--s2);cursor:pointer;font:500 .66rem "Geist Mono",ui-monospace,monospace;color:var(--text3)}
.prt .h.on{background:var(--accent);color:var(--ink);border-color:transparent}
.prt .hh{font:500 .62rem "Geist Mono",ui-monospace,monospace;color:var(--text3);text-align:center}
.parts .hd{display:grid;grid-template-columns:1fr 30px 30px;gap:6px;color:var(--text3);font-size:.7rem}
.parts .hd span:not(:first-child){text-align:center}
.quick,.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.acts{margin-top:4px}
.acts .btn{flex:1 1 calc(50% - 6px)}
.gen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gen label{display:grid;gap:4px;font-size:.78rem}.gen input{width:100%;height:32px;border:1px solid var(--line2);border-radius:8px;background:var(--s2);padding:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.slots{display:grid;gap:8px}
.slot{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--s2)}
.slot canvas{width:44px;height:44px;border-radius:8px;background:var(--bg);image-rendering:pixelated}
.slot b{display:block;color:var(--text);font-size:.82rem}.slot small{color:var(--text3)}
.slot .b{display:flex;gap:4px}
.keys{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:.8rem}

.status{display:flex;gap:16px;align-items:center;padding:6px 14px;border-top:1px solid var(--line);background:var(--raise);font-size:.76rem;color:var(--text3);flex:none}
.status .mid{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .status #stTool{color:var(--text);font-weight:550} .mono{font-family:"Geist Mono",ui-monospace,monospace}
.toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,20px);background:var(--s3);border:1px solid var(--line2);color:var(--text);padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:9}
.toast.show{opacity:1;transform:translate(-50%,0)}
body.drop::after{content:"Suelta tu skin aquí";position:fixed;inset:12px;border:2px dashed var(--accent);border-radius:20px;background:rgba(8,9,11,.85);display:grid;place-items:center;font-size:1.4rem;color:var(--text);z-index:20}
[hidden]{display:none!important}

@media (max-width:1180px){ .app{grid-template-columns:176px minmax(0,1fr) 296px} }

@media (max-width:900px){
  body{overflow:auto;height:auto}
  .app{display:flex;flex-direction:column}
  .tools{flex-direction:column;border-right:0;border-bottom:1px solid var(--line)}
  #toolList{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px}
  .tgroup{grid-column:1/-1}
  .info{display:none}
  .view{height:min(110vw,560px)} .panel2d{width:min(320px,70%);bottom:12px}
  .side{border-left:0;border-top:1px solid var(--line)}
  .top{flex-wrap:wrap} .top-mid{margin-left:0}
  .status{display:none}
}

/* color */
.view{background:radial-gradient(ellipse at 20% 15%,rgba(125,211,252,.12),transparent 45%),radial-gradient(ellipse at 85% 80%,rgba(167,139,250,.14),transparent 50%),radial-gradient(ellipse at 50% 30%,#161b22,#08090b 72%)}
.view.bg1{background:radial-gradient(ellipse at 50% 28%,#59616d,#2b3038 80%)}.view.bg2{background:radial-gradient(ellipse at 50% 28%,#f0f3f7,#b9c1cc 85%)}
.btn.primary,.tool.on,.seg button.on,.chip[aria-pressed="true"],.switch[aria-pressed="true"] span,.prt .h.on{background:var(--grad);color:#0b0d12;border-color:transparent}
.btn.primary:hover{filter:brightness(1.08);background:var(--grad)}
.switch[aria-pressed="true"] span::after{background:#0b0d12}
.tgroup:nth-of-type(1){color:var(--k1)}.tgroup:nth-of-type(2){color:var(--k2)}.tgroup:nth-of-type(3){color:var(--k4)}
.tool svg{color:var(--text3)} .tool:hover svg{color:var(--text)} .tool.on svg{color:#0b0d12}
.mod:nth-of-type(1) .mod-h svg{color:var(--k3)}.mod:nth-of-type(2) .mod-h svg{color:var(--k1)}.mod:nth-of-type(3) .mod-h svg{color:var(--k2)}.mod:nth-of-type(4) .mod-h svg{color:var(--k4)}.mod:nth-of-type(5) .mod-h svg{color:#6ee7b7}.mod:nth-of-type(6) .mod-h svg{color:var(--k3)}.mod:nth-of-type(7) .mod-h svg{color:var(--k1)}.mod:nth-of-type(8) .mod-h svg{color:var(--k2)}.mod:nth-of-type(9) .mod-h svg{color:var(--k4)}
.mod{border-top:2px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),var(--surface)}
.row input[type=range]{accent-color:#a78bfa}
.info b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand small{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.status #stTool{color:var(--k1)}
.top{background:linear-gradient(90deg,rgba(125,211,252,.06),transparent 40%,rgba(167,139,250,.07)),var(--raise)}