*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f5f4f2;color:#1a1a1a;min-height:100vh}
#app{max-width:1200px;margin:0 auto;padding:20px 16px}
header{margin-bottom:20px}
header h1{font-size:1.5rem;font-weight:700}
.subtitle{font-size:.88rem;color:#666;margin-top:3px}

#main-layout{display:grid;grid-template-columns:1fr 310px;gap:18px;align-items:start}

/* Canvas panel */
#canvas-panel{background:#fff;border-radius:12px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.08)}

#upload-zone{border:2px dashed #d0ccc5;border-radius:8px;padding:44px 24px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;color:#888}
#upload-zone:hover,#upload-zone.drag{border-color:#8b6f47;background:#faf7f3}
#upload-zone svg{color:#bbb;display:block;margin:0 auto 12px}
#upload-zone p{font-size:.88rem}
.link{color:#8b6f47;text-decoration:underline;cursor:pointer}

#canvas-wrap{position:relative;border-radius:8px;overflow:hidden;cursor:crosshair}
#mainCanvas{display:block;width:100%;border-radius:8px}

#hint-bar{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.86rem;color:#555;flex-wrap:wrap}
#hint-icon{font-size:.95rem;font-weight:700;color:#8b6f47;flex-shrink:0}
#resetBtn{margin-left:auto}

#loading-bar{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.86rem;color:#666}
.spinner{width:18px;height:18px;border:2px solid #e0d5c5;border-top-color:#8b6f47;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

#opacity-bar{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#opacity-bar label{display:flex;align-items:center;gap:8px;font-size:.83rem;color:#555;flex:1;min-width:180px}
#opacity-bar input[type=range]{flex:1;accent-color:#8b6f47}
#opVal{width:36px;text-align:right;color:#888}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:8px;border:none;
  cursor:pointer;font-size:.84rem;font-weight:500;transition:background .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:#666;border:1px solid #ddd}.btn-ghost:hover{background:#f5f5f5}
.btn-outline{background:transparent;color:#8b6f47;border:1px solid #8b6f47}.btn-outline:hover{background:#faf7f3}

/* Texture panel */
#texture-panel{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.08);
  max-height:88vh;overflow-y:auto}
#tex-header h2{font-size:.95rem;font-weight:600;margin-bottom:9px}
#filter-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.ftab{padding:3px 11px;border-radius:20px;border:1px solid #ddd;background:transparent;
  font-size:.76rem;cursor:pointer;color:#555;transition:background .15s,color .15s}
.ftab.on,.ftab:hover{background:#8b6f47;color:#fff;border-color:#8b6f47}

#texture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tex-item{cursor:pointer;border-radius:7px;overflow:hidden;border:2px solid transparent;
  transition:border-color .15s,transform .1s}
.tex-item:hover{border-color:#c4a97a;transform:scale(1.03)}
.tex-item.sel{border-color:#8b6f47;box-shadow:0 0 0 1px #8b6f47}
.tex-item.loading-tex{opacity:.5;pointer-events:none}
.tex-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.tex-item span{display:block;font-size:.68rem;text-align:center;padding:3px 2px;color:#555;
  background:#faf7f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:760px){
  #main-layout{grid-template-columns:1fr}
  #texture-panel{max-height:none}
  #texture-grid{grid-template-columns:repeat(4,1fr)}
}