#mcskin-app *, #mcskin-app *::before, #mcskin-app *::after { margin:0; padding:0; box-sizing:border-box; }

  #mcskin-app {
    width:100vw; height:calc(100vh - 2.5rem); height:calc(100dvh - 2.5rem);
    position:fixed; top:2.5rem; left:0;
    overflow:hidden;
    font-family:'Minecraft',monospace;
    image-rendering:pixelated;
    -webkit-font-smoothing:none;
    -moz-osx-font-smoothing:grayscale;
    user-select:none; -webkit-user-select:none;
    background:#111;
    display:flex; flex-direction:column;
    z-index:1;
  }

  #mcskin-app img {
    -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none;
    pointer-events:none;
  }
  #mcskin-app .sk { cursor:pointer; }

  #mcskin-preview img { pointer-events:none; }

  #mcskin-bg {
    position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:0;
    background-color:#4a6a4a;
    background-size:cover; background-position:center;
    filter:blur(4px) brightness(0.68);
    transform:scale(1.08);
  }

  #mcskin-frame {
    position:relative; z-index:10;
    flex:1; min-height:0;
    display:flex; flex-direction:row;
    margin:1.5vh 2vw 1.5vh;
    gap:0;
  }

  #mcskin-left {
    width:36%; max-width:440px; min-width:160px;
    background:#dcdcdc;
    border:3px solid #020000;
    border-right:2px solid #020000;
    box-shadow:inset 2px 2px 0 0 #ffffff, inset -2px -2px 0 0 #6a6a6a;
    display:flex; flex-direction:column;
    padding:8px;
    flex-shrink:0;
  }

  #mcskin-preview {
    width:100%; aspect-ratio:1/1; max-height:48%;
    background:#8b8b8b;
    border:3px solid #020000;
    box-shadow:inset 2px 2px 0 0 #ffffff, inset -2px -2px 0 0 #555;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0; margin-bottom:6px;
  }
  #mcskin-preview img { max-width:88%; max-height:88%; image-rendering:pixelated; object-fit:contain; }
  #mcskin-preview .ph { color:#555; font-size:clamp(16px,5vw,48px); }

  #mcskin-btns {
    background:#c6c6c6;
    border-top:2px solid #6a6a6a; border-left:2px solid #6a6a6a;
    border-right:2px solid #ffffff; border-bottom:2px solid #ffffff;
    padding:4px;
    display:flex; flex-direction:column; gap:2px;
    flex:1; min-height:0;
    overflow-y:auto; scrollbar-width:none;
  }
  #mcskin-btns::-webkit-scrollbar { display:none; }

  #mcskin-app .pk-btn {
    font-family:'Minecraft',monospace;
    font-size:clamp(7px,1.3vw,14px);
    color:#ffffff;
    text-shadow:1px 1px 0 #2a2a2a;
    background:#9e9e9e;
    background-image:linear-gradient(180deg, #c7c7c7 0px, #c7c7c7 1px, #9e9e9e 1px, #9e9e9e calc(100% - 2px), #8d8d8d calc(100% - 2px));
    border:2px solid #020000;
    padding:clamp(4px,0.7vh,10px) clamp(6px,1vw,14px);
    cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-align:center; flex-shrink:0;
  }
  #mcskin-app .pk-btn:hover { border-color:#ffffff; }
  #mcskin-app .pk-btn.sel { border-color:#ffffff; }

  @media (max-width:580px) {
    #mcskin-app .pk-btn { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2; }
  }

  #mcskin-right {
    flex:1; min-width:0;
    display:flex; flex-direction:column;
    border:3px solid #020000;
    box-shadow:inset 2px 2px 0 0 #ffffff, inset -2px -2px 0 0 #6a6a6a;
    background:#dcdcdc;
    overflow:hidden; position:relative;
    padding:4px;
  }

  #mcskin-rinner {
    display:flex; flex-direction:column;
    flex:1; min-height:0; min-width:0;
    border:2px solid #020000;
    overflow:hidden; position:relative;
  }

  /* Bottom row: info box + square buttons side by side in #dcdcdc zone */
  #mcskin-rbottom {
    display:flex; flex-direction:row;
    align-items:stretch;
    flex-shrink:0;
    gap:4px;
    margin-top:4px;
  }

  #mcskin-rphdr {
    background:rgba(0,0,0,0.45);
    padding:clamp(5px,1vh,14px) clamp(8px,1.2vw,18px);
    text-align:center; flex-shrink:0;
  }
  #mcskin-rptitle { color:#fff; font-size:clamp(11px,2.2vw,24px); text-shadow:1px 1px 0 rgba(0,0,0,0.7); letter-spacing:0.8px; }
  #mcskin-rpsub { color:#ccc; font-size:clamp(7px,1.2vw,14px); text-shadow:1px 1px 0 #000; margin-top:1px; }

  #mcskin-car {
    flex:1; min-height:0;
    position:relative; overflow:hidden;
    background:transparent;
  }

  #mcskin-track {
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:clamp(8px, 1.5vw, 20px);
    position:absolute;
    bottom:4px; left:0; right:0; top:0;
  }
  #mcskin-track.anim { transition:transform 0.18s cubic-bezier(0.25,0.46,0.45,0.94); }

  #mcskin-app .sk {
    display:flex; flex-direction:column; align-items:center;
    justify-content:flex-end; flex-shrink:0; cursor:pointer;
    transition:opacity 0.3s ease;
  }
  #mcskin-app .sk .si {
    image-rendering:pixelated;
    filter:brightness(0.62);
    transition:filter 0.3s ease;
  }
  #mcskin-app .sk.act .si { filter:brightness(1); }
  #mcskin-app .sk.act { z-index:2; position:relative; }
  #mcskin-app .sk:not(.act) { opacity:0.68; }
  #mcskin-app .sk:not(.act):hover { opacity:0.82; }
  #mcskin-app .sk .si-err {
    display:flex; align-items:center; justify-content:center;
    background:rgba(60,60,60,0.35);
    border:2px dashed rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.2);
    font-family:inherit;
  }

  #mcskin-sinfo {
    background:#c6c6c6;
    border-top:2px solid #686868; border-right:2px solid #ffffff;
    border-bottom:2px solid #ffffff; border-left:2px solid #686868;
    padding:clamp(4px,0.7vh,12px) clamp(6px,1vw,14px);
    flex:1; min-width:0;
    text-align:center;
  }
  #mcskin-siname { color:#3e3e3e; font-size:clamp(14px,2.8vw,30px); text-shadow:1px 1px 0 rgba(255,255,255,0.3); letter-spacing:0.5px; }
  #mcskin-sidesc { color:#555; font-size:clamp(10px,1.8vw,20px); text-shadow:1px 1px 0 rgba(255,255,255,0.2); margin-top:2px; }

  #mcskin-dlbtns {
    display:flex; flex-direction:column; gap:3px;
    flex-shrink:0; justify-content:flex-end;
  }
  #mcskin-app .dl-sq {
    font-family:'Minecraft',monospace;
    font-size:clamp(9px,1.5vw,16px);
    color:#ffffff;
    text-shadow:1px 1px 0 #2a2a2a;
    background:#9e9e9e;
    background-image:linear-gradient(180deg, #c7c7c7 0px, #c7c7c7 1px, #9e9e9e 1px, #9e9e9e calc(100% - 2px), #8d8d8d calc(100% - 2px));
    border:2px solid #020000;
    cursor:pointer;
    width:auto; min-width:clamp(100px,13vw,180px); height:clamp(34px,4.5vw,54px);
    display:flex; align-items:center; justify-content:center;
    padding:2px clamp(10px,1.5vw,20px);
    white-space:nowrap;
  }
  #mcskin-app .dl-sq:hover { border-color:#ffffff; }

  /* Bottom bar removed — buttons are inside skin info box */

  #mcskin-toast {
    position:fixed; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0.92);
    z-index:100;
    background:#c6c6c6; border:3px solid #020000;
    box-shadow:inset 2px 2px 0 #fff, inset -2px -2px 0 #6a6a6a;
    padding:1.5vh 3vw;
    font-family:'Minecraft',monospace; font-size:clamp(8px,1.3vw,15px);
    color:#3e3e3e; text-shadow:1px 1px 0 rgba(255,255,255,0.3);
    opacity:0; pointer-events:none;
    transition:opacity 0.2s, transform 0.2s;
    text-align:center; max-width:80vw;
  }
  #mcskin-toast.show { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }

  #mcskin-ld {
    position:absolute; inset:0; z-index:999;
    display:flex; align-items:center; justify-content:center;
    background:#111; color:#777;
    font-family:'Minecraft',monospace; font-size:clamp(10px,2vw,18px);
    transition:opacity 0.3s;
  }
  #mcskin-ld.done { opacity:0; pointer-events:none; }
  .mcskin-ldot::after { content:''; animation:mcskin-dts 1.4s steps(4,end) infinite; }
  @keyframes mcskin-dts { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

  @media (max-width:580px) {
    #mcskin-app { top:0; height:100vh; height:100dvh; }
    #mcskin-frame { flex-direction:column; margin:0.5vh 1vw 0.3vh; }
    #mcskin-left {
      width:100%; max-width:none; max-height:38%;
      flex-direction:row; padding:5px;
      border-right:3px solid #020000; border-bottom:2px solid #020000;
    }
    #mcskin-preview { width:auto; height:100%; aspect-ratio:1/1; margin-bottom:0; margin-right:5px; max-height:100%; max-width:30%; flex-shrink:0; }
    #mcskin-btns { flex:1; min-width:0; }
    #mcskin-right { min-height:0; }
  }
  @media (max-height:400px) {
    #mcskin-frame { margin:0.3vh 1vw 0.2vh; }
    #mcskin-left { padding:3px; }
    #mcskin-app .pk-btn { padding:clamp(2px,0.4vh,5px) clamp(4px,0.6vw,8px); }
  }