.search-bar{
  margin:28px 0 22px;
  display:flex;
  gap:10px;
  align-items:center;
}
#searchInput{
  flex:1;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  padding:11px 14px;
  border:1.5px solid var(--clay-200);
  border-radius:3px;
  background:#fff;
  color:var(--ink);
}
#searchInput:focus{
  outline:none;
  border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(181,86,47,0.12);
}
.search-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--clay-700);
  white-space:nowrap;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(108px, 1fr));
  gap:10px;
}

.simple-tile{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  padding:14px 10px;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.12s ease, transform 0.08s ease;
  position:relative;
}
.simple-tile:hover{
  border-color:var(--terracotta);
  transform:translateY(-1px);
}
.simple-tile.active{
  border-color:var(--terracotta);
  background:var(--clay-50);
  box-shadow:0 0 0 1px var(--terracotta);
}
.simple-tile.no-compounds{
  opacity:0.45;
  cursor:default;
}
.simple-tile.no-compounds:hover{
  border-color:var(--line);
  transform:none;
}
.tile-glyph{
  font-family:'Noto Sans Cuneiform', serif;
  font-size:28px;
  line-height:1;
  margin-bottom:6px;
  color:var(--clay-900);
}
.tile-name{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--clay-700);
  letter-spacing:0.01em;
}
.tile-badge{
  position:absolute;
  top:6px;
  right:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  background:var(--terracotta);
  color:#fff;
  border-radius:10px;
  padding:1px 6px;
  min-width:14px;
}

/* Panel de detalle */
#detailPanel{
  display:none;
  margin-top:34px;
  border:1px solid var(--clay-900);
  border-radius:3px;
  background:#fff;
  overflow:hidden;
}
#detailPanel.open{display:block;}
.detail-header{
  background:var(--clay-900);
  color:var(--clay-50);
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:18px;
}
.detail-glyph{
  font-family:'Noto Sans Cuneiform', serif;
  font-size:40px;
  line-height:1;
}
.detail-title-block{flex:1;}
.detail-name{
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:22px;
}
.detail-readings{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--clay-200);
  margin-top:4px;
}
.detail-close{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--clay-700);
  color:var(--clay-50);
  padding:8px 14px;
  border-radius:2px;
  cursor:pointer;
}
.detail-close:hover{border-color:var(--clay-50);}

.detail-body{padding:22px 24px 26px;}
.group-label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--terracotta-dark);
  margin:18px 0 12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.group-label:first-child{margin-top:0;}
.compound-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:8px;
}
.compound-tile{
  background:var(--clay-50);
  border:1px solid var(--line);
  border-radius:3px;
  padding:11px 8px;
  text-align:center;
}
.compound-glyph{
  font-family:'Noto Sans Cuneiform', serif;
  font-size:24px;
  line-height:1;
  margin-bottom:5px;
  color:var(--clay-900);
}
.compound-name{
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;
  color:var(--clay-700);
  word-break:break-word;
  line-height:1.3;
}
.empty-group{
  font-size:13px;
  color:var(--clay-700);
  font-style:italic;
  padding:6px 0 0;
}

.no-results{
  text-align:center;
  padding:60px 20px;
  color:var(--clay-700);
}
.no-results .big-glyph{
  font-family:'Noto Sans Cuneiform', serif;
  font-size:44px;
  color:var(--clay-200);
  margin-bottom:14px;
}


@media (max-width: 600px){
  .wrap{padding:28px 16px 60px;}
  .grid{grid-template-columns:repeat(auto-fill, minmax(86px, 1fr));}
  .compound-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));}
}