html,body{height:100%;margin:0;font-family:Tahoma,Verdana,sans-serif;background:#ece9d8;color:#111}
.wrap{height:100%;display:flex;flex-direction:column}
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid #aca899;background:#f6f3e5
}
.title{display:flex;align-items:center;gap:10px}
.icon{width:32px;height:32px;image-rendering:pixelated}
.h1{font-weight:700;font-size:14px;line-height:1}
.sub{font-size:11px;color:#444;margin-top:2px}
.actions button, .btns button{
  font:12px Tahoma; padding:4px 10px;
  border:1px solid #7f9db9;background:linear-gradient(#fff,#dfe8f6);
}
.bar{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-bottom:1px solid #aca899;background:#fdfbf2
}
#q{flex:1;font:12px Tahoma;padding:6px 8px;border:1px solid #7f9db9;background:#fff}
.meta{font-size:11px;color:#444;min-width:220px;text-align:right}
.main{flex:1;display:grid;grid-template-columns: 1fr 260px;gap:10px;padding:10px 12px}
.list{
  border:1px solid #aca899;background:#fff;overflow:auto;
  box-shadow: inset 1px 1px #fff;
}
.row{
  display:grid;grid-template-columns: 1fr 90px 120px;
  gap:10px;padding:7px 10px;border-bottom:1px solid #eee;
  font-size:12px;cursor:pointer;user-select:none;
}
.row:hover{background:#f3f7ff}
.row.sel{background:#dce9ff}
.dim{color:#666;font-size:11px}
.side{display:flex;flex-direction:column;gap:10px}
.card{
  border:1px solid #aca899;background:#fff;
  box-shadow: inset 1px 1px #fff;
  padding:10px;
}
.card.small{padding:8px}
.cardTitle{font-weight:700;font-size:12px;margin-bottom:8px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin:6px 0}
.kv span{color:#555}
.kv b{font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.btns{display:flex;gap:8px;margin-top:10px}
.note{font-size:11px;color:#333;line-height:1.35}
code{background:#f3f3f3;border:1px solid #ddd;padding:1px 4px}