
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
.wrapper{display:grid;grid-template-columns:1fr 320px;grid-template-rows:44px 1fr 56px;height:100vh}
.toolbar{grid-column:1/3;display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid #e5e7eb;backdrop-filter:saturate(180%) blur(6px);background:rgba(255,255,255,.95)}
#canvasWrap{position:relative;background:#f5f6f7}
.sidebar{border-left:1px solid #e5e7eb;padding:8px;overflow:auto;background:rgba(255,255,255,.98)}
.footer{grid-column:1/3;border-top:1px solid #e5e7eb;display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.95)}
.btn{font-size:12px;padding:6px 10px;border:1px solid #d1d5db;border-radius:10px;background:white;cursor:pointer;line-height:1;white-space:nowrap}
.btn:hover{background:#f8fafc}
.btn.red{color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.btn.rot{background:#83a98c;border-color:#83a98c;color:#fff}
.btn.rot:hover{filter:brightness(.96)}
.label{display:none}
.model-card{display:flex;align-items:center;justify-content:space-between;border:1px solid #e5e7eb;border-radius:12px;padding:8px;margin-bottom:8px;background:white}
.model-left{display:flex;align-items:center;gap:10px;min-width:0}
.model-thumb{display:block;width:64px!important;height:64px!important;border-radius:10px;object-fit:cover!important;background:#f3f4f6;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,.05);flex:0 0 64px}
.model-info{display:flex;flex-direction:column;min-width:0}
.model-info .name{font-weight:600}
.model-info .meta{font-size:11px;color:#6b7280}
#canvas{width:100%;height:100%;display:block}
.right{margin-left:auto}
input[type=number]{width:72px;padding:4px 6px;border:1px solid #d1d5db;border-radius:8px}
.small{font-size:11px;color:#6b7280}
.toolscroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px}
.toolscroll::-webkit-scrollbar{height:6px}
#libToggle{display:none}
.overlay{display:none;position:fixed;inset:44px 0 56px 0;background:rgba(0,0,0,.25);backdrop-filter:blur(1px);z-index:9}
.overlay.open{display:block}
@media (max-width: 1024px){
  .wrapper{grid-template-columns:1fr;grid-template-rows:44px 1fr 56px}
  .sidebar{position:fixed;right:0;top:44px;width:min(86vw,360px);height:calc(100vh - 100px);transform:translateX(100%);transition:transform .25s ease;z-index:10;box-shadow:-14px 0 24px rgba(0,0,0,.14)}
  .sidebar.open{transform:translateX(0)}
  #libToggle{display:inline-block}
  .model-thumb{width:56px!important;height:56px!important;flex-basis:56px}
}
@media (max-width: 480px){
  .btn{padding:6px 8px;font-size:12px}
  .footer{gap:6px}
}
