:root{
  color-scheme:light;
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background:#ecebe7;
  color:#151515;
}

*{ box-sizing:border-box; }

html, body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}

.sound-engine{
  position:fixed;
  width:1px;
  height:1px;
  border:0;
  opacity:0;
  pointer-events:none;
}

button, a{ font:inherit; }

#layoutApp{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 310px;
  grid-template-rows:72px minmax(0, 1fr);
  width:100%;
  height:100%;
  padding:10px;
  gap:10px;
}

.layout-header{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  padding:10px 12px;
  border:1px solid #c9c8c3;
  background:rgba(255,255,255,.86);
}

.layout-header h1,
.model-library h2{
  margin:0;
  font-size:17px;
  letter-spacing:-.02em;
}

.layout-header p,
.model-library p{
  margin:2px 0 0;
  color:#777;
  font-size:11px;
}

.back-link{
  display:grid;
  place-items:center;
  height:38px;
  padding:0 14px;
  border:1px solid #222;
  color:#111;
  text-decoration:none;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}

.mode-controls{
  display:flex;
  gap:6px;
  margin-left:auto;
}

.mode-controls button,
#refreshModels{
  border:1px solid #aaa;
  border-radius:0;
  background:#fff;
  padding:8px 12px;
  color:#222;
  cursor:pointer;
}

.mode-controls button.active{
  border-color:#111;
  background:#111;
  color:#fff;
}

.mode-controls button:disabled{
  cursor:default;
  opacity:.35;
}

#viewport{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid #c9c8c3;
  background:#f6f6f3;
}

#viewport.drag-over{
  outline:2px solid #1473e6;
  outline-offset:-3px;
}

#viewport canvas{
  display:block;
  width:100%;
  height:100%;
}

.viewport-help,
.selection-label{
  position:absolute;
  z-index:2;
  pointer-events:none;
  padding:7px 9px;
  background:rgba(255,255,255,.84);
  color:#666;
  font-size:11px;
  backdrop-filter:blur(5px);
}

.viewport-help{ left:12px; bottom:12px; }
.selection-label{ left:12px; top:12px; color:#222; }

.model-library{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid #c9c8c3;
  background:#fff;
}

.field-editor{
  flex:0 0 auto;
  display:grid;
  gap:8px;
  padding:15px;
  border-bottom:1px solid #bbb;
}

.field-title-row,
.field-size-row,
.field-save-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.field-title-row{ justify-content:space-between; }

.field-title-row button,
.field-save-row button{
  border:1px solid #777;
  border-radius:0;
  background:#fff;
  padding:7px 9px;
  color:#111;
  cursor:pointer;
}

.field-size-row label{
  display:flex;
  align-items:center;
  gap:4px;
  color:#666;
  font-size:10px;
}

.field-size-row input{
  width:58px;
  border:1px solid #aaa;
  border-radius:0;
  padding:6px;
  color:#111;
}

.field-save-row input{
  min-width:0;
  flex:1;
  border:1px solid #888;
  border-radius:0;
  padding:7px 8px;
}

.field-message{
  min-height:14px;
  color:#777;
  font-size:10px;
}

.field-list{
  max-height:108px;
  overflow:auto;
  display:grid;
  gap:5px;
}

.field-item-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 42px;
  gap:5px;
}

.field-item{
  display:flex;
  justify-content:space-between;
  gap:8px;
  width:100%;
  border:1px solid #d4d4d0;
  border-radius:0;
  background:#fafafa;
  padding:7px 8px;
  color:#111;
  text-align:left;
  cursor:pointer;
}

.field-item span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.field-item span:last-child{ color:#888; font-size:10px; }

.field-link{
  border:1px solid #777;
  border-radius:0;
  background:#111;
  padding:6px 4px;
  color:#fff;
  font-size:9px;
  cursor:pointer;
}

.library-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px;
  border-bottom:1px solid #ddd;
}

#refreshModels{
  padding:6px 8px;
  font-size:10px;
}

.library-message{
  min-height:30px;
  padding:9px 15px 0;
  color:#777;
  font-size:11px;
}

.model-list{
  min-height:0;
  overflow:auto;
  display:grid;
  align-content:start;
  gap:7px;
  padding:10px;
}

.model-card{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  border:1px solid #d4d4d0;
  border-radius:0;
  background:#fafafa;
  padding:9px;
  color:#111;
  text-align:left;
  cursor:grab;
  user-select:none;
}

.model-card:active{ cursor:grabbing; }
.model-card:hover{ border-color:#222; background:#fff; }

.model-icon{
  position:relative;
  width:34px;
  height:26px;
}

.model-icon::before,
.model-icon::after{
  content:"";
  position:absolute;
  top:50%;
  border:1px solid #555;
  border-radius:50%;
  transform:translateY(-50%);
}

.model-icon::before{ left:1px; width:21px; height:21px; }
.model-icon::after{ right:1px; width:13px; height:13px; }

.model-name{
  overflow:hidden;
  font-size:12px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.model-date{ color:#888; font-size:10px; }

@media (max-width:700px){
  #layoutApp{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0, 1fr) 210px;
    padding:6px;
    gap:6px;
  }

  .layout-header{ padding:7px; gap:8px; }
  .layout-header p{ display:none; }
  .mode-controls button{ padding:7px 8px; font-size:11px; }
  .model-library{ grid-row:3; }
  .field-editor{ padding:9px 10px; }
  .field-list{ max-height:62px; }
  .library-heading{ padding:9px 12px; }
  .library-message{ min-height:22px; padding-top:5px; }
  .model-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}